Masonry con NextGen Gallery
En la página de inicio de mi web, hay una lista de imágenes mostradas al estilo masonry, lo he conseguido gracias al plugin HugeIt wordpress gallery y la gestiono con el plugin NextGen Gallery, teniendo que hacer unos desarrollos para poder integrar ambos plugin.
El plugin HugeIt wordpress gallery es un plugin el cual te permite mostrar una galería de imágenes de varias formas, puedes ver en su web los 7 tipos de estilos diferentes, el problema es que tiene su propio gestor de galerías.
A mí me gusta mucho tener mis imágenes organizadas con el plugin NextGen Gallery, no me gusta tenerlas en la parte de medios de wordpress ya que engorrona el repositorio y así las tengo organizadas, además lo tengo sincronizado con LightRoom, por lo que cambios en las galerías lo hago directamente en LigthRoom y no en el backend de wordpress, así que he tenido que editar el plugin HugeIt para que pueda hacer uso de galerías de NextGen, habrá que modificar la BBDD, añadir la opción en el backend para que se pueda configurar y cambiar la forma de recuperar las imágenes cuando haya una galería de NextGen configurada.
Cambios en BBDD
En la tabla huge_itgallery_gallery es donde se almacena la información de las galerías, hay que añadir una columna llamada ngg_gallery del tipo bigint(20) para ello ejecutar ésta sentencia:
ALTER TABLE huge_itgallery_gallerys ADD ngg_gallery BIGINT(20) NOT NULL ;
Si vuestra bbdd tiene prefijo en la instalación de wordpress, habrá que ponerla, en mi caso tiene el prefijo “wp_” así que mi sentencia es
ALTER TABLE wp_huge_itgallery_gallerys ADD ngg_gallery BIGINT(20) NOT NULL;
Cambios en el backend
Ahora vamos a cambiar el backend para que se pueda seleccionar si en una galleria de HugeIt, queremos que se nutra de una galería de NextGen, esto se hace en el fichero /admin/gallery_view.php en la línea 642 añadiremos éste código:
<?php include_once( ABSPATH . 'wp-admin/includes/plugin.php' ); if ( is_plugin_active( 'nextgen-gallery/nggallery.php' ) ) { $NextGenGalleryList = getNextGenGalleryList(); ?> <li> <label for="ngg_gallery">NextGen Gallery</label> <select name="ngg_gallery" id="ngg_gallery"> <option <?php if($row->ngg_gallery == '-1'){ echo 'selected'; } ?> value="-1">No NextGen Gallery</option> <?php foreach($NextGenGalleryList as $keyNGGL=>$rowNGGL){ ?> <option <?php if($row->ngg_gallery == $rowNGGL->gid){ echo 'selected'; } ?> value="<?php echo $rowNGGL->gid; ?>"><?php echo $rowNGGL->name; ?></option> <?php } ?> </select> </li> <?php } ?>
Es necesario añadir el método getNextGenGalleryList, así que en el fichero /admin/gallery_func.php añadimos éste método, el lugar puedes ponerlo donde quieras, al principio o al final.
function getNextGenGalleryList(){ global $wpdb; $query="SELECT gid,name FROM ".$wpdb->prefix."ngg_gallery"; $glist=$wpdb->get_results($query); return $glist; }
Ahora si vamos al backend y agregamos una galería en HugeIt, nos aparece un desplegable debajo de Gallery name, en el que podremos escoger si no queremos una galería de NextGen con la opción “No NextGen Gallery” o escoger una galería de las ya creadas, en mi caso ya tengo creada la galería “galería-index” donde tengo las fotos que quiero en la portada.
Cambios en el frontend
Ahora queda cambiar la forma de recuperar las imágenes cuando una galería de HugeIt tiene configurado una de NextGen, para ello vamos al fichero /Front_end/gallery_front_end_func.php y el método showPublishedgallery_1 lo dejamos así:
function showPublishedgallery_1($id) { global $wpdb; include_once( ABSPATH . 'wp-admin/includes/plugin.php' ); if ( is_plugin_active( 'nextgen-gallery/nggallery.php' ) ) { $query=$wpdb->prepare("SELECT p.pid as 'id', p.alttext as name, hig.id as gallery_id, p.description, CONCAT(\"".get_home_url()."\",g.path,\"/\",p.filename) as image_url, '' as sl_url, 'image' as sl_type, 'on' as link_target, p.sortorder as ordering, 1 as published, null as published_in_sl_width FROM ".$wpdb->prefix."ngg_gallery g INNER JOIN ".$wpdb->prefix."ngg_pictures p ON g.gid = p.galleryid INNER JOIN ".$wpdb->prefix."huge_itgallery_gallerys hig ON hig.ngg_gallery=g.gid WHERE hig.id='%d' AND p.exclude=0 ORDER BY p.sortorder",$id); $images = $wpdb->get_results($query); if(count($images)==0){ $query=$wpdb->prepare("SELECT * FROM ".$wpdb->prefix."huge_itgallery_images where gallery_id = '%d' order by ordering ASC",$id); $images=$wpdb->get_results($query); } }else{ $query=$wpdb->prepare("SELECT * FROM ".$wpdb->prefix."huge_itgallery_images where gallery_id = '%d' order by ordering ASC",$id); $images=$wpdb->get_results($query); } $query=$wpdb->prepare("SELECT * FROM ".$wpdb->prefix."huge_itgallery_gallerys where id = '%d' order by id ASC",$id); $gallery=$wpdb->get_results($query); $paramssld = ''; return front_end_gallery($images, $paramssld, $gallery); }
Lo que hacemos, es intentar buscar fotos, asociando el parámetro nuevo a una galería de NextGen, si no lo encuentra va por el método tradicional.
Con esto, ya podremos configurar una galería de HugeIt que se nutra con fotos de NextGen.