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 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.



frjo’s picture

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.

jonvaljean’s picture

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:

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.

jonvaljean’s picture

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

kmanus’s picture

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.

kmanus’s picture

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?

frjo’s picture

Status: Active » Fixed

Status: Fixed » Closed (fixed)

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

museumboy’s picture

For some reason I am not able to see the node tokens, but only Current Date, Current page, current user, files, random, and site information. Any ideas? Thanks

museumboy’s picture

Update: the correct node tokens did not appear in the available tokens list provided in the UI. I had to go to a display suite code field window and look at the complete tokens list. I copied and pasted the tokens and it appeared correctly in the colorbox display.

AngelicaIbarra’s picture

Where can I get the full list of token?

PrineShazar’s picture

Check this patch.

Issue is with colorbox field formatter. Currently you will see node tokens when configuring colorbox captions (manage display) on a node/bean/entity etc but not on a view with fields. More info in link above.

imperator_99’s picture

The best option to use is the 'Colorbox Trigger' field, rather than using the Colorbox image formatter on the image field. This trigger field gives you far more control over the output of colorbox, including the ability to use Views fields in captions rather than tokens. This means you can build up a custom caption field using Views and then use that as your caption. You'll need two image fields, one as the trigger which uses whatever size you consider to be your gallery size (such as a thumbnail) and then another image field which you exclude form the display to serve as the colorbox display image, which you set to display at original size, or some other larger size.

nuncium’s picture


I am also struggling with how to create HTML formatted captions which will allow rich text below the image in the Colorbox.
it seams like the thread went on how to use tokens instead.

So, is there a way to use HTML formatted captions?
When using tokens, all html markups get stripped.

Thank you,