Next-Gen Gallery – Eigene Galerietemplates für verschiedene Galerien

Es kann hin und wieder vorkommen, dass man mit Hilfe des NextGen Gallery-Plugins verschiedene Galerien wie Fancybox oder Lightbox einbinden möchte. Dies kann durchaus schwierig werden, da das Plugin die Galerieeinstellungen standardmäßig Global auf die gesamte WordPress-Seite anwendet. Durch einige kleinere Konfigurationen kann man dies aber anpassen.

Im ersten Schritt müsst ihr euch ein sogenanntes Galerie-Template anlegen, welches im Plugin-Ordner von Next-Gen unter wp-content\plugins\nextgen-gallery\view abgespeichert wird, beispielsweise als gallery-fancy.php.

Mithilfe dieses Templates ist es euch dann möglich, nähere Konfigurationen für die Einbindung des Quellcodes vorzunehmen, der für die Galerie verwendet werden soll.

<?php
    /**

    @description Fancy template for Fancybox WordPress plugin
    Template Page for the gallery overview
    **/
    ?>
    <?php if (!defined ('ABSPATH')) die ('No direct access allowed'); ?>
    <?php if (!empty ($gallery)) : ?>
    <?php foreach ($images as $image) : ?>
<a  class="group"  rel="a"  href="<?php echo $image->imageURL ?>" title="<?php echo $image->description ?>" <?php echo $image->thumbcode ?>>
<img src="<?php echo $image->thumbnailURL ?>" alt="<?php echo $image->alttext ?>" title="<?php echo $image->description ?>" />
</a>
    <?php endforeach; ?>
    <?php endif; ?>

Im nächsten Step müsst ihr euch entscheiden, wie ihr die notwendigen Scripte in den Head-Bereich einbindet. Ich habe mich für verschiedene Page-Templates und eine entsprechende Abfrage entschieden. Den Beispielcode dazu seht ihr hier:

<?php
global $wp_query;
$template_name = get_post_meta( $wp_query->post->ID, '_wp_page_template', true );
if ($template_name == 'template-galerie.php')
       {
?>
	       <link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/galleriffic-1.css" type="text/css" />
	       <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery-1.3.2.js"></script>
	       <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.galleriffic.js"></script>
	       <script type="text/javascript">
		     $('div.navigation').css({'width' : '300px', 'float' : 'left'});
		     $('div.content').css('display', 'block');
		     $(document).ready(function() {
		     $('#thumbs').galleriffic({
		            imageContainerSel:      '#slideshow',
			    controlsContainerSel:   '#controls'
					     });
			       });
	       </script>
<?php
       }
else
       {
  ?>
	      <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/css/jquery.fancybox.css" media="screen" />
	      <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery-1.3.2.min.js"></script>
	      <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.easing.1.3.js"></script>
	      <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.fancybox-1.2.1.pack.js"></script>
	      <script type="text/javascript">
		 $(document).ready(function() { $("a#single_image").fancybox(); $("a#inline").fancybox({
		 'hideOnContentClick': true }); $("a.group").fancybox({  'frameWidth': 510, 'frameHeight': 310, 'overlayShow': true }); });
	      </script>
<?php
       }
?>

Nun runden wir diese Code-Suppe noch ab, in dem wir in die jeweilige Template-Datei den Shortcode einbinden, der wie folgt aussieht:

<?php echo do_shortcode('[nggallery id=1 template=fancy]    '); ?>

Der im Shortcode angegebene Templatename entspricht dem zweiten Teil des Dateinamens der NextGen-Template-Datei.