Responsive Images in Wygwam with CE Image Bulk Tag

Responsive Images in Wygwam with the CE Image Bulk Tag

February 20, 2015 by Ryan Masuga

Here’s the dilemma: A content editor is uploading images in an ExpressionEngine Wygwam WYSIWYG field that are easily 3000+ pixels wide, and using the width parameter in the dialog to “resize” the images with a specified width. From their perspective, they aren't doing anything wrong. However, this is problematic because:

  1. The image is actually huge in size
  2. When the browser window is sized down, the image is sticking to the width the client defined, not sizing down. It's not responsive.

We solved our situation with CE Image Bulk tag:

{exp:ce_img:bulk width="900" crop="no" allow_scale_larger="no" quality="90" 
  output='<img src="{made}" alt="{attr:alt}" style="max-width:{width}px;{attr:style}" />'}
  {news_body}
{/exp:ce_img:bulk}

First, CE Image sizes anything larger than 900 pixels down to 900px - which is the width of our content column. Then the trick is the “output” parameter, which outputs the following:

<img src="{made}" alt="{attr:alt}" style="max-width:{width}px;{attr:style}" />

All our images are sized to 100% in CSS, which is a common way to handle images in responsive layouts.

img {
  width: 100%
}

We didn’t want to have CE Image add any specific width or height to the image but we did need to know the width for use in a max-width parameter. The problem there is, there is no “max-width” parameter in the ckEditor Image Properties dialog box - the client would have to know to click into “advanced” and enter that CSS in the “Style” field - not ideal.

So we set it up so they can enter the images as they normally do, by setting a width on images that are way too large. No change to their flow at that point. However, CE Image bulk now uses the width to know what size image to make and cache, and then it uses that as the max-width. 

A 3000 pixel wide image with a specified width of 500, alignment of left and a border gives us a 500 x 375 cached pic, and would output:

<img src="/img_cache/made/assets/uploads/bigfatpic.jpg" alt="big fat pic" style="max-width:500px;float: left; border-width: 5px; border-style: solid;">

That same 3000 pixel wide image with no width specified at all creates a 900x675 picture and gives us:

<img src="/img_cache/made/assets/uploads/bigfatpic.jpg" alt="big fat pic" style="max-width:900px;">

This doesn’t affect smaller images (other than that they get a max-width applied of their natural width) and all the images size down when the browser window is scaled down.

Thanks to Paul Frost (@pfweb) for pointing us in the direction of the CE Image Bulk Tag's "output" parameter. His solution is here.

This is a basic solution and doesn't do anything crazy with picture elements or srcset. If you have other tweaks to this method that would make it even better, we'd love to hear about it on Twitter: (@gomasuga, @masuga). Make sure to use the #eecms hashtag so other ExpressionEngine developers will see it as well.

You Might Also Like

More from Masuga Design

Subscribe to receive our newsletter.