Med sine næsten 11,5 millioner downloads (pr. 17/12/2014), skulle man næsten tro at NextGen gallery var vedligeholdt og optimeret til moderne standarder. Langt fra, desværre.

Når jeg udvikler temaer til WordPress, forsøger jeg altid så vidt muligt at gøre temaet responsivt. Derfor skar det mig også i hjertet da jeg opdagede hvor låst NextGen Gallerys styles var. Det er ikke meget kode der skal til for at gøre det meste responsivt dog, hvilket den kommende CSS vil vise.

/*
 * CSS Name: Responsive NextGen Styles
 * Description: NextGEN Gallery Responsive Stylesheet
 * Author: Late Night Productions / Squazz
 * Version: 1.1
 */

.ngg-galleryoverview {
   display: flex !important;
   flex-wrap: wrap;
}
.ngg-album-compact,
.ngg-gallery-thumbnail-box {
   width: 98%;
   padding:0 1% 5px 1% !important;
   margin: 0 !important;
}
.ngg-album-compactbox {
   line-height: 1;
}
.ngg-album-compactbox .Thumb,
.ngg-gallery-thumbnail img {
   width: 100%;
   height: auto;
   margin: 0 !important;
   padding: 0 !important;
}
.ngg-album-compact h4 .ngg-album-desc,
.ngg-gallery-thumbnail {
   height: auto !important;
   width: 100% !important;
}
.ngg-album-compact p {
   line-height: 1;
}
.slideshowlink {
 width: 100%;
}
/* iPhone / Droid – Landscape */
@media screen and (min-width: 480px) {
   .ngg-album-compact,
   .ngg-gallery-thumbnail-box {
      width: 48%;
   }
}
/* Small Tablets – 640px wide */
@media screen and (min-width: 640px) {
   .ngg-album-compact,
   .ngg-gallery-thumbnail-box {
      width: 31%;
   }
}

Husk at loade disse styles afhængigt af NextGens styles. Både fordi det er god practice, og fordi det er nødvendigt grundet den måde NextGen har skrevet deres styles fra start. Indsæt følgende kode i functions.php (og ret til så det passer til din opbygning af kode)

// NextGen gallery fix
function NextGen_styles_fix() {
   wp_enqueue_style( 'NextGen-Responsive', get_stylesheet_directory_uri() . '/styles/nggallery.css', array('nextgen_basic_thumbnails_style'), '1.1' );
}
add_action( 'wp_enqueue_scripts', 'NextGen_styles_fix' );

Der er dog nogle problemer med dette setup. Grundet at NextGen er så fastlåst i sine styles fra start af, har udvikleren også valgt at køre med meget små thumbnails. Med ovenstående styles strækker vi disse styles ret meget, og thumbnails vil komme til at se forfærdelige ud nu. Det er derfor vigtigt at vi sikrer os at vores thumbnails er store nok til worst-cases. I mit tilfælde var det 450px i bredden (Det er næsten 3x den størrelse NextGen bruger som standard).

Vi kan ændre de generelle indstillinger for thumbnails under “Gallery Settings”, hvor vi i hver af de faner vi bliver præsenteret for vælger “Override thumbnail settings” og indtaster de værdier der passer til vores tema.

Da NextGen Gallery er bygget op som den er, er det ikke nok at ændre den generelle thumbnail værdi for gamle albums. Denne værdi skal ændres for samtlige albums, hvilket kan være en del abums hvis man er en aktiv fotograf. Men det er arbejdet værd i det lange løb.