Image Title and Description in Gallery View

Just found out you can add descriptions below thumbnails using “caption” template, I added “template=caption” to the gallery’s shortcode. However, now all images are displayed below each other, as in one column while I want and specified TWO columns….

Getting real tired of this, I would rollback to the old version until this version is stabilized but it sounds like that is not possible.

Also, I want to be able to link to an external page in the caption, but adding a link to the caption breaks the gallery…

I’m getting a headache. Well done plugin writer. [/sarcasm]

FOUND IT!

You need to access your files through FTP and then go to:

/wp-content/plugins/nextgen-gallery/products/photocrati_nextgen/
modules/nextgen_basic_gallery/templates/thumbnails/index.php

There you find the code (slightly updated but still similar to the old) for generating regular galleries and add the code to display the Image Title and Description under the thumbnails.

In case anyone needs it, I added this code just below the closing link-tag in the “ngg-gallery-thumbnail” div:

<span><strong><?php echo $image->alttext ?></strong></span>
<span><?php echo $image->description ?></span>
<span><?php echo nggcf_get_field($image->pid, "Link"); ?></span><br>

The third/last line is the updated code to display a custom field from the NGG Custom Fields plugin.

I hope this helps people who are having the same or a similar issue. ??

I see above you are also I want to link to an external page. If I am reading this right, Is this the only thing I need to add to make the pictures link to external link?

<span><?php echo nggcf_get_field($image->pid, "Link"); ?></span><br>

That bit of code displays whatever you enter into the “Link” custom field created with the NGG Custom Fields plugin. Inside that field I entered the code to link to an external page, for example:
<a href="https://google.com">Click here</a>
This would add “Click here” below the thumbnail, title, and description, linking to the address of the external page.

If you want to make the thumbnail link to a different page you need to find this bit of code:

<div class="ngg-gallery-thumbnail">
<a>get_image_url($image))?>"

And replace the php bit with the address you want to link to. I suppose you want each thumbnail to link to a different page, so you could use the NGG Custom Field plugin for that. I haven’t tested it though and maybe with the updated plugin there’s a different way to do this, I don’t know.

Thanks eswolfert I am going to give it a try and see if it works ??

Thanks! Slowly but shortly I am getting there. So far I got the wording underneath the pic to link to an external page. Take a look here
https://arrisje.com/visual-recipe-index/main-dishes/main-dishes-pork/

The one I fixed was Pulled Pork.

What I did I added

<span><?php echo nggcf_get_field($image->pid, “Link”); ?></span>

below the closing link-tag in the “ngg-gallery-thumbnail” div: what you suggested.

Then I went to manage gallery and added to the link space:

a href=”https://arrisje.com/pulled-pork/”>Pulled Pork</a

Now I would like the thumbnail picture to link to that page also. I don’t understand your explanation, I do see

<div class=”ngg-gallery-thumbnail”>
get_image_url($image))?>”

But what do I need to replace it with?

Your help is much appreciated ??

@eswolfert: I just wanted to note we’re aware of the caption template issue with the columns wrapping. If you want to follow that issue, you can post/follow this thread:

https://www.ads-software.com/support/topic/nextgen-20-caption-template-column-problem?replies=2

On the thumbnail linking customization you both are looking for, I’ll need to check that and play with it and get back to you on it.

Thank you for looking into it. In the mean time I have rolled back to the previous version. I’ll wait till there is one that works for me.

eswofert thank you, thank you, thank you. Your code didn’t quite work for me but it did give me the best ever hint i.e. which file to alter and what the echo code should look like.

Here’s the file path as you suggested and which worked for me:

wp-content/plugins/nextgen-gallery/products/photocrati_nextgen/
modules/nextgen_basic_gallery/templates/thumbnails/index.php

The you gave me the biggest hint. I won’t duplicate your code here, what I will do is show what the code looked like before I changed it. Before change it looked like this:

<div class=”ngg-gallery-thumbnail”>
get_image_url($image))?>”
title=”<?php echo esc_attr($image->description)?>”
data-image-id='<?php echo esc_attr($image->pid); ?>’
<?php echo $effect_code ?>>
<img
title=”<?php echo esc_attr($image->alttext)?>”
alt=”<?php echo esc_attr($image->alttext)?>”
src=”<?php echo esc_attr($storage->get_image_url($image, $thumbnail_size_name))?>”
width=”<?php echo esc_attr($thumb_size[‘width’])?>”
height=”<?php echo esc_attr($thumb_size[‘height’])?>”
style=”max-width:none;”
/>

</div>

After I changed it. My code looked like this:

<div class=”ngg-gallery-thumbnail”>
pid, “Link”); ?>”
title=”<?php echo esc_attr($image->description)?>”
data-image-id='<?php echo esc_attr($image->pid); ?>’
<?php echo $effect_code ?>>
<img
title=”<?php echo esc_attr($image->alttext)?>”
alt=”<?php echo esc_attr($image->alttext)?>”
src=”<?php echo esc_attr($storage->get_image_url($image, $thumbnail_size_name))?>”
width=”<?php echo esc_attr($thumb_size[‘width’])?>”
height=”<?php echo esc_attr($thumb_size[‘height’])?>”
style=”max-width:none;”
/>

</div>

I’ll explain briefly what my problem was. I wanted my visitors to click on an image in my gallery and link through to a post.

Previously I had created a custom field with the plugin nextgen-gallery-custom-fields and named the new field “Link”, I also switched off the Lightbox effects. I then worked out what the short code link was for the destination URL. I created a page for the gallery. The result of the above mentioned code was that now my visitors can go to my gallery and click on an image and it will click through to the relevant post.

Thank you, thank you, thank you. I’ve been working on this for days. The problem was that all tutorials related to the earlier versions of NextGen Gallery. I’m using NextGen version 2.0.17.

Just a little follow-up on my previous post. I mentioned:

I then worked out what the short code link was for the destination URL.

I’ve just tested whether or not the short code link is important and my code works with either, for example the URL with the short code looks like this:

https://artuccino.com/Allan_Cunningham_Botanist_1839/?p=420

The same page’s URL is as looks like this:

https://artuccino.com/Allan_Cunningham_Botanist_1839/index.php/the-subiaco-columns-at-the-uni-of-nsw-sydney/

Both examples work.

See the working example in my gallery (a work in progress) at https://artuccino.com/Allan_Cunningham_Botanist_1839/index.php/allan-cunningham-gallery-2/

The Gallery on the main part of my gallery page is working and clicking through to the appropriate pages. The gallery in the colophon (bottom of the page) and in the side navigation bar on other pages has yet to be tweaked.

Thank you all very much for your ideas, examples and work-around. We really appreciate you sharing this with the community.

– Cais.