This is probably more a documentation issue, but I cannot get to the bottom of how to create HTML formatted captions which will allow rich text below the image in the Colorbox. Forgive me if it is obvious, but I have searched the issues and docs and although I think (pretty sure based on the issues I have read) it is possible to have formatted descriptions (multiple lines) in the "caption" area of a Colorbox, I cannot figure out how to do it.

I confess I am a newbie and so the indications to "use tokens" is not helping me, as I do not know how to do that. I tried creating a field called field_caption_1 and then tried using {field_caption_1} or just {caption_1} in the Title field (where I presumed Colorbox gets its data for creating the caption, but the caption just displayed the exact text " {field_caption_1} " etc. So I am stuck.

I really like Colorbox, using Insert (following the video tutorial #2 - thanks frjo for that) into my WYSIWYG editor CKEditor 3.6.6.7689 and that all works fine. (I could not get Media and Media Colorbox to work, I don't know why, so it is a bit time consuming to get all my images up but I will have to live with that). But I need to figure out how to create discriptive texts below the Colorbox images, sort of like what you can get in the module "Hover Preview" and then I am ready to go.

Could anyone out there be so kind as to give me a bit of a how-to so I can get through this? I would really appreciate it.

Thanks in advance.

Jon

Comments

When you in the formatter settings select "Custom (with tokens)" you get a text field and link "Browse available tokens.".

Click first in the text field and then click the link "Browse available tokens." and you will be able to browse all available tokens. The fields on your node type will show up under "Nodes". Simply clicking on an token will insert it in the caption field.

Thank you very much frjo. I made progress thanks to your post, and see the synax for a token. I created the caption fields, made two of them, so that I can insert a different caption for each image, having created two image fields as well. So far so good.
The data entered in the caption fields appears as title info in the Colorbox. Excellent.
Now, the problem is formatting the data, so that below the colorbox image there will appear a rich description of the image.
I made one of the caption fields into the type "Long text and Summary" to be able to create a rich formatted text, using my WYSIWYG editor. This works, in displaying the caption in the page (as a displayable field, obviously that would be turned off in production).
The problem is, that Colorbox seems to strip all the formatting out of the HTML and only displays the actual text, in the title area. Is there a way to tell Colorbox not to do that, and to faithfully repeat the HTML it finds in the field (token) so that the same formatting that appears on the page, appears below the image in Colorbox ?

You can see the effect I am getting if you look at the test page:

http://216.131.121.66/content/dp-6-bla#

make sure you are set for English language to see this page. Once I solve this problem I can create all my content in 6 languages, hopefully the tokens will be respectful of the language, but of course I need to try that.

Thanks again for your help.
Jon

Any way to make the HTML in a token'ed field appear in the caption area of a Colorbox ? Hopefully ...
Thanks for your help.
Jon

So, as far as I can tell, when you use the formatter on an image to replace the caption with a custom token, it writes your token into the "title" tag.

You can't include html in a title tag.

So if you have images as a series (and hence can't use the colorbox trigger for your caption) with colorbox, there is no way to include an HTML formatted caption since it writes your token to the title tag... is this correct?

I've been searching all over and can't figure out a way to make this happen when you are using the colorbox formatter on an image field.

OK, since I've given up on trying to format the caption with HTML via the image formatter, I've put together a different method using jQuery, that does a "Find and Replace" within the "#cbox_title" div.

It works as far as changing text elements, but for some reason, the html tags I insert are rendered as though they were made with entity tags (i.e. <, etc...). What is causing the "#cbox_title" div to render tags as plain text?

Status:Active» Fixed

Status:Fixed» Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.