Hi, I love this module! Great work.

I've attached a patch to add a couple of enhancements that are useful for me - firstly, the resolution is calculated based on window size, not screen size (use case: small resized window on a bigger screen. As it stands, the resolution is only updated on page load.

Secondly, images are generated from names styles according to the selected style and resolution - eg. if using 'medium' style and setting a breakpoint of 480, a preset 'medium_480' will be used if it exists and the window is <=480px wide. This allows for fine tuning of the generated image using regular image style effects, eg. crop, scale etc.

If the style does not exist, the un-adapted style will be used ('medium' for the above example).

Hope this is useful!

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

bgilhome’s picture

FileSize
2.38 KB

UPDATED patch: corrects image dimensions output for the generated image.

NB the features above are only implemented for public images in this patch.

bgilhome’s picture

Actually, an image style is only updated to the current resolution on a second page load (after a window resize) - any thoughts?

Should be OK for the first page load on un-resized windows.

Matt Wilcox’s picture

Please note that using screen size is intentional. DO NOT apply this patch for using Window Size instead. The documentation for why this was done is in the main Adaptive Images website, but it boils down to browser caches. You browse a site with a small window and the images are downloaded and cached by the browser. If you then maximise the window all of the images are too small and will not be re-requested. In short, the site breaks. There is no good solution to this because there is no way for a particular page to know if the cached version it has is the right one for the current window size.

bgilhome’s picture

Good point. I've reverted to screen size.

What are your thoughts on the second aspect of the patch, namely rather than simply delivering resized images, using image styles named $preset_$resolution where $preset is the selected preset name and $resolution is the applicable breakpoint resolution? This allows separate styling (eg. different crop) for different device resolutions.

larowlan’s picture

How about adding the window size option as a debug setting for developers to use?
Once you're happy it's working you switch it off and revert to screen size (for above stated reasons).

larowlan’s picture

Status: Needs review » Active
sanduhrs’s picture

I like #4 and would be happy to include that into the module. But rather than using a naming convention I'd prefer to be able to map breakpoints with previously defined styles in the adaptive effect settings form.

sanduhrs’s picture

Title: Suggestions & patch for window resolution & image generation » Allow for breakpoint to style mapping

Updating title.

BrightBold’s picture

#5 is a great suggestion for developers. I've been using window resizing liberally in my responsive theme development.

sanduhrs’s picture

Version: 7.x-1.3 » 7.x-1.x-dev
Status: Active » Needs work
couloir007’s picture

Has anything come of this?

ibullock’s picture

Anyone who absolutely needs a feature like this may want to check out Client-side adaptive image.

I'd get behind #5 as a good solution for making this module more workflow friendly though as I do see the case made in #3 as an important point.

Gerben Spil’s picture

As suggested in #5, I've made a small patch that adds a settings form with some screen sizes. This allows for debugging different screen sizes without the need of actually to use a device with that screen size. I wrote the patch against the recommended branch, not the dev version of the module, but I think it will apply easily to both.

Gerben Spil’s picture

The previous patch did not add a menu item to /admin/config/media. This one, hopefully, does.