Last updated 2 October 2014. Created on 30 April 2013.
Edited by schasoli, Nicolas Bouteille, Chris Burge, matthodgson. Log in to edit this page.

The Picture module allows you to use picture groups created with inline image inserted in body field with WYSIWYG or CKEditor modules.

Configuration

Picture settings

Navigate to Picture settings (admin/config/media/picture/ckeditor) and enable the picture groups which will be available in the ckeditor (the library) image dialog box.

You can set for each group his weight (in the select list) and the fallback image style
picture ckeditor settings

Filter Text format

Navigate to the text format (admin/config/content/formats/full_html for the Full HTML Format) on which you want use picture module and enable the filter Make images responsive with the picture module.
filter text format picture module

You have to move Make images responsive with the picture module below Convert line breaks into HTML (i.e. <br> and <p>) if it is enabled, otherwise you'll get empty lines above and the pictures won't be responsive.
filter text format picture module

Plugin WYSIWYG

Navigate to the WYSIWYG profiles (admin/config/content/wysiwyg/profile/full_html/edit) and enable the plugin Responsive images with the picture module.
plugin wysiwyg picture modue

And insert an image

You can now insert an image with the image dialog box (you can browse for images on the server only if you have IMCE installed).
image dialog box button
ckeditor image dialog box

Select the image alignment and choose the picture group you enable in the first step.
You can set the alt and title attributes.

Inline picture element styling

You can style a rendered inline picture element by using picture-specific attributes and their values. These two attributes are data-picture-group and data-picture-align.

The HTML generated by the Picture module is contained within a span tag:

<span data-picture-align="left" data-picture-group="bartik" data-alt="alt text here" data-picture="">
<!-- Picture module does its magic here -->
</span>

Styles can be applied to img tags within this span tag using attribute values for the data-picture-group and data-picture-align attributes.

An example is provided below:

/* Theme CSS */
/* Picture element styles */

span[data-picture-align="left"] img {
    margin-right: 20px;
    float: left;
}

span[data-picture-group="bartik"] img {
    max-width: 33%;
    height: auto;
}

These styles can be nested within @media queries, as well.

An example is provided below:

@media all and (min-width: 0em) {
    span[data-picture-group="bartik"] img {
        max-width: 100%;
        height: auto;
    }
}

@media all and (min-width: 20em) {
    span[data-picture-group="bartik"] img {
        max-width: 33%;
        height: auto;
    }
}

Custom css file for the WYSIWYG

The image inserted in the body field is displayed with original size in the node edit form. You can set a custom css in the WYSIWYG settings in order to better control the display of the picture in this form.
custom css wysiwyg

For example you can use some rules as

/* File editor.css */
/* Picture rules for node edit form */

img[data-picture-align="left"]  {
  margin-right: 20px;
  float: left;
}

img[data-picture-group="bartik"]  {
  max-width: 33%;
}

Looking for support? Visit the Drupal.org forums, or join #drupal-support in IRC.

Comments

frost’s picture

I did up a few screencasts based on this page as well as the following documentation from drupal.org:

Screencasts (first ones I've done):

  1. Responsive Image Fields
  2. Responsive Images Inline
  3. Multiple Responsive Image Breakpoint groups
karolus’s picture

First of all, thanks for the excellent write up.

In my installation, though, the image styles weren't displaying in the image popup until I installed the IMCE Wysiwyg bridge module. After that, all was OK.

To add the default styling, though, I had to do some more digging, since the suggested method wasn't working. What I did (after following the instructions above), was add this to my CSS:

// This sets the general image styling
img[data-picture-mapping="Your_Mapping"] {
  [Styling Here]
}

// This sets styling for left alignment, repeat for right and center, if needed
img[data-picture-align="left"] {
  [Styling Here]
}

Once this was added, styling could be accomplished by going into the image popup, and selecting the image style, and then alignment, requiring no code to be entered. This is an important UX element for site editors/maintainers who aren't code savvy, and makes updates much easier.

Using the span as mentioned didn't work in my instance. Not sure if it's for the same reason as Chimos mentioned below.

Chimos’s picture

Thanks for this great module.
I followed those steps, and ran into two issues:.

  1. As said in this issue, after following the steps in documentation, the ckeditor image dialog stopped working (because of an error with plugin.js). To avoid that, once the picture groups/mapping are set, you should go to, .../admin/config/media/picture/settings to find more settings of these groups related to ckeditor, and check the checkbox "Include xxx picture mapping in the CKEditor image dialog". You need at least one group with this option checked, otherwise the image dialog crashes.
    After doing this I could use the image dialog again and apply picture alignment and style to inserted images, and after saving the node everything worked as expected.
  2. However, Picture module uses image attributes in inline html (data-picture-align and data-picture-mapping) to align and style images, and when editing again that node, ckeditor content filter was deleting those attributes at some point, resulting in not aligned / styled images after saving again the node.
  3. To avoid that:

    1. go to ckeditor settings and edit the text format you are using to insert images, e.g. "Full" (.../admin/config/content/ckeditor/edit/Full).
    2. Inside "Advanced content filter", in field "Extra allowed content" add what you want ckeditor filter to allow, in this case I added,
      img [ data-picture-align, data-picture-mapping ];
      to allow those two attributes for img tags. (more info about Extra allowed content)

I hope this helps

maranjo’s picture

Many thanks for this tip, Chimos (your point 2 above). You saved me a good deal of pain in tracking this issue down. Confirming this works for my own records and in case others experience the problem too. I've experienced a similar issue before and had never found a fix until now.