Images with captions in content areas

I’m looking for suggestions for how to enable my clients to insert images into their content next to a relevant paragraph, float it left or right and include a caption under the image.

What I’ve done is write instructions for using the editor to browse to or upload an image. Insert it into the content, apply the class on the appearance page, etc. No problem so far.

To add a caption under the image, I’ve created a style (css selector) to float the text left or right. The editor has to carefully insert a break after the image, type the text, select the text, then apply the style.

It all works, but if they miss one step or don’t select the text correctly, or make a mistake and try to fix it, they invariably end up with extra lines, spaces, misalignment, etc and I get a phone call.

I have another project coming up where I know they will want lots of images in their content with captions.

Does anyone have a suggestions for how to make this more bullet proof or least, less prone to error?

Thank you!

You can use plugin DirectResize.
Change template in config file:


Сaption set through property image title in TinyMCE image edit dialog.

EVD

This is an excellent solution! Thank you.

I noticed a couple of things.

The size of the image must be reduced in the image dialogue by at least one pixel or the plugin doesn’t activate. No problem

The image alignment doesn’t work when the plugin is activated.

Thanks to a posting by Metaller
http://modxcms.com/forums/index.php/topic,19236.60.html
I determined I need to add a place holder to the template, such as
When applied to the img tag in the template, the image is aligned but not the caption. I think, instead, I need a place holder to apply a class to the div, rather than just the image within the div. But I haven’t got this working just yet.

Stay tuned

Terry

The size of the image must be reduced in the image dialogue by at least one pixel or the plugin doesn’t activate.

I have forgotten about it. In my case users always have big image and need to be resized it.

When applied to the img tag in the template, the image is aligned but not the caption. I think, instead, I need a place holder to apply a class to the div, rather than just the image within the div. But I haven’t got this working just yet.

You can try to use this template:

In this case to div tag apply additional class: left or right, or nothing if image not aligned.

EVD

Yes, exactly where I was going with this. Finally got back to it today. Works great!

Thank you!

Terry

Hmm, this is exactly what I’m searching the forums for. I must try this. I’ll come back with the result as soon as possible.