Damn it. Sorry, tried to post from my phone and ended up simply duplicating your post. This is something I do on almost all my sites using a tiny bit of javascript. Depending on your WYSIWYG editor (I use Redactor, but they all offer some variation of this functionality), there's almost always a fairly simple way for users to insert an image and include copy within the alt="" attribute. This is usually called "title" or something like that within the WYSIWYG. Users can also usually add a class designation via the WYSIWYG. The resulting code would be something like the following:
<img src="path/to/image.jpg" class="customClassName" alt="caption copy here"/>
Your CSS can treat the image responsively via the class, and then a bit of javascript can check your document for this custom class, detect the alt attribute content, and rewrap the image inside a <div> tag with the caption copy displayed as text. Something like the following (using jQuery, events unchained for clarity):
$('.customClassName').each(function(){
if ($(this).attr('alt').length > 0){
var thisclass = $(this).attr('class');
var thistext = $(this).attr('alt');
$(this).removeClass(thisclass);
$(this).wrap('<div class="'+thisclass+'"></div>')
$(this).parent().append('<p>'+thistext+'</p>');
}
})
The result is a classed div with nested image an caption that's responsive via your CSS. Though I totally agree with Bruno17 on this, clients do tend to wreck sites this way, it's often completely unavoidable and I have to do it all the time.
MODX Staff
