Hi everyone,
I'm really interested to know what you do on your sites with images within the body content of pages.
Most of our sites want editors in EES to be able to upload a new image / choose an exisiting image, and then place it within the body content on their page, so that the image appears alongside the content that it relates to.
But we also want to have control over the hmtl of those images, and output a caption for the image.
Its really easy for editors to insert an image in a WYSIWYG, but its proving complicated to then get them to use the right image variety, and correctly style the image and the caption.
Its really easy to get an asset listing/paint layout to find child images of a page and output exactly the right html, the right image varity and the image caption. But authors loose control over the placement of the images within the body content.
I'm trying to think of a solution that uses Matrix to do what it does best (use a set image variety to fix the size, output the caption, surround it all in semantic tidy html), but allows authors to do what they do best - choose exactly where the image should go within the content flow.
So, what do you do on your sites?
Do authors place images exactly where they want, or is placement controlled by design/paint layout?
How do you get the caption of images output and styled?
All ideas, suggestions, thoughts, comparisons really wel
Images in body content - what do you do?
We had this problem at the University I worked at (years ago), and we ended up creating our own version of the Insert Image wysiwyg plugin. Honestly, I cannot think of any other way to do it if you want it to be easy for your content editors to insert images and position them.
In all of our News pages we have our images as a child of our news items. Then use list_current_asset_id to display the image. We only have one configuration of where the image should go, so it isn't an issue for us.
Ha, if I were you, I just wouldn't give the editors that much control! Personally I love to tightly control how content looks, but that is just me. 
Have you had any luck with the image content type div? When you insert a new div and choose image from the content type. It gives you some structure around the image that you can then hook into with CSS and float it in your content and style it. I actually haven't used it much, but it might help?
It doesn't help with the image variety though, and it's not supported in EES at the moment.
[quote]
Have you had any luck with the image content type div? When you insert a new div and choose image from the content type. It gives you some structure around the image that you can then hook into with CSS and float it in your content and style it. I actually haven't used it much, but it might help?
It doesn't help with the image variety though, and it's not supported in EES at the moment.
[/quote]
Yeah, I don't think that content type gets used much. It isn't very flexible, at least for us.
[quote]
Have you had any luck with the image content type div?
[/quote]
Not supported in EES so not an option for us right now.
Ideally what I'd like is something where editors just insert an image, and choose a style for that image from a dropdown. Admins set that style, and the style then dicates the html wrapper, the variety of the image to use, and if the caption gets output - like a paint layout.
In fact, yes, that's what I need - an option in the insert image box for editors to choose from a few paint layouts. And while we're at it, to remove the align, vspace, hspace and border options. Editors should never see those!
Where do I go to request that?!
C.
[quote]
Where do I go to request that?!
[/quote]
Just call up Squiz. If you have the $$ they will build it.
I'm a bit late to reply to this, but I just found this thread on a search and wanted to add that we've found the best method to be uploading the images as 'children' of the page and then automatically displaying these with an asset listing embedded in the paint layout. If our web authors upload one image it appears in the top-right of the page. If they upload more, then a little image gallery is created in the same place. For example:
http://www.antarctica.gov.au/media/news/2013/australias-successful-antarctic-blue-whale-voyage
We've trained our authors that they need to set images to 'type 2' if they want to hide them from the image gallery. (For example when you absolutely need to embed an image in the page manually.)
This then gives us the ability to modify the exact HTML and CSS that is used to display the images, and giving people less freedom in placing images has made the site neater overall.
We use the same plan with videos, which automatically appear at the bottom of the page along with their transcript.
My site uses fixed places for images, and a gallery option when theres more than one.
But just a thought... could you put the image as the child asset, and use a paint layout to include it in a fixed place (beginning / end etc) and format it correctly, but then allow your users to mark the spot they want it with some special text phrase like {IMAGE} and then use jQuery to locate that and zap the image div into the right place when the page loads?
On my site our biggest problem was the specific aspect ratio of images that fits with the site design. Theres no option in Squiz to crop images down to a specific area and the resize options for image varieties can make images stretch or shrink if you need a specific W and H. In the end I wrote a Flash utility that includes a UI where the uploader can select the crop they want - constrained to our aspect ratio - and then it does the upload for them (based on the same SWFUpload core)
No offence to our users, but even something like having to put in a special keyword to place the image, as well as loading the image as a child of the page... well, the more things they have to do, the more likely they are to do something wrong!
I'm thinking of maybe adding my idea to Roadmap. A additional dropdown available to Edit+ authors when then insert an image in the WYSIWYG. The dropdown would be populated by a list of Paint Layouts set by the web admin for that section of pages. The paint layouts would then control the whole html of the image - so choose the right image variety, output the caption / metadata etc as required. A whole little chunk of html, that will appear where the author places the image.
I know that my sites in particular have very context specific images that we do like to be placed by the text, but we can't be the only sites that have that need. And, unlike having a set paint layout for the whole page, with one way to output images, this way would let authors choose between different styles depending on the image used - eg some might not have captions, some might need a link to a larger image etc.
if it doesn't get support on Roadmap then maybe I'll ask Squiz for a quote for how much it would cost to build.
Thanks for all your views though, really useful.
Charlie.
Hey Charlie, sorry if this reply is a bit late and doesn't add much to the discussion, but like others here I've had great success using paint layouts/lists/builders for image control and ease of use in Matrix.
Nesting builders in layouts for logged in editors allows for really easy uploads, and with a trigger for thumbnailing, and a nested list for uploaded images, galleries are all too easy.
Editors can pick from their uploaded images in their galleries and set them as featured images within the content too. This is a controlled process and removes room for error.
I've found that editors can be a bit lazy with captions, so I default the caption field to the name of the page, and editors can modify it at or post upload if they wish.
Finally, I use a third-party WYSIWYG which I've customised for users to visually pick from any images within their site, and add them to content by picking a layout style like you've suggested above, specifically: classes for float left, center, and float right. Screen Shot 2013-05-15 at 9.47.28 AM.png (427 KB) Screen Shot 2013-05-15 at 9.50.05 AM.png (194 KB) Screen Shot 2013-05-15 at 9.49.06 AM.png (142 KB)
I've just come up against this issue myself, and solved it like this. Have your authors give their images a class, such as captionLeft or captionRight (very simple in Edit+), and set the title text to be your caption (not ideal, I know, but this is JS, so we need to get at the data client-side). Then add the following jQuery:
$(window).load(function(){
$('.captionRight').wrap('<div class="captionBlock right" />');
if ($('.captionRight').attr("title").length > 0) {
$('.captionRight').after('<p>' + $('.captionRight').attr("title") + '</p>' );
}
$(’.captionLeft’).wrap(’<div class=“captionBlock left” />’);
if ($(’.captionLeft’).attr(“title”).length > 0) {
$(’.captionLeft’).after(’<p>’ + $(’.captionLeft’).attr(“title”) + ‘</p>’ );
}
})
This turns your:
<img src="path/to/image.jpg" alt="alt text" title="Image caption" class="captionRight" />
into:
<div class="captionBlock right"><img src=“path/to/image.jpg” alt=“alt text” title=“Image caption” class=“captionRight” />
<p>Image caption</p>
</div>
Seems to work, though not yet tested very thoroughly.
Tom