|     |   06 69 54 64 66   |   09 72 54 69 88   |   du lundi au vendredi de 9h à 18h

Blueimp Gallery dans WordPress (sans plugin)

blueimp Gallery en shortcode dans le function.php de votre thème Wordpress

Dernière mise à jour juillet 23rd, 2016 à 16:06

Pour commencer, je vais reprendre le principe que j'explique dans mon article précédent sur comment customiser l'affichage des galeries dans WordPress, c'est à dire, que je vais créer une fonction qui utilisera les fichiers associés à un post pour les afficher sous forme de galerie, mais pas avec le shortcode par défaut "gallery" de WordPress, mais avec un shortcode maison qui affichera la galerie d'images avec blueimp Gallery (la meilleure galerie du moment à mon goût : légère, ultra-compatible, tactile ready). Elle a quelques défauts, notamment pour les instances multiples, vu qu'elle fonctionne par #id, mais on peut overrider tout ça assez facilement en chargeant un peu la pile... C'est pas bien, mais y'a pas mieux pour le moment, et ça ne surcharge légèrement que pour les pages d'archives du type catégorie, archive, ou mot-clé.

J'ai utilisé blueimp Gallery sur le site de la mairie de Saint-Abit. Sur la homepage et sur la page patrimoine où l'on retrouve de multiples instances de blueimp qui fonctionnent toutes en parallèle sans aucun souci.

Les instances multiples sur une même page, en raison des #id (blueimp utilise document.getElementById() pour identifier la galerie), posent un problème lorsque l'on se trouve dans le loop, car une même page ne supportent pas plusieurs #id identiques, ce qui paraît logique. Donc on initie chaque gallery avec son propre js d'instanciation.

On ajoute le shortcode

 add_shortcode( 'galerie', 'slider_galerie_shortcode' );

On instancie la fonction et on démarre l'output

 

function slider_galerie_shortcode( $attr ) {
 static $instance = 0;
 $instance++;
 $mypost_id = get_the_ID(); // $mypost_id va récupérer l'id du post et permettre dans une page catégorie par exemple d'intancier chaque -- <script> document.getElementById("magagalerie-'.$mypost_id.'") -- afin de générer une script d'init pour blueimp avec un id spécifique. C'est sûr, ça charge la pile, c'est pour ça qu'il vaut mieux utiliser une pagination serrée de WordPress avec 4 ou 6 articles par page d'archives par exemple...
 // Tant que blueimp fonctionne par #ID, on ne peut pas faire autrement, en tout cas j'ai pas trouvé la parade...

// On définit l'orderby de l'affichage des images attachées
 if ( isset( $attr['orderby'] ) ) { $attr['orderby'] = sanitize_sql_orderby( $attr['orderby'] );if ( !$attr['orderby'] ) unset( $attr['orderby'] );}
 extract( shortcode_atts( array( 'order' => 'ASC','orderby' => 'menu_order ID','id' => get_the_ID(),'size' => 'medium','itemtag' => 'li','include' => '','exclude' => get_post_thumbnail_id()
 ), $attr ) );$id = (int) $id;$orderby = ( 'RAND' == $order ) ? 'none' : $orderby;
 if ( ! empty( $include ) ) {$include = preg_replace( '/[^0-9,]+/', '', $include );$_attachments = get_posts( array( 'include' => $include, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image','order' => $order, 'orderby' => $orderby ) );
 // On va chercher toutes les images attachées
 $attachments = array(); foreach ( $_attachments as $key => $val ) { $attachments[$val->ID] = $_attachments[$key];}
 } elseif ( ! empty( $exclude ) ) { $exclude = preg_replace( '/[^0-9,]+/', '', $exclude );$attachments = get_children( array( 'post_parent' => $id, 'exclude' => $exclude, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image','order' => $order, 'orderby' => $orderby ) );
 } else {$attachments = get_children( array( 'post_parent' => $id, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby ) );
 }
 // On prépare le loop des images attachées
 if ( empty( $attachments ) )return '';
 if ( is_feed() ) { $output = "\n"; foreach ( $attachments as $att_id => $attachment ) $output .= wp_get_attachment_link( $att_id, 'thumbnail', true ) . "\n"; return $output; }
 $float = is_rtl() ? 'right' : 'left';
 //$selector = "gallery-{$instance}";
 $i = 1;

// on démarre l'output (affichage), on est pas encore dans la boucle du loop, donc ici, on prépare l'espace de la gallerie.
 $output = '

<!-- The Gallery as lightbox dialog, should be a child element of the document body -->
 <div id="blueimp-gallery-'.$mypost_id.'" class="myblueimp-gallery blueimp-gallery blueimp-gallery-controls">
 <div class="slides"></div>
 <h3 class="title"></h3>
 <a class="prev">‹</a>
 <a class="next">›</a>
 <a class="close">×</a>
 <a class="play-pause"></a>
 <ol class="indicator"></ol>
 </div>
 <p>&nbsp;</p>
 <div id="magagalerie-'.$mypost_id.'" data-columns>';

 

On crée le loop pour chaque image attachée

 

foreach ( $attachments as $id => $attachment ) {
 $full_image_src = wp_get_attachment_image_src( $id, 'full' );
 $image_src = wp_get_attachment_image_src( $id, 'medium');
 $image_mini = wp_get_attachment_image_src( $id, 'thumbnail' );
 $alt = get_post_meta($attachment->ID, '_wp_attachment_image_alt', true);
 $image_title = $attachment->post_title;
 $image_desc = $attachment->post_content;
 $metadata = wp_get_attachment_metadata($id);
 $mwidth = $metadata['width'];
 $mheight = $metadata['height'];
 $post_id = get_the_ID();

$output .= '<a href="' . esc_url( $full_image_src[0] ) . '" title="'.$image_title.'" data-gallery="#blueimp-gallery-magagalerie'.$mypost_id.'">
 <img src="' . esc_url( $image_src[0] ) . '" alt="Photo : '.$alt.'" />
 </a>';

$i++;

}

 

 

On ferme l'output et la fonction

 

$output .= '</div>
 <!-- // end blueimp gallery -->
 <div class="clearfix"></div>
 <script>
 document.getElementById("magagalerie-'.$mypost_id.'").onclick = function (event) {event = event || window.event;var target = event.target || event.srcElement,link = target.src ? target.parentNode : target,options = {index: link, event: event, container: "#blueimp-gallery-'.$mypost_id.'"},links = this.getElementsByTagName("a");blueimp.Gallery(links, options);};</script>

<style>@media screen and (max-width: 450px) {#magagalerie-'.$mypost_id.'[data-columns]::before {content: "1 .column";}}@media screen and (min-width: 451px) and (max-width: 700px) { #magagalerie-'.$mypost_id.'[data-columns]::before {content: "2 .column.size-1of2";}}@media screen and (min-width: 701px) and (max-width: 850px) {#magagalerie-'.$mypost_id.'[data-columns]::before {content: "3 .column.size-1of3";}}@media screen and (min-width: 851px) {#magagalerie-'.$mypost_id.'[data-columns]::before {content: "4 .column.size-1of4";}}</style>';

return $output;
 }

 

Voilà. Tout cela bien entendu dans le functions.php de votre thème.

Le php complet à insérer dans le functions.php

 

///// Shortcode pour utiliser blueimp Gallery avec les galeries natives de wordpress //////
 ///// par patromevo.com //////
 ///// Dans l'éditeur de wordpress, il vous suffit d'attacher simplement des images sans les insérer, et d'écrire le shortcode [galerie] /////

add_shortcode( 'galerie', 'slider_galerie_shortcode' );

function slider_galerie_shortcode( $attr ) {
 static $instance = 0;
 $instance++;
 $mypost_id = get_the_ID();
 // $mypost_id va récupérer l'id du post et permettre dans une page catégorie par exemple d'intancier chaque -- <script> document.getElementById("magagalerie-'.$mypost_id.'") -- afin de générer une script d'init pour blueimp avec un id spécifique. C'est sûr, ça charge la pile, c'est pour ça qu'il vaut mieux utiliser une pagination serrée de WordPress avec 4 ou 6 articles par page d'archives par exemple...
 // Tant que blueimp fonctionne par #ID, on ne peut pas faire autrement, en tout cas j'ai pas trouvé la parade...

// On définit l'orderby de l'affichage des images attachées
 if ( isset( $attr['orderby'] ) ) { $attr['orderby'] = sanitize_sql_orderby( $attr['orderby'] );if ( !$attr['orderby'] ) unset( $attr['orderby'] );}
 extract( shortcode_atts( array( 'order' => 'ASC','orderby' => 'menu_order ID','id' => get_the_ID(),'size' => 'medium','itemtag' => 'li','include' => '','exclude' => get_post_thumbnail_id()
 ), $attr ) );$id = (int) $id;$orderby = ( 'RAND' == $order ) ? 'none' : $orderby;
 if ( ! empty( $include ) ) {$include = preg_replace( '/[^0-9,]+/', '', $include );$_attachments = get_posts( array( 'include' => $include, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image','order' => $order, 'orderby' => $orderby ) );
 // On va chercher toutes les images attachées
 $attachments = array(); foreach ( $_attachments as $key => $val ) { $attachments[$val->ID] = $_attachments[$key];}
 } elseif ( ! empty( $exclude ) ) { $exclude = preg_replace( '/[^0-9,]+/', '', $exclude );$attachments = get_children( array( 'post_parent' => $id, 'exclude' => $exclude, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image','order' => $order, 'orderby' => $orderby ) );
 } else {$attachments = get_children( array( 'post_parent' => $id, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby ) );
 }
 // On prépare le loop des images attachées
 if ( empty( $attachments ) )return '';
 if ( is_feed() ) { $output = "\n"; foreach ( $attachments as $att_id => $attachment ) $output .= wp_get_attachment_link( $att_id, 'thumbnail', true ) . "\n"; return $output; }
 $float = is_rtl() ? 'right' : 'left';
 //$selector = "gallery-{$instance}";
 $i = 1;

// on démarre l'output (affichage), on est pas encore dans la boucle du loop, donc ici, on prépare l'espace de la gallerie.
 $output = '

<!-- The Gallery as lightbox dialog, should be a child element of the document body -->
 <div id="blueimp-gallery-'.$mypost_id.'" class="myblueimp-gallery blueimp-gallery blueimp-gallery-controls">
 <div class="slides"></div>
 <h3 class="title"></h3>
 <a class="prev">‹</a>
 <a class="next">›</a>
 <a class="close">×</a>
 <a class="play-pause"></a>
 <ol class="indicator"></ol>
 </div>
 <p>&nbsp;</p>
 <div id="magagalerie-'.$mypost_id.'" data-columns>';

foreach ( $attachments as $id => $attachment ) {
 $full_image_src = wp_get_attachment_image_src( $id, 'full' );
 $image_src = wp_get_attachment_image_src( $id, 'medium');
 $image_mini = wp_get_attachment_image_src( $id, 'thumbnail' );
 $alt = get_post_meta($attachment->ID, '_wp_attachment_image_alt', true);
 $image_title = $attachment->post_title;
 $image_desc = $attachment->post_content;
 $metadata = wp_get_attachment_metadata($id);
 $mwidth = $metadata['width'];
 $mheight = $metadata['height'];
 $post_id = get_the_ID();

$output .= '
 <a href="' . esc_url( $full_image_src[0] ) . '" title="'.$image_title.'" data-gallery="#blueimp-gallery-magagalerie'.$mypost_id.'">
 <img src="' . esc_url( $image_src[0] ) . '" alt="Photo : '.$alt.'" />
 </a>
 ';

$i++;

}

$output .= '</div>
 <!-- // end blueimp gallery -->
 <div class="clearfix"></div>
 <script>
 document.getElementById("magagalerie-'.$mypost_id.'").onclick = function (event) {event = event || window.event;var target = event.target || event.srcElement,link = target.src ? target.parentNode : target,options = {index: link, event: event, container: "#blueimp-gallery-'.$mypost_id.'"},links = this.getElementsByTagName("a");blueimp.Gallery(links, options);};</script>
 <style>@media screen and (max-width: 450px) {#magagalerie-'.$mypost_id.'[data-columns]::before {content: "1 .column";}}@media screen and (min-width: 451px) and (max-width: 700px) { #magagalerie-'.$mypost_id.'[data-columns]::before {content: "2 .column.size-1of2";}}@media screen and (min-width: 701px) and (max-width: 850px) {#magagalerie-'.$mypost_id.'[data-columns]::before {content: "3 .column.size-1of3";}}@media screen and (min-width: 851px) {#magagalerie-'.$mypost_id.'[data-columns]::before {content: "4 .column.size-1of4";}}</style>';

return $output;
 }

 

Pour toute question sur la customisation, laissez un commentaire, je répondrai en substance.

 

 Blog     lundi 13 avril 2015     Patrice Romevo

 

Répondre à Anonyme Annuler la réponse

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *