MAYO Images and the Picture Module

After getting the Drupal MAYO theme responsive 7.x-2.0 version released I had some thoughts. What about the images? I'm talking about images that are not part of the banner, backgrounds, or little icons. It's the images that are in fields set aside especially for them or inline in content that concern me here.

Here I have some of the Drupal module that I tried and references to different lines of thought. It's the inline images that were such a challenge and I finally decided on the Picture module as my go to solution for now. The fact that it's going to be in Drupal 8 from the get go is what influenced me to persevere.

Modules used with Drupal 7.27: 

Inline images were my big concern and all the references I found talked about using CKEditor with the WYSIWYG module. I much prefer the CKEditor module so I tried it that way and got it working fine.

It works best for me to install and enable all the modules prior to starting configuration. I created a "Responsive" content type just so I could try everything without messing with my existing setup.

The first thing I did was to upgrade my version of CKEditor from I downloaded the "Full Package" of Version 4.4.0 with 72 Plugins. I already had the CKEditor module for Drupal. Go to admin/config/content/ckeditor and click edit for the Profile that will use the CKEditor.

  • Under basic setup check your text formats. Mine was only for Full HTML.
  • In Editor Appearance make sure to get the IMCE button moved up to the current toolbar and set the Plugins.
  • Important step here under Advanced Content Filter. I had to set it to Disabled which wasn't a problem since I am the only one editing content. ACF is new with CKEditor 4.1 and can cause your inline image settings to disappear when your content is revised. There is a lot out there on this issue and if you have to use ACF you will probably need some allowed content rules here.
  • Under File Browser Settings I set it to IMCE since I didn't want to buy CKFinder.


Set up the Breakpoints in admin/config/media/breakpoints.

  • The best way is to add breakpoints to your file. For MAYO I create a Sub MAYO sub-them as detailed here.
  • Use the Add Responsive Style wizard to create styles for your breakpoints. When you click "Create" it will bring you to the Image Styles configuration for you to edit them.

In Picture module settings at /admin/config/media/picture/groups open your group and now map image styles you have created to the breakpoints for your group.

  • While in Picture module admin check the Settings tab. The only JavaScript library that seems to work for me is "picturefill" even though "picturefill2" is the latest version.
  • Good documentation on breakpoints on with links at the bottom to good video resources.
  • A quick demo of the Picture module in action is seen here.