Show Title / Descrip on Singlepic

@markwebstar – Although we are reviewing additional features and enhancements to the SInglePic display type we do not have a set schedule for when they may be implemented.

As it is, you would probably be best served by creating a custom template to display the additional details you are looking for in the display. See this article about templates here for more assistance: https://nextgen-gallery.com/templates/

Once you have a “new” template you can add the parameter template=title-text for example if you named the template singlepic-title-text.php

As to displaying the image description in the Lightbox Effect, you will just need to ensure you choose an appropriate effect from the bundled Lightbox libraries we include with NextGEN Gallery as a convenience, or use a third-party plugin or custom library installation of your choice that suits your needs.

Thanks!

– Cais.

@photocrati

thanks, cais, for trying to help me but i’m afraid these directions go way over my capabilities. i’ve looked at the templates link and cannot see which info is relevant to want i want to do. if i create a template i don’t understand what code i should be putting in it etc

is there a clearer explanation for beginners ?

Hi markwebstar,

You’ll want to create a new directory in your active theme directory and name it “nggallery”. Place the following code in a file called singlepic-title-below.php in that directory:

<?php if (!defined ('ABSPATH')) die ('No direct access allowed'); ?><?php if (!empty($image)) { ?>
    <a href="<?php echo nextgen_esc_url($image->imageURL); ?>"
       title="<?php echo esc_attr($image->linktitle); ?>"
       <?php if(!empty($target)) { ?>target="<?php echo esc_attr($target); ?>"<?php } ?>
        <?php echo $image->thumbcode; ?>>
        <img class="<?php echo $image->classname; ?>"
             src="<?php echo nextgen_esc_url($image->thumbnailURL); ?>"
             alt="<?php echo esc_attr($image->alttext); ?>"
             title="<?php echo esc_attr($image->alttext); ?>"/>
    </a>
    <?php if (!empty($image->description)) echo esc_html($image->description); ?>
    <?php if (!empty($image->caption)) { ?><span><?php echo $image->caption; ?></span><?php } ?>
<?php } ?>

You may need to wrap the echo of the $image->description attribute in a span, div, p, etc as necessary.

@benjamin

Thanks very much for taking the time to do this ! I’ve played around with it and got the font size and style the way I want it.

Do I now need to use [template=singlepic-title-below] in every post along with [singlepic id=xx w=320 h=240 float=center] now or is there a way to make this template the default for singlepic (or otherwise) ?

Shortcodes pull their default values from those set in the “Gallery Settings” page, all you need to do is set the template field there in the Basic Singlepic accordion.

thanks again Benjamin !

at risk of testing your patience, is it possible to include the shortcode for w=320 h=240 float=center in your code for the template ? in this case, i would then only have to include [singlepic id=xx] in each post to get the image to display consistently. no worries if not, of course …

The template would not be the appropriate place; because of the options for watermarking & reflections there is some logic in the singlepic controller that helps provide images at the right dimension. You could set those options in “Gallery Settings” however and it will apply to all shortcodes that don’t have their own width or height parameters set.

i realise now that w= and h= are reduntant as i also have these values fixed in the Gallery Settings for SinglePic.

in these settings, the only options for float are right, left or none (not center).

i’m finding that to have both the image and title below centered in the column, i need to include the shortcode float=center in the post (for the image) AND to have all the shortcode text aligned center within the post (for the title).

am i missing something (else) ?

@markwebstar – The float parameter is based in the CSS property of the same name and not meant to be used for centering … it would likely be best to apply custom CSS to center your image/text as needed.

Without setting the float parameter in the shortcode the SinglePic by default should be centered … you may just need to adjust for how your theme presents images.

Thanks!

– Cais.

Thanks Cais

If I remove float=center, and have no float selected in the Basic Singlepic settings then the image is left justified.

I’m not very savvy with code so please could you give me some hints on what to change in the CSS.

the theme I use is Clean Home.

looking back – it seems that i was previously using float=none in the post like this [singlepic id=xx w=320 h=240 float=none] and the image was centered.

is it possible that something in this code for the title caption (adapted from Benjamin’s suggestion above) that is overriding or defeating float=none ?

<?php if (!defined ('ABSPATH')) die ('No direct access allowed'); ?><?php if (!empty($image)) { ?>
    <a href="<?php echo nextgen_esc_url($image->imageURL); ?>"
       title="<?php echo esc_attr($image->linktitle); ?>"
       <?php if(!empty($target)) { ?>target="<?php echo esc_attr($target); ?>"<?php } ?>
        <?php echo $image->thumbcode; ?>>
        <img class="<?php echo $image->classname; ?>"
             src="<?php echo nextgen_esc_url($image->thumbnailURL); ?>"
             alt="<?php echo esc_attr($image->alttext); ?>"
             title="<?php echo esc_attr($image->alttext); ?>"/>
    </a>
    <em><span style="font-size: 10px;"><?php if (!empty($image->description)) echo esc_html($image->description); ?></span></em>
    <?php if (!empty($image->caption)) { ?><span><?php echo $image->caption; ?></span><?php } ?>
<?php } ?>

@markwebstar – You could put the float=none parameter into your shortcode, and then try adding the following class to the description and captions span tags ngg-gallery-singlepic-image

So the lines would look like:

<em><span class="ngg-gallery-singlepic-image" style="font-size: 10px;"><?php if (!empty($image->description)) echo esc_html($image->description); ?></span></em>
    <?php if (!empty($image->caption)) { ?><span class="ngg-gallery-singlepic-image"><?php echo $image->caption; ?></span><?php } ?>

This will then use the same style definition that centers the SinglePic image by default.

– Cais.

i did that …

<?php if (!defined ('ABSPATH')) die ('No direct access allowed'); ?><?php if (!empty($image)) { ?>
    <a href="<?php echo nextgen_esc_url($image->imageURL); ?>"
       title="<?php echo esc_attr($image->linktitle); ?>"
       <?php if(!empty($target)) { ?>target="<?php echo esc_attr($target); ?>"<?php } ?>
        <?php echo $image->thumbcode; ?>>
        <img class="<?php echo $image->classname; ?>"
             src="<?php echo nextgen_esc_url($image->thumbnailURL); ?>"
             alt="<?php echo esc_attr($image->alttext); ?>"
             title="<?php echo esc_attr($image->alttext); ?>"/>
    </a>
    <em><span class="ngg-gallery-singlepic-image" style="font-size: 10px;"><?php if (!empty($image->description)) echo esc_html($image->description); ?></span></em>
    <?php if (!empty($image->caption)) { ?><span class="ngg-gallery-singlepic-image"><?php echo $image->caption; ?></span><?php } ?>
<?php } ?>

… but unfortunately it doesn’t seem to have any effect.

@markwebstar – Can you provide an example URL where this is happening?

Thanks!

– Cais.

@photocrati

i’ve been working with all the posts as private whilst i sort out formatting, but i’ve made a few examples live so you can compare them.

https://markwebber.org.uk/archive/2015/06/05/image-test-1
[singlepic id=66 float=center] with shortcode “align center” using TinyMCE
*** this first example is where i would like the image and caption to be positioned ***

https://markwebber.org.uk/archive/2015/06/05/image-test-2
[singlepic id=66 float=none] with shortcode “align center” using TinyMCE

https://markwebber.org.uk/archive/2015/06/05/image-test-3
[singlepic id=66 float=center] with no alignment of shortcode

https://markwebber.org.uk/archive/2015/06/05/image-test-4
[singlepic id=66 float=none] with no alignment of shortcode

thanks !

let me know if there’s anything you want me to change for testing.