Using html in captions

Permalink Browser Info Environment
Hi, Jordan!

I'm still loving the add-on... it's worth every penny I paid for it.

I'm trying to include a URL in the caption of my photos. What I want is for the user to be able to click a link in the caption (i.e. when being displayed in the lightbox) that takes them to an external page (i.e. not a C5 page). When I try just adding the html into the caption the html shows up in the lightbox, not the link.

Is there an easy workaround for this that a not-so-hot programmer like me can accomplish?

Thanks for any help you can provide.

Regards,

Chris

Type: Discussion
Status: New
chrison999
View Replies: View Best Answer
jordanlev replied on at Permalink Reply
jordanlev
Hi Chris,
The "Title" is what appears under the thumbnails, not the caption (the caption is always shown in the lightbox). However, you'll also need to modify the code a little to make it display HTML links properly.

1) Edit this file:
SITEROOT/packages/deluxe_image_gallery/blocks/deluxe_image_gallery/controller.php

...and look for this line in that file (should be around line #44):
$image['title'] = htmlentities($file['title'], ENT_QUOTES, APP_CHARSET);

...and BELOW that line add this new line:
$image['titleRaw'] = $file['title'];


2) Now edit this file:
SITEROOT/packages/deluxe_image_gallery/blocks/deluxe_image_gallery/view.php

...and find this line (should be around line #32):
<p><?php echo empty($img['title']) ? '&nbsp;' : $img['title']; ?></p>

...and REPLACE it with this:
<p><?php echo empty($img['titleRaw']) ? '&nbsp;' : $img['titleRaw']; ?></p>


Let me know if that works for you.

-Jordan
chrison999 replied on at Permalink Reply
chrison999
Hi, Jordan:

Thanks for getting back to me! The edits you suggested do work IF one wants to add URL's to the title of the image (i.e. display the URL under then tumbnail). Even though that's REALLY cool (works great!), that's not quite what I was looking for.

What I'm looking for is for the URL to appear in the caption of the image once the user has clicked on the thumbnail and the image is being displayed in the lightbox. To be more specific, here's what I'm trying to accomplish...

I have installed an external (i.e. not CS5) shopping cart on my site. Some of the pics in my gallery will be available for purchase in my "store." So, when a user clicks on a thumbnail in my CS5 Deluxe Image Gallery and is viewing the image and caption, I want the caption to say "Now available to purchase in my online store!" and have a link that takes the user to that item in the store.

Do you follow that? If not, I have set-up one image how I'd like it to appear. You can see it by going here...

http://www.crazychris.ca/index.php/gallery/animals/...

... and click on the first image "Bunny #1" to display in the lightbox. As you can see, the html code is showing in the lightbox instead of the link. Is there a way to fix that?

I hope this is a clearer explanation of what I'm looking for. Again, thanks SO much for any help you can offer!

Regards,

Chris

(EDIT: I just realized that I *could* put a "Buy it Now!" link in the title, rather than have it appear in the caption, so in a way you've solved my problem if it's not possible to get the link into the caption. However, I'd prefer the link to be in the caption so that users look at the large image before clicking the link.)
jordanlev replied on at Permalink Best Answer Reply
jordanlev
Oh, I understand now (sorry, though you meant that it was working in the caption but not in the title where you wanted it).

This one is even easier to handle, as I have a built-in option for it. Just add this line to your config/site.php file:
define('DELUXE_IMAGE_GALLERY_HTML_CAPTIONS', true);


For future reference, see the docs page for all available "advanced options" like this:
http://www.concrete5.org/marketplace/addons/deluxe-image-gallery/do...

(Or feel free to post a question too, I'm always happy to help).

-Jordan
chrison999 replied on at Permalink Reply
chrison999
Documentation?!?!? You've got documentation?!?!? So few add-ons have documentation (one of my pet peeves!) so I didn't even bother looking!

DOH!!!! (face palm!)

That's EXACTLY what I was wanting to do! However, I think I'm going to keep the title edits, too, in case that ever comes in handy.

Thanks, again, for the help! NEXT time I'll RTFM! (BLUSH!)

Regards,

Chris

(NOTE: I have now removed the URL from the image pointed to in the link above. That particular item won't be for sale!)
chrison999 replied on at Permalink Reply 2 Attachments
chrison999
Hi, Jordan!

After much struggling, I now have my online store up and running so I'm starting to add html links to the titles of my gallery images to point to my store. However, I've run into a little problem...

When I add a "Buy it Now!" html link to an image title the title text area height expands to accommodate the link. This pushes the image below it to the right so that there's a blank space in the lightbox. To illustrate what I mean, see the attached "before" (no link) and "after" (with link) images.

I have mucked with the cell spacing and cell padding in the "edit block" function, but these seem to effect the image not the image title. Or, maybe I'm just not doing it right???

Anyway, if you could tell me how to prevent the image title from pushing the image below to the right that would be *very* much appreciated!

Thanks, again, for all your help!

Regards,

Chris
jordanlev replied on at Permalink Reply
jordanlev
Two options:
1) If you're comfortable with CSS, edit this file:
SITEROOT/packages/deluxe_image_gallery/blocks/deluxe_image_gallery/view.css

...and play around with the height of each item's container div, and/or the "p" tag (which holds the captions).

2) Send me a link to the page where the titles are messing up the images (so the "after", where it's broken), and I can inspect the page myself and tell you what to change.

-Jordan
chrison999 replied on at Permalink Reply
chrison999
Holy cow!!! That was one of the *quickest* responses I've *ever* gotten to a question! You *definately* win the "best support" contest today! :D

Anyway, here's a link to a page so you can see for yourself what's going on:

http://www.crazychris.ca/index.php?cID=157...

Thanks!

Chris
jordanlev replied on at Permalink Reply
jordanlev
Thanks! It's all about inbox zero:http://inboxzero.com/

So here's how you can fix this (and also be set up to make more changes to it yourself in case you add another line of HTML in the future -- which probably won't happen but hey, they don't call you "Crazy Chris" for nothing, right?):

1) Go to Dashboard -> Pages & Themes -> Themes
2) Click the "Customize" button next to the theme you're using
3) Click the little gear icon next to "Add Your CSS"
4) Paste this into the box:
#page .deluxe_image_gallery_image {
    height: 150px;
}

5) Click the little "ok" button, then Save.

If you put in a longer caption in the future, or just want to play around with the spacing, go back there and tweak the "150" number to be taller or shorter.

That should solve everything, but if not don't hesitate to post back with more details.

-Jordan
chrison999 replied on at Permalink Reply
chrison999
WOO HOO!!! That did it! Jordan, you are THE man!!!

Btw, thanks for the link to inboxzero.com. While I no longer have EIOS ("e-mail inbox overload syndrome") since becoming a "crazy" balloon artist, in my former life as an executive I spent hours of each day swimming against a flood of e-mail messages, many of which were useless and time-wasting. So, I can *really* relate to that site and I'm going to wander through the articles. I know a *bunch* of people I used to work with who could probably benefit from that info, and I'll be passing it along. Thanks, again!

And, finally, you never know what I'll be mucking with when it comes to C5. I keep thinking "I'm done now!" and then one more neat feature or idea comes up and I just *have* to implement it! So, yes, I'm pretty "crazy" when it comes to this stuff, but I'm sure having fun! And, besides... Normal is boring! LOL!

So, thanks again for your help! You really ARE tops when it comes to speedily answering questions and/or solving problems with your add-on!

Regards,

Chris
jordanlev replied on at Permalink Reply
jordanlev
Normal is indeed boring. Glad to hear you left the stressful corporate life to pursue something more meaningful to you. I did something similar a few years back and don't regret it one bit.

Best,
Jordan
chrison999 replied on at Permalink Reply
chrison999
Hey, Jordan!

My only "regret" is that I didn't do it soon! :)

Regards,

Chris
chrison999 replied on at Permalink Reply
chrison999
UPDATE: I just had someone go from this page to the link above, obviously looking to see the add-on at work. The add-on is now working but at this page:

http://www.crazychris.ca/gallery/balloon-gifts-decor-and-display-pi...

So, if you're wanting to see the add-on with html links included in the captions, go to this page instead of gallery/animals.

Thanks!

Regards,

Chris
chrison999 replied on at Permalink Reply
chrison999
Hey Jordan!

I've upgraded the add-on twice, and each time I have to go back and re-apply the edits you gave so that html code shows up properly in captions and descriptions. Would it be harmful to make that code the default in the add-on? If not, I suggested making it the default the next time you issue an update, as that will save a bit of time and work for folks like me who want the html codes showing up properly.

Thanks!

Regards,

Chris
jordanlev replied on at Permalink Reply
jordanlev
Hi Chris,
Sorry about that. It's been a while though, and I may need you to remind me of the details here. Does simply having this in your config/site.php not work:
define('DELUXE_IMAGE_GALLERY_HTML_CAPTIONS', true);

?
chrison999 replied on at Permalink Reply
chrison999
No, I have that define statement in my config/site.php file, but the html still doesn't display properly whenever the add-on is updated. I have to make the edits to controller.php and view.php that you specified in your reply in second message from the top. Once I do that, the html shows up properly.

So, to summarize, if those changes to controller.php and view.php were the default, I wouldn't have to make those changes each time the add-on is updated. Can that be done without breaking something for those who don't need/want the html functionality?

Hope that helps...

Regards,

Chris
jordanlev replied on at Permalink Reply
jordanlev
Hi Chris,
Okay, I think I remember now... you want the title to be HTML too (not just the caption).

I think if you change things up in a different way, it can work without you having to then change it again the next time the addon is updated. Instead of the code from up above, try this:

1) Update the addon to the latest version (if you haven't already)

2) Copy this file:
SITEROOT/packages/deluxe_image_gallery/blocks/deluxe_image_gallery/view.php

...to here:
SITEROOT/blocks/deluxe_image_gallery/view.php

(you'll probably need to create that "deluxe_image_gallery" subdirectory inside your site's top-level "blocks" directory)

3) Edit that newly-copied file, and change this code (should be around line #32):
<p><?php echo empty($img['title']) ? ' ' : $img['title']; ?></p>

...to this:
<p><?php echo empty($img['title']) ? ' ' : html_entity_decode($img['title'], ENT_QUOTES, APP_CHARSET); ?></p>


Now because you're overriding the view.php file and putting that override in your site's "blocks" directory, that will stay around even when the package files are updated (because those are in the "packages" directory, not "blocks").

Hope this solves the problem.

Best,
Jordan

concrete5 Environment Information

Browser User-Agent String

Hide Post Content

This will replace the post content with the message: "Content has been removed by an Administrator"

Hide Content

Request Refund

You have not specified a license for this support ticket. You must have a valid license assigned to a support ticket to request a refund.