WordPress.org

Ready to get started?Download WordPress

Forums

NextGEN Gallery
[resolved] Image Title and Description in Gallery View (13 posts)

  1. eswolfert
    Member
    Posted 1 year ago #

    In the old version of NextGEN Gallery I manually added some lines of code to add the title and description of an image under said image (thumbnail) in gallery view. With the update I can no longer find the location to add this code.

    How can I do this in the new version of NextGEN Gallery. Please respond quickly, because I have already updated the plugin on the website of one of my clients and I need to fix this ASAP! Not very happy with the update right now..

    http://wordpress.org/plugins/nextgen-gallery/

  2. eswolfert
    Member
    Posted 1 year ago #

    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.

  3. eswolfert
    Member
    Posted 1 year ago #

    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]

  4. eswolfert
    Member
    Posted 1 year ago #

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

  5. arrisje
    Member
    Posted 1 year ago #

    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>

  6. eswolfert
    Member
    Posted 1 year ago #

    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="http://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.

  7. arrisje
    Member
    Posted 1 year ago #

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

  8. arrisje
    Member
    Posted 1 year ago #

    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
    http://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="http://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 :)

  9. photocrati
    Member
    Plugin Author

    Posted 1 year ago #

    @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:

    http://wordpress.org/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.

  10. arrisje
    Member
    Posted 1 year ago #

    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.

  11. cynthiablue44
    Member
    Posted 12 months ago #

    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.

  12. cynthiablue44
    Member
    Posted 12 months ago #

    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:

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

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

    http://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 http://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.

  13. photocrati
    Member
    Plugin Author

    Posted 11 months ago #

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

    - Cais.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic