Skip to content

NextGen carrousel template op maat

In deze WordPress handleiding laten we zien hoe je een NextGen Gallery carrousel sjabloon kan creëren zoals jij deze wil. Verder zullen we deze plaatsen op een vaste plek binnen je thema in plaats van de standaard optie om de shortcode aan je post toe te voegen. NextGen biedt verscheidene templates aan, maar voor je eigen thema heb je natuurlijk je eigen weergave op maat nodig.

Basis template kiezen

De handigste manier om je eigen sjabloon te maken, is er een te baseren op een bestaande gebouwd door NextGen. Aangezien wij een carrousel of draaimolensjabloon willen zodat de bezoeker een grote foto te zien krijgt plus thumbnails eronder plus een balk waarin de titel van de foto en de beschrijving komt te staan zullen we onze template baseren op de bestaande carousel template. Deze carouselweergave werkt op basis van pure PHP en heeft als enige nadeel dat iedere foto opnieuw geladen moet worden. Verder kunnen de foto’s niet automatisch geroteerd worden. Er wordt gewerkt aan een AJAX oplossing om de foto’s van tevoren te laden of te preloaden.

NB De reden waarom wij graag met NextGen werken is de mogelijkheid om galerieën te maken los van posts en de eenvoud waarmee galerieën en albums weergegeven kunnen worden op pagina’s en binnen sjabloonbestanden.

Eigen template aanmaken

Eerst maken we een kopie van de bestaande carouseltemplate. Deze hernoemen we tot gallery-naam.php. Nam vervang je door een toepasselijke naam. Vervolgens plaatsen we deze in een map waarin de NextGen plugin standaard kijkt naar sjablonen op maat. Dit is de map nggallery in het thema dat je gebruikt.

Template bewerken

We willen de volgende zaken in de template toegevoegd hebben:

  • eigen pijlen om door de thumbnails heen te bladeren
  • balk  bovenop aan de onderkant van grote afbeelding
  • Titel van de foto in de balk
  • Beschrijving van de afbeelding in de balk

Pijlen

Pijlen kunnen in Photoshop worden gemaakt en deze kunnen de bestaande pijlen op eenvoudige wijze vervangen door de afbeeldingen te laden op de plek waar de pijlen nu op basis van html tags worden getoond. Aangezien we deze slider binnen een kindthema wordt geladen gebruiken we de volgende code om de afbeelding voor de pijl naar voorgaande thumbnails te laden:

<!-- PREV LINK -->
 <?php if ($prev) : ?>
 <li>
 <a href="<?php echo $prev ?>"><img src="<?php echo CHILDTEMPLATEIMAGES . '/page-slider-previous.jpg' ; ?>"></a>
 </li>
 <?php endif; ?>

De CHILDTEMPLATEIMAGES constante is een constante die door ons aan het thema is toegevoegd om afbeeldingen makkelijker te laden:


define('CHILDTEMPLATEIMAGES', CHILDTEMPLATEURL.'/images' );

define('CHILDTEMPLATEPATH', dirname(__FILE__ ) );   //.'/parenttheme-child' );

Balk

De balk onderaan op de hoofdafbeeldingen kan met HTML en CSS worden gecreëerd. Ik ga hier niet in op de specifieke details, maar zal zo de PHP code weergeven die hiervoor gebruikt kan worden.

Titel

De titel van de foto kan eenvoudig met deze code geladen worden:

<?php echo $current->alttext; ?>

Beschrijving

En dan het laatste element is de beschrijving van de afbeelding. Voor deze heb je deze code nodig:

<?php echo $current->description; ?>

NextGen Gallery Template Code

De code die je uiteindelijk hebt om de carousel te laden met alle eerdere aangegeven elementen is:


if (!defined ('ABSPATH')) die ('No direct access allowed'); ?><?php if (!empty ($gallery)) : ?>

<div>
<div>
<img title="<?php echo $current->alttext ?>" alt="<?php echo $current->alttext ?>" src="<?php echo $current->url; ?>" />
<div id="resort-info"><div id="pic-title"><?php echo $current->alttext; ?></div><div id="pic-caption"><?php echo $current->description; ?>
</div>
</div>
</div>

 <ul>

 <!-- PREV LINK -->
 <?php if ($prev) : ?>
 <li>
 <a href="<?php echo $prev ?>"><img src="<?php echo CHILDTEMPLATEIMAGES . '/page-slider-previous.jpg' ; ?>"></a>
 </li>
 <?php endif; ?>

 <!-- Thumbnail list -->
 <?php foreach ( $images as $image ) : ?>
 <?php if ( $image->hidden ) continue; ?>

 <li id="ngg-image-<?php echo $image->pid ?>" >
 <a href="<?php echo $image->pidlink ?>" title="<?php echo $image->description ?>" >
 <img title="<?php echo $image->alttext ?>" alt="<?php echo $image->alttext ?>" src="<?php echo $image->thumbnailURL ?>" <?php echo $image->size ?> />
 </a>
 </li>

 <?php endforeach; ?>

 <!-- NEXT LINK -->
 <?php if ($next) : ?>
 <li>
 <a href="<?php echo $next ?>"><img src="<?php echo CHILDTEMPLATEIMAGES . '/page-slider-next.jpg' ; ?>"></a>
 </li>
 <?php endif; ?>

 </ul>

</div>

<?php endif; ?>

Stijlen galerie

