Using Picture module for responsive images

We encourage users to post events happening in the community to the community events group on https://www.drupal.org.
westis's picture
Posted by westis on June 15, 2013 at 1:23pm

I'm testing the Picture module to use that instead of Responsive Images and Styles for responsive images.

It's part of Drupal 8 and is also recommended over Responsive Images & Styles. There is a submodule for Flexslider and there's a patch for Media to work with CKEditor WYSIWYG (I'm not sure about TinyMCE): https://drupal.org/node/1932898#comment-7166774

It seems to be working fine for me so far. I'm only trying to solve how to use inline images á la http://demosthenes.info/blog/586/CSS-Fluid-Image-Techniques-for-Responsi...

Anyone else willing to test this out and join the discussion? Then we can later include it in the starterkits and document how to use it compated to Responsive Images & Styles.

Categories: ,

Comments

Transitioning to Zen

Posted by jdcreativity on June 16, 2013 at 1:22am
jdcreativity's picture

This sounds like it will help the transition to Zen.

It is also my understanding that we might be best off without the Styles module - so this sounds good on two fronts.

My workflow

Posted by westis on June 16, 2013 at 6:18pm
westis's picture

True that!

I have been able to do responsive, aligned images, such as images that should be left- och right-aligned and filling a percentage of the total width. Below is notes I've taken that I'll try to later convert to better documentation for using Picture for responsive images.

I have used the following modules:

  • Picture (dev version, with support for responsive images inline in CKEditor)
  • Breakpoints (Picture is using this to set the breakpoints where different images should be served to the user)
  • WYSIWYG (dev version, with a fix for a CKEditor 4.1 issue)
  • CKEditor 4.1.1 (didn't work with WYSIWYG and 4.2)

Configuration
Configure breakpoints and add & configure image styles + map image styles to picture options, according to https://drupal.org/node/1902264 (I have set breakpoints at min-width: 0, 48.25em, 60em).

In admin/config/media/breakpoints I have added one group for full-width images and one for half-width images, and added styles with prefix resp_full_ for the full-width image group and resp_half_ for the half-width images.

For the image styeles I've used the effect "Scale" with the following width/height:
resp_full_breakpoints_...mobile: 682
resp_full_breakpoints_...narrow: 858
resp_full_breakpoints_...wide: 1136
resp_half_breakpoints_...mobile: 682 (since below I've made also half-width images to display full-width on mobile layouts)
resp_half_breakpoints_...narrow: 429
resp_half_breakpoints_...wide: 568

In the WYSIWYG, for both filtered and full HTML, I've enabled Responsive images with the Picture module plugin: admin/config/content/wysiwyg/profile

I also added /sites/all/themes/okv_theme/css/editor.css as the path to the editor CSS for filtered HTML. In that file I've added the CSS for the inline images according to https://drupal.org/node/1983312

Then I added "Make images responsive with the picture module" for Filtered and Full HTML text formats at admin/config/content/formats

Then go to admin/structure/file-types/manage/image/file-display to choose the file display for Responsive. Choose Picture and select the full-width picture group. This is basically to choose the default image that then is used to create the other images.

I can then add an image with Media and selecting Responsive as "Display as" and then double-click on the image to select half-width and align it if I don't want the image to display full-width.

For some reason it doesn't work on the Live environment (on Pantheon) to double-click the image to choose alignment etc. It just greys out instead of displaying the image properties popup. Will try to see why that is.

Edit: Solution to this problem was that you must check the box "Include NNN picture group in the CKEditor image dialog" at admin/config/media/picture/ckeditor

Anyway, some spontaneous notes about how to get Picture working with responsive images in WYSIWYG (with CKEditor)

Thanks @westis, this is

Posted by emilyf on June 27, 2013 at 6:43pm
emilyf's picture

Thanks @westis, this is great. After seeing your post, decided to implement this workflow at RETN as well. Have not currently set up with wysiwyg, but the breakpoints and picture module are installed and configured.

In addition, we are using it for the slideshow on the homepage. For this, just enable the flexslider picture module in addition to the picture module.

On our slideshow view, we use the Slideshow format. Then, in the settings for that, select "Flex Slider" under "Slideshow Type". Then under the Flex slider option you can use default or any other flexslider setup you have at Configuration > Media > Flex Slider.

then on your image field in the view, just like the picture documentation says at http://drupal.org/node/1902264 you just set the formatter to Picture, set the group to the breakpoint group you want, and set a fallback if you want to your default size. Now you have a responsive flex slider using the Picture module.