Responsive images in ExpressionEngine WYGWAM field

gistfile1.txt

This method requires the CE Image addon.
Tell your editors to change the width/height/alignment in the image properties pop up to 300px or whatever and set the alignment if they want, but the actual size displayed on the page will be decided by you in the template code and CSS.

In the EE template:

{exp:ce_img:bulk max="500" crop="no" allow_scale_larger="no" quality="80" output='<a href="{orig}" class="embeded_image" title="{attr:title}" alt="{attr:alt}" style="{attr:style}"><img src="{made}" /></a>'}
  {wygwam_field}
{/exp:ce_img:bulk}

In the CSS:

.embeded_image {
  float: none;
  margin-left: 0; }
  @media only screen and (min-width: 550px) {
    .embeded_image {
      max-width: 50%;
      margin: 0 2%; }
}

Or, if you want to have a caption included, get the editors to fill in the Altenrnative Text box with a caption (probably easier than getting them to use the Advanced tab and completing the Advisory Title, you could also edit the ckeditor language file to change the wording to Caption Text) and then wrap it all in a Div. Note that you need to move the Style attribute into the Div if you want the editors to be able to control the left/right alignment. They can also choose the width/height they want per instance up to the max size you set in the bulk tag:

{exp:ce_img:bulk max="500" crop="no" allow_scale_larger="no" quality="80" output='<div class="embeded_image" style="{attr:style}"><a href="{orig}" title="{attr:title}" alt="{attr:alt}"><img src="{made}" /></a><div class="caption">Caption: {attr:alt}</div></div>'}

and add this (or whatever stye you want) to your CSS:

.caption {
    text-align: center;
    font-weight: bold;
}

Paul, have you ever noticed with this approach that, for example, when you set output='<div><img src="{made}"></div>'

Your generated markup becomes

<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet massa tellus, ac faucibus urna. Donec eget risus elit, quis pellentesque purus. Ut purus nibh, elementum ac ullamcorper consequat, vehicula et risus. Integer venenatis mauris ut ante vestibulum ullamcorper auctor nisi varius. Sed at metus ligula. Phasellus semper, enim vitae rutrum lacinia, lacus leo aliquet tellus, eget euismod turpis lacus in velit. Donec et velit rhoncus tortor scelerisque volutpat. Integer mollis libero quis neque tempus ac auctor risus pretium. Nam a felis vel nibh malesuada sagittis nec nec quam. Aliquam sagittis vehicula laoreet. Nulla vulputate sodales fringilla. Vivamus tincidunt, orci nec luctus elementum, nulla dui tincidunt justo, id varius sapien libero ac ante. Integer quis tortor et nisl suscipit imperdiet ut quis elit. Pellentesque in nunc eget tellus dapibus tempus vitae id tortor. Aenean viverra, tortor sed eleifend facilisis, diam erat aliquet massa, sagittis accumsan augue nisl eu metus.</p>
<div><img src="myimage.jpg"></div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet massa tellus, ac faucibus urna. Donec eget risus elit, quis pellentesque purus.
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet massa tellus, ac faucibus urna. Donec eget risus elit, quis pellentesque purus.</p>

whereas, without the output tag, every paragraph is as it should be?

Apologies Steve I didn't get a notification of your comment.
No, my opening and closing paragraph tags are all in the right places. What version of EE, WYGWAM and CE Image are you using, I'm on 2.9.2, 3.3.3 and 2.4.5

I did notice that I should probably have used a div for the caption, so have edited the Gist.

weird, I usually get these notifications too.

Issue was the client placing the image inside of a p tag. Move the image outside and it's golden.