multiple responsive image styles? [#1544206]

Comment #1

attiks CreditAttribution: attiks commented 24 April 2012 at 12:48

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.

Log in or register to post comments

Comment #2

erutan CreditAttribution: erutan commented 24 April 2012 at 17:19

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. :)

Log in or register to post comments

Comment #3

erutan CreditAttribution: erutan commented 24 April 2012 at 19:35

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

https://github.com/erutan/resp_img_media_styles

Log in or register to post comments

Comment #4

attiks CreditAttribution: attiks commented 25 April 2012 at 07:40

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

Log in or register to post comments

Comment #5

erutan CreditAttribution: erutan commented 25 April 2012 at 18:58

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.

Log in or register to post comments

Comment #6

erutan CreditAttribution: erutan commented 2 May 2012 at 05:42

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.

Log in or register to post comments

Comment #7

attiks CreditAttribution: attiks commented 2 May 2012 at 07:13

@erutan

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?

Log in or register to post comments

Comment #8

erutan CreditAttribution: erutan commented 2 May 2012 at 19:20

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.