De galeriestijl kun je baseren op de stylesheet die meekwam met de carouseltemplate. Aangezien deze toch altijd anders zal zijn aangezien iedereen weer een andere template gebruikt is er geen stylesheet aan deze tutorial toegevoegd. De stijl kun je eenvoudigweg aan je thema’s stylesheet.css toevoegen of aan de nggallery.css in de plugin. Het eerste is aan te raden om overschrijven van stijl na update te voorkomen.

Galerie laden op plek naar keuze

Nadat we on eigen sjabloon hebben gemaakt zullen we code moeten toevoegen aan de themabestanden waar we de galerie geladen willen hebben. In ons geval zetten we de code in single.php om de galerie op een plek te laden waar onze posts of artikelen verschijnen. De code die we gebruiken hiervoor is de volgende:


/* NG Gallery Custom Field Rotating Images  */
 $gallery = get_post_meta($post-&gt;ID, 'Gallery ID Number', true);
 $gal = $gallery;
 if( !empty($gal) )
 {
 $nggtemplate = &quot;template=naam images=5&quot;;
 $gal = apply_filters('the_content', '

no images were found

if( !empty($gal) ) {}

Filteren content

Een ander interessant stuk code is de WordPress apply_filter functie:

Filters are the hooks that WordPress launches to modify text of various types before adding it to the database or sending it to the browser screen. Your plugin can specify that one or more of its PHP functions is executed to modify specific types of text at these times, using the Filter API.

Deze functie is zeer handig voor de manipulatie van inhoud. Hiermee kan namelijk de weergave van content gefilterd worden:

apply_filters(‘the_content’, ‘[nggallery id=’.$gal.’ ‘ . $nggtemplate. ‘]’ )
[/php]

En wij zorgen er hiermee voor dat de shortcode van NextGen waarmee galerieën kunnen worden weergegeven in posts worden omgezet in de code voor de daadwerkelijke galeriecode.

Templatenaam en aantal foto’s

Verder is de code waarmee de templatenaam wordt gekozen en het aantal foto’s wordt bepaald van groot belang:

[php]
$nggtemplate = "template=naam images=5";
[/php]

template-naam moet aangepast worden. Het woord naam moet de naam zijn van het woord achter de “-” in het bestandsnaam gallery-naam.php.

Custom field toevoegen aan post

Nadat je in de NextGen Gallery plugin afdeling een galerie hebt aangemaakt kun je deze aan een post als custom field  toevoegen om de galerie in kwestie op die postpagina weer te geven. Custom field is “Extra veld” in de Nederlandse WordPress versie. Het toevoegen van de galerie aan de post in kwestie doe je door een meta key (=naam) en value (=waarde) toe te voegen en op te slaan in een custom field (veld op maat of extra veld) onder de post’s wysiwyg editor. Als naam of key vul je “Gallery ID Number” in en als waarde of value het galerie ID nummer:

Extra veld of Custom Field

De uiteindelijke NextGen Carrousel op maat

Als je alles goed hebt gedaan, de zaken gestijld hebt, het extra veld hebt toegevoegd aan je artikel – lees post – zul je zoiets dergelijks zien:

Bronnen

http://nextgen-gallery.com/templates/carousel/
Uitleg over de standaard NextGen Gallery carouseltemplate

http://wordpress.org/extend/plugins/nextgen-gallery/
NextGen gallery plugin

Gepubliceerd door Doede op maandag 25 oktober 2010
5 Reacties
  1. Beste Jasper,

    Bedankt voor jouw procedure om aanpassingen te maken aan de Nextgen Carousel. Ik heb een klein probleempje met het formaat van de grote foto. Deze is bij mij altijd heel groot (vult mijn hele center kolom. Heb jij enig idee hoe ik dit kan aanpassen?

    Groet,

    Bob

    • Beste Bob,

      Blij te horen dat je goed gebruik kan maken van deze galeriehandleiding. Het formaat van de grote foto en thumbnails zijn in de NextGen Gallery administratie te bepalen in de WordPress dashboard. Daaruit laadt NextGen het formaat tenzij je het apart met een script bepaald hebt.

  2. Beste Jasper,

    dat ziet er heel bruikbaar uit en ik wil er graag mee aan de slag. Nu is mijn enige probleem dat ik niet weet hoe ik aan de originele carousel-template van Nextgen kom? Ik heb wel de Nextgen-plugin geinstalleerd, maar kan geen andere templates vinden in de nextgen-gallery-map dan de gewone standaard en al het zoeken dat ik doe levert wel de informatie OVER de template op, maar niet de template zelf.

    Kun je me helpen vinden?

    Hartelijke groeten,

    Joke

    • Beste Joke,

      De carousel template die als basis wordt gebruikt vind je in wp-content/plugins/nextgen-gallery/view/gallery-carousel.php

  3. Aagje permalink

    Hallo Jasper,

    handleiding lijkt me erg duidelijk, maar voordat ik aan de slag ga wil ik eerst weten hoe ik de media link uit kan zetten. Ik wil namelijk niet dat als ik op de carrousel klik op mijn web pagina, een zwart vlak te zien krijg met hierin het media bestand.

    graag hoor ik van je
    mvg Aagje

Laat een reactie achter

NB: XHTML is toegstaan. Je email adres wordt niet gepubliceerd.

Abonneer je op de reacties op dit artikel via RSS

*