NextGEN Gallery is a powerful plugin, with more functionality than a typical WordPress plugin. Its grown organically over the years to offer the best gallery management experience offered in the WordPress ecosystem.

However, there are some legacy bit of functionality that we offer for backwards compatibility reasons, but aren't widely used. As part of an on-going effort to reduce NextGEN Gallery's disk and memory footprint, we will be removing some functionality that is seldomly used.

One of those features is the legacy template mechanism, a feature which allowed users to render their own displayed gallery templates to control how images are rendered on the page. This feature will be deprecated in NextGEN Gallery 3.5.0, and removed in NextGEN Gallery 4.0.0, scheduled for February 2021.

In NextGEN Gallery 3.0.9, we released the 2.0 template mechanism, which provides an optimal approach for customizing display types and how galleries/images/albums are rendered on the front-end. Users that wish to make use of a templating system should migrate to the 2.0 template mechanism, which we expect to support for a long time.

How to Migrate From Legacy Template to 2.0 Template

This guide is going to use the following legacy template as an example:

nextgen-gallery/products/photocrati_nextgen/modules/ngglegacy/view/gallery-carousel.php

Here's the contents of that template:

<?php 
/**
Template Page for the gallery carousel

Follow variables are useable :

	$gallery     : Contain all about the gallery
	$images      : Contain all images, path, title
	$pagination  : Contain the pagination content
	$current     : Contain the selected image
	$prev/$next  : Contain link to the next/previous gallery page
	

 You can check the content when you insert the tag <?php var_dump($variable) ?>
 If you would like to show the timestamp of the image ,you can use <?php echo $exif['created_timestamp'] ?>
**/
?>
<?php if (!defined ('ABSPATH')) die ('No direct access allowed'); ?><?php if (!empty ($gallery)) : ?>

<div class="ngg-galleryoverview">

	<div class="pic"><img title="<?php echo esc_attr($current->alttext) ?>" alt="<?php echo esc_attr($current->alttext) ?>" src="<?php echo nextgen_esc_url($current->url); ?>" /></div>
	
	<ul class="ngg-gallery-list">
	
		<!-- PREV LINK -->	
		<?php if ($prev) : ?>
		<li class="ngg-prev">
			<a class="prev" href="<?php echo nextgen_esc_url($prev) ?>">◄</a>
		</li>
		<?php endif; ?>
		
		<!-- Thumbnail list -->
		<?php foreach ( $images as $image ) : ?>
		<?php if ( $image->hidden ) continue; ?> 
		
		<li id="ngg-image-<?php echo esc_attr($image->pid) ?>" class="ngg-thumbnail-list <?php if ($image->pid == $current->pid) echo 'selected' ?>" >
			<a href="<?php echo nextgen_esc_url($image->pidlink) ?>" title="<?php echo esc_attr($image->description) ?>" >
				<img title="<?php echo esc_attr($image->alttext) ?>" alt="<?php echo esc_attr($image->alttext) ?>" src="<?php echo nextgen_esc_url($image->thumbnailURL) ?>" <?php echo $image->size ?> />
			</a>
		</li>

	 	<?php endforeach; ?>
	 	
	 	<!-- NEXT LINK -->
		<?php if ($next) : ?>
		<li class="ngg-next">
			<a class="next" href="<?php echo nextgen_esc_url($next) ?>">►</a>
		</li>
		<?php endif; ?>
	 	
	</ul>
 	
</div>

<?php endif; ?>

The legacy template above displays a carousel of images to select, and displays the selected image at a larger size above the carousel. It makes use of the $images array and some pagination variables to do this.

To create the equivalent using a 2.0 template, we would copy a file to get started. Copy the contents of this file:

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

To:

wp-content/ngg/modules/photocrati-nextgen_basic_thumbnails/templates/carousel-view.php

We would use the following code to achieve equivalency:

<?php
$this->start_element('nextgen_gallery.gallery_container', 'container', $displayed_gallery);
?>
<!-- default-view.php -->
<div
	class="ngg-galleryoverview default-view <?php if (!intval($ajax_pagination)) echo ' ngg-ajax-pagination-none'; ?>"
	id="ngg-gallery-<?php echo esc_attr($displayed_gallery_id)?>-<?php echo esc_attr($current_page)?>">

	<?php $this->start_element('nextgen_gallery.image_list_container', 'container', $images); ?>

	<?php 
	// Get the index of the image selected
	$current_index = isset($_REQUEST['current']) ? intval($_REQUEST['current']) : 0;

	// Assure that the index is within bounds
	if ($current_index < 0 || $current_index >= count($images)) $current_index = 0;

	// Get the current image
	$current = $images[$current_index];

    // Compute the url for the prev and next image
    $current_url = $this->get_url();
	$prev = $current_index > 0 ? add_query_arg('current', $current_index-1) : NULL;
	$next = $current_index == count($images)-1 ? NULL : add_query_arg('current', $current_index+1);

	?>

	<div class="pic"><img title="<?php echo esc_attr($current->alttext) ?>" alt="<?php echo esc_attr($current->alttext) ?>" src="<?php echo nextgen_esc_url($storage->get_image_url($current)); ?>" /></div>
	
	<ul class="ngg-gallery-list">
	
		<!-- PREV LINK -->	
		<?php if ($prev) : ?>
		<li class="ngg-prev">
			<a class="prev" style="font-size: 12px" href="<?php echo nextgen_esc_url($prev) ?>">&#9668;</a>
		</li>
		<?php endif; ?>
		
		<!-- Thumbnail list -->
		<?php foreach ( $images as $idx => $image ) : ?>
        <?php if ( $image->hidden ) continue; ?> 
        
        <?php $image_link = add_query_arg("current", $idx, $this->get_url())?>
		
		<li id="ngg-image-<?php echo esc_attr($image->pid) ?>" class="ngg-thumbnail-list <?php if ($image->pid == $current->pid) echo 'selected' ?>" >
			<a href="<?php echo nextgen_esc_url($image_link) ?>" title="<?php echo esc_attr($image->description) ?>" >
				<img title="<?php echo esc_attr($image->alttext) ?>" alt="<?php echo esc_attr($image->alttext) ?>" src="<?php echo nextgen_esc_url($storage->get_thumb_url($image)) ?>" <?php echo $image->size ?> />
			</a>
		</li> 

	 	<?php endforeach; ?>
	 	
	 	<!-- NEXT LINK -->
		<?php if ($next) : ?>
		<li class="ngg-next">
			<a class="next" style="font-size: 12px" href="<?php echo nextgen_esc_url($next) ?>"></a>
		</li>
		<?php endif; ?>
	 	
	</ul>

	<?php $this->end_element();?>

	<div class="ngg-clear"></div>
</div>
<?php $this->end_element(); ?>

HINT: You can use the following to see a list of defined variables available to use in the template:

var_dump(get_defined_vars());

Share this with other photographers

Close Menu