What is the best practice for putting captions on images inside the rich text editor? I was thinking of using a macro but am not sure if this is the best way to go about it.
What are trying to do exactly? Are you listing images from the media section then inserting the macro in your RTE?
You could create a mediaType under your Settings Sectio and add a Property Type TextBox Multiple. Whenever you upload an image in your media section you can some text to it and get your macros to display the value.
This can be an option but not sure this is what you are looking for.
Perhaps you kan use the title or alt attribute.. I think there are different jQuery/javascript techniques which use the title or alt attribute to show a caption over the image.
I had the same query a while back. Best way to do it is add a new field to your Image media type (I didn't even know you could do this) by editing it just like its any other doc type. Add a "Alt text" field and then you can store some alt text along with that image which will always be used when ever you render it out.
Dang, just realised the rendering of images in RTE is handled by the tinyMCE code not you...hmmm, my method works for your own macros not RTE.
Let me think on it, might have to do some digging.
thanks for the link, I really appreciate the help. I ended up using your suggested method and it work well, here is the way it works:
1. User selects an image as per normal in the name field (transforms to alt tag) they enter their caption, 2. The user selects the image from and from the styles drop down selects image-caption (used for the jquery selector) 3. Save and publish
I think this aproach is a lot cleaner than using a macro from a usability point of view, ideally all images would be mapped out in templates as Rich suggested.
Perhaps is's possible to create a class too if you don't want all images in RTE to use the caption... I think it just could be an empty class, so you can mark the image and select the class..
so it only will be img.className which is styled and not all image tags if you don't want that.
This was a great solution from Bjarne. Just one thing though, my client will want to see the captions happening in the RTE as well. Any advice to get this to happen?
This would be a really nice feature if possible. I explain to our content editors that if they just add text to the Name field for any image in the TinyMCE, then that text will appear as a caption. But would be fab if they could actually see that being rendered; they tend to forget how/where the caption text is when it's not visible in the TinyMCE.
(We use the Captionate jquery plugin, like it a lot.)
+1 for Captionate. Just used it in the latest site. I guess it should work in the RTE if you manage to negotiate your way through all the other TinyMCE classes, though I don't have the time to try it at the moment.
Without trying to but in on what you are achieving - I'm with Rich Green - no images in RTE, why? Responsive design goes way out of the window, on mobile, absolute nightmare.
My thinking is that you insert some image with text around it, ok so image goes left, right or middle? its like half the width, or the full width, or if you want to be a bit smarter, a percentage of the width. (But you cannot control what an editor does, which must drive some site owners mad)
So, maybe a little bit more work, but for any content editor who has tried to get an image right in rte adjust width and all sorts, a godesend. I create a docType of paragraph with an RTE, then a doctype of image, with dropdown for width, and postion, ie left, right or middle, then, dependent upon the order in the tree and the padding on the image, the text wraps around it. If the image height is larger than the paragraph, adding another paragraph joins the text under the last text, like still wrapped and not all <divvy>. And of course it is responsive.
You can carry on with as many images and paragraphs (I put an h3 tag so each paragraph heading helps seo, or you can have one paragraph with an image.
It is in raw form but I have a live example, maybe between us we could refine it? Im guessing my content editors aren't that much different from others, and they know how to create nodes, so it maybe a reasonable alternative.
Best practice for image captions
What is the best practice for putting captions on images inside the rich text editor? I was thinking of using a macro but am not sure if this is the best way to go about it.
Any ideas?
Hi Brendan,
What are trying to do exactly? Are you listing images from the media section then inserting the macro in your RTE?
You could create a mediaType under your Settings Sectio and add a Property Type TextBox Multiple. Whenever you upload an image in your media section you can some text to it and get your macros to display the value.
This can be an option but not sure this is what you are looking for.
//fuji
Hi Brendan..
Perhaps you kan use the title or alt attribute.. I think there are different jQuery/javascript techniques which use the title or alt attribute to show a caption over the image.
Bjarne
Try to take a look at this: http://www.gethifi.com/blog/jcaption-a-jquery-plugin-for-simple-image-captions
Bjarne
Hey Brendan,
I had the same query a while back. Best way to do it is add a new field to your Image media type (I didn't even know you could do this) by editing it just like its any other doc type. Add a "Alt text" field and then you can store some alt text along with that image which will always be used when ever you render it out.
Dang, just realised the rendering of images in RTE is handled by the tinyMCE code not you...hmmm, my method works for your own macros not RTE.
Let me think on it, might have to do some digging.
Pete
Thanks for the help guys, I was thinking that a sneaky jQuery hack might do it. It might be the most user friendly way of implementing this.
If possible I try to avoid having images in the RTE at all, expecially when you have captions to consider.
Is the design structured in a way that you could have the each image & caption as a separate node underneath the page?
Rich
Hi Rich,
unfortunatly it is not my design to I am stuck with having to allow images in the Rich Text Editor, you do raise a very valid point though.
B
Hey Bjarne,
thanks for the link, I really appreciate the help. I ended up using your suggested method and it work well, here is the way it works:
1. User selects an image as per normal in the name field (transforms to alt tag) they enter their caption,
2. The user selects the image from and from the styles drop down selects image-caption (used for the jquery selector)
3. Save and publish
I think this aproach is a lot cleaner than using a macro from a usability point of view, ideally all images would be mapped out in templates as Rich suggested.
Thanks everyone for the help,
B
I'm glad I could help..
Perhaps is's possible to create a class too if you don't want all images in RTE to use the caption... I think it just could be an empty class, so you can mark the image and select the class..
so it only will be img.className which is styled and not all image tags if you don't want that.
Bjarne
This was a great solution from Bjarne. Just one thing though, my client will want to see the captions happening in the RTE as well. Any advice to get this to happen?
Craig
@Craig only way I can think of doing that is to extend the back office - check out Lee's article for doing this:
http://24days.in/umbraco/2012/extending-the-back-office/
Hope it helps.
This would be a really nice feature if possible. I explain to our content editors that if they just add text to the Name field for any image in the TinyMCE, then that text will appear as a caption. But would be fab if they could actually see that being rendered; they tend to forget how/where the caption text is when it's not visible in the TinyMCE.
(We use the Captionate jquery plugin, like it a lot.)
+1 for Captionate. Just used it in the latest site. I guess it should work in the RTE if you manage to negotiate your way through all the other TinyMCE classes, though I don't have the time to try it at the moment.
Hi All
Without trying to but in on what you are achieving - I'm with Rich Green - no images in RTE, why? Responsive design goes way out of the window, on mobile, absolute nightmare.
My thinking is that you insert some image with text around it, ok so image goes left, right or middle? its like half the width, or the full width, or if you want to be a bit smarter, a percentage of the width. (But you cannot control what an editor does, which must drive some site owners mad)
So, maybe a little bit more work, but for any content editor who has tried to get an image right in rte adjust width and all sorts, a godesend. I create a docType of paragraph with an RTE, then a doctype of image, with dropdown for width, and postion, ie left, right or middle, then, dependent upon the order in the tree and the padding on the image, the text wraps around it. If the image height is larger than the paragraph, adding another paragraph joins the text under the last text, like still wrapped and not all <divvy>. And of course it is responsive.
You can carry on with as many images and paragraphs (I put an h3 tag so each paragraph heading helps seo, or you can have one paragraph with an image.
It is in raw form but I have a live example, maybe between us we could refine it? Im guessing my content editors aren't that much different from others, and they know how to create nodes, so it maybe a reasonable alternative.
Regards
Gary
I know this is old, but...
It would be great if the
umbmediapickerhonored the TinyMCEimage_caption.https://www.tiny.cloud/docs/plugins/image/#image_caption
is working on a reply...