By default, the title and caption for most of the image viewer options in MG are displayed as a single paragraph and separated by a hyphen. The hyphen is shown even if there is no title or no caption. I wanted to display the title on it’s own line, and I wanted to add spans to allow for styling the title and caption separately. The following steps will allow you add additional html to the title/caption
1. First, I’m using slimbox, but this should work for other image viewers. Here’s the default code for the slimbox option in the gallery picture template:
[+maxigallery.embedtype:is=`slimbox`:then=`
<a href="[(base_url)][+maxigallery.path_to_gal+][+maxigallery.picture.filename+]"
rel="lightbox[maxigallery]" title="[+maxigallery.picture.title:htmlent+] -
[+maxigallery.picture.descr:htmlent+]">
`+]
2. To ease readability, I’ve replaced everything inside the title tag modifier with a chunk:
[+maxigallery.embedtype:is=`slimbox`:then=`
<a href="[(base_url)][+maxigallery.path_to_gal+][+maxigallery.picture.filename+]"
rel="lightbox[maxigallery]" title="{{mgSlimboxCaption}}">
`+]
3. The chunk looks like this:
[+phx:input=`<span class="mgSlimboxTitle">`:htmlent+]
[+maxigallery.picture.title:htmlent+]
[+phx:input=`</span><br />`:htmlent+]
[+phx:if=`[+maxigallery.picture.title+]`:isnot=``:then=`<br>`:else=``+]
[+phx:input=`<span class="mgSlimboxCaption">`:htmlent+]
[+maxigallery.picture.descr:htmlent+]
[+phx:input=`</span>`:htmlent+]
As you can see, by using the phx funtion htmlent you can pass any html code you want through the title attribute of the a tag, and it gets displayed as expected in the lightbox. Woo hoo!
As you can see, the title and description already used this tag, which is why italics, bold, and other html added to titles and captions show up correctly in the lightbox. In order to pass in other html, we use a phx documented feature, which is to use phx:input’`...` as a placeholder for our code and replace the ... with the desired html.
I have used phx to insert a BR between the title and description, only if there is a title. If you like the hyphen currently used (or, better, would prefer to use an em-dash) between the title and caption, you can also use phx to only show the separator if both the title and caption fields contain content, thusly:
[+phx:if=`[+maxigallery.picture.title+]`:isnot=``:and:if=`[+maxigallery.picture.descr:htmlent+]`
:isnot=``:then=`—`:else=``+]
It works. Note I’ve used — to represent an em-dash.
Hope this helps someone.
