Tag: nextgen gallery

Unfortunately the NextGen gallery V2 templates documentation is a little confusing as some is for the old templates and some is about transitioning to the new. There is no basic page to explain what is going on. The best is here.

Thankfully there are really helpful people on the WordPress.org forum where they have explained various things.

Firstly I wanted to add captions below the thumbnails which was available in a standard template in the legacy setup but as they will be depreciating this shortly I thought I would set up the system properly with the new templates.

lheisey posted a very useful update on their issue which was the same as mine. Firstly you have to create the folder path as out of the box the install does not include this path, this can be done through CPANEL or FTP. The photocrati-nextgen_basic_thumbnails folder and its subfolder templates need to added. Full path is:

wp-content/ngg/modules/photocrati-nextgen_basic_thumbnails/templates/

Then you will need to create a file in the folder called something ending in -view.php. Mine I called test-view.php.

The contents of this file will be exactly the same as the one found at:

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

But with some additional code added at lines 55 and 56 (thank you to PostmasterGS in this post), this is slightly different to the code in the post as I could get the text to be visible with just a span, div or even with nested paragraphs inside. A heading with custom CSS solved that. I have used ak suffix so I can track the changes.

Adjusted code:

<div class="ngg-akcustom"><h6><?php if (!$image->hidden) { echo $image->alttext; } ?></h6></div>

In context (snippet from whole file):

 width="<?php echo esc_attr($thumb_size['width'])?>"
                    height="<?php echo esc_attr($thumb_size['height'])?>"
                    style="max-width:100%;"
                />
            </a>
        </div>
        <div class="ngg-akcustom"><h6><?php if (!$image->hidden) { echo $image->alttext; } ?></h6></div>
				<?php

				$this->end_element();

The accompanying CSS:

.ngg-akcustom h6 {
    color: #777;
	font-size: 12px;
	padding-right:5px;
	padding-left:5px;
}