I could be missing something, but after setting a media image to responsive it's based off of one set of image style suffixes. It'd be nice to be able to set a few, e.g. banner, portrait, sidebar (each with their respective _normal, _narrow, etc).


attiks’s picture

The problem is that media defines their own styles as well, you can change the image style for the other view modes to something else.

The other thing you can do is add your own styles using a custom module:

 * Implements hook_entity_info_alter().
function resp_img_entity_info_alter(&$entity_info) {
  // Support the media module
  $entity_info['file']['view modes']['media_responsive_banner'] = array('label' => t('Responsive banner'), 'custom settings' => TRUE);

clear your cache and they should be visible.

erutan’s picture

Thanks for that fix.

Ideally one would be able to select Responsive_x, Responsive_y, etc from within the media styles dropdown (and map these to a prefix in the resp_img admin menu) but this works. :)

erutan’s picture

I have the extra styles showing up now. I'll let you know how integration with the different prefixes go!


attiks’s picture

The other possibility is that media (or we) provide an easy way to add custom styles. Let me know how it's going.

erutan’s picture

I'm taking another look at it, and it seems like the next steps are

1) Pairing the previous styles in my custom module with a prefix, this shouldn't be too hard.

2) Having them act as responsive images and styles in the particular field/block/etc (the toggle in /admin/structure/types/manage/).

Any comments on the best way to approach this? I do think this should be in the module, as it would be more effecient bandwidth wise than just aiming for your largest image size.

erutan’s picture

I'm really a front-end themer guy, so it'd be helpful to have some pointers on where/what to do. IMHO this is a critical change for the module, having multiple prefixes for any reasonably complex site is just as meaningful as suffixes.

If you want I could do a little UI mockup for this.

attiks’s picture


What part isn't working for you if you use the code from #1? Or is it a problem you'll have to define all the different image styles?

erutan’s picture

Apologies - user error on that one! I somehow missed the changes in /admin/config/media/file-types/manage/image/file-display/media_responsive somehow so didn't see how to link the style to a prefix (it showed up in the media module drop down just fine, but that in and of itself doesn't do anything). Hence my questions in comment #5 followed by some poking around the module code figuring I'd need to expand my little custom module. Looks good now. :)

The ideal functionality off the top of my head would be (not worrying about how these modules actually communicate):

Tab one:

Has is a list of definable breakpoint suffixes similar to /admin/config/media/resp_img but not tied to any set width.

Tab two:

At the top there is a textfield to create a new responsive style. Human descriptive and short_name.

Below that are columns of responsive styles with rows of breakpoints next to each. You can toggle these breakpoints via checkboxes and add in a numeric value for the pixel width at each breakpoint. Saving would automatically generate image styles based on toggled suffixes and the style name. If you want to do something other than a default scale, have a link to an overlay with image style options ala views.

Another approach would be to keep the column of prefixes as vertical tabs in a narrow column that ajax load into a large div column next to them where you could have space for a select menu of image style options next to each breakpoint textfield.

End result - It spits out a set of image styles for a prefix + suffixes where one could choose short_name_mobile for most uses then have a dropdown in media based on the human descriptive prefix. Saves a lot of clicking.

attiks’s picture

Assigned: Unassigned » Jelle_S
Jelle_S’s picture

In the latest dev version you can now go to admin/config/media/resp_img/create_style and add responsive styles in a more user friendly manner

Jelle_S’s picture

Status: Active » Fixed

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.