Galerie WP et Fancybox

Compatibilité

L'utilisation par FancyBox d'une galerie créée par WordPress est tout à fait possible mais demande quelques aménagements pour devenir compatible. Juste un peu de php et quelques paramétrages de la galerie suffiront pour obtenir un résultat parfait.

Au sommaire de ce post: les adaptations nécessaires pour rendre FancyBox compatible avec une galerie WordPress.

Exemple

Galerie WordPress parfaitement compatible avec Fancybox après quelques modifications.

<!-- Affichage d'une galerie WordPress-->
<!-- Le shortcode Wordpress n'est en rien modifié -->

[gallery link="file" columns="5" size="new-size" ids="5300,5301,5302,5303,5304"]

Analyse

Ci-dessous, le code HTML natif généré par WordPress pour sa galerie:

<div class="gallery galleryid-4633 gallery-columns-5 gallery-size-new-size" id="gallery-1">
   <dl class="gallery-item">
                        <dt class="gallery-icon landscape">
                                <a href="http://akhenaton/wpdaletale/wp-content/uploads/2015/03/picture1.jpg" ">
                                     <img width="120" height="90" aria-describedby="gallery-1-5300" alt="Alpaga" class="attachment-new-size" src="http://akhenaton/wpdaletale/wp-content/uploads/2015/03/picture1-120x90.jpg">
                                </a>
                        </dt>
                        <dd id="gallery-1-5300" class="wp-caption-text gallery-caption">Alpaga</dd>
        </dl>
        <dl class="gallery-item">
                        <dt class="gallery-icon landscape">
                                <a href="http://akhenaton/wpdaletale/wp-content/uploads/2015/03/picture2.jpg">
                                   <img width="120" height="90" aria-describedby="gallery-1-5301" alt="Ancolie" class="attachment-new-size" src="http://akhenaton/wpdaletale/wp-content/uploads/2015/03/picture2-120x90.jpg">
                                </a>
                        </dt>
                        <dd id="gallery-1-5301" class="wp-caption-text gallery-caption">Ancolie</dd>
        </dl>
        <dl class="gallery-item">
                        <dt class="gallery-icon landscape">
                                <a href="http://akhenaton/wpdaletale/wp-content/uploads/2015/03/picture3.jpg" >
                                  <img width="120" height="90" aria-describedby="gallery-1-5302" alt="Mouche Asilide" class="attachment-new-size" src="http://akhenaton/wpdaletale/wp-content/uploads/2015/03/picture3-120x90.jpg">
                                </a>
                        </dt>
                        <dd id="gallery-1-5302" class="wp-caption-text gallery-caption">Mouche Asilide</dd>
        </dl>
        <dl class="gallery-item">
                        <dt class="gallery-icon landscape">
                                <a href="http://akhenaton/wpdaletale/wp-content/uploads/2015/03/picture12.jpg" >
                                  <img width="120" height="90" aria-describedby="gallery-1-5303" alt="Epeire" class="attachment-new-size" src="http://akhenaton/wpdaletale/wp-content/uploads/2015/03/picture12-120x90.jpg">
                          </a>
                        </dt>
                        <dd id="gallery-1-5303" class="wp-caption-text gallery-caption">Epeire</dd>
        </dl>
        <dl class="gallery-item">
                        <dt class="gallery-icon landscape">
                                <a href="http://akhenaton/wpdaletale/wp-content/uploads/2015/03/picture26.jpg" data-fancybox-group="wp-gallery-1" class="fancybox" title="Rhaphigaster"><img width="120" height="90" aria-describedby="gallery-1-5304" alt="Rhaphigaster" class="attachment-new-size" src="http://akhenaton/wpdaletale/wp-content/uploads/2015/03/picture26-120x90.jpg"></a>
                        </dt>
                        <dd id="gallery-1-5304" class="wp-caption-text gallery-caption">Rhaphigaster</dd>
        </dl>
        <br style="clear: both">
</div>
 

Problèmes: le code HTML généré par WordPress et appelé par le shortcode pour afficher la galerie est incomplet pour FancyBox: voir ici . Le code ne contient que l'attribut href, il manque:

  • title: le titre de l'image est absent
  • data-fancy-group: aucun attribut data-*
  • Fancybox: le lien ne possède aucune classe.
  • Index de galerie:nécessaire lorsqu'il y a plusieurs galeries WordPress sur la même page.

C'est la fonction wp_get_attachment_link de WordPress qui définit les attributs affichés pour une image dans une galerie: or cette fonction ne prévoit pour le lien attachment_link ni class, ni titre, encore moins de data-*. En cherchant ici, on réalise que la mission n'est pas impossible.

Miracle de la fonction Add_filter

En parcourant le code WordPress, on découvre à maintes reprises la présence de fonctions apply_filters. Ces fonctions assurent toute la souplesse et la flexibilité de WordPress puisqu'on va pouvoir, en leur appliquant un add_filter, modifier, adapter ou améliorer le résultat obtenu. Dans le cas d'une galerie, on va donc utiliser "un filtre" pour en modifier l'affichage et récupérer certains paramètres indispensables pour FancyBox.

Pour comprendre le fonctionnement des filtres, quelques posts intéressants: codemarket.wordpress.com, boiteaweb, naxialis, en plus du codex.

Si l'on étudie le code de la fonction WordPress wp_get_attachment_link() (fichier post-template.php de wp-includes, WordPress 4.1.1), on trouve en ligne 1509 un apply_filters que l'on va pouvoir modifier à l'aide d'un add_filter, afin de compléter l'affichage natif.

Code php du filtre à ajouter dans le fichier function.php du thème

function add_infos_into_link($link, $id = null, $size = null, $permalink = null, $icon = null, $text = null)
{                                          
   $id = intval( $id );          
   $_post = get_post( $id ); //id image  
   $post_title = esc_attr( $_post->post_title ); // titre de l'image
   
   $index = array();
   $index[0] = '0'; //par défaut l'index est nul  
   $pos = strpos($link,'aria-describedby'); // l'attribut 'aria-describedby' existe-t-il?
   if($pos == true) { // on extrait la valeur de l'index              
         $index = (explode('-',explode('gallery-', $link, 2)[1],2));
   }            
   return str_replace('<a href', '<a title="'. $post_title .'" class="fancybox" data-fancybox-group="wp-gallery-'. $index[0]. ' " href', $link);}  
// on a remplacé '<a href' par
// '<a title="'. $post_title .'" class="fancybox" data-fancybox-group="wp-gallery-'. $index[0]. ' " href'

add_filter('wp_get_attachment_link', 'add_infos_into_link', 10, 6);
//10 = priorité du filtre
// 6 = nbr arguments

Paramétrages obligatoires lors de la création de la Galerie WordPress

Autres Contraintes: Appliquer des réglages bien spécifiques lors de la création de la Galerie WordPress.

settings

Dans les réglages du panel media, il faut impérativement lier la miniature au fichier media, c'est-à-dire à l’image native, qui apparaitra ainsi dans FancyBox. Le nombre de colonnes dépend bien sûr de votre design. Quant au format des vignettes, il s'agit ici d'un format personnalisé, celui de WordPress ne me convenant pas.

Dans les réglages appliquées aux images de la galerie, on trouve:

  • Le titre: ce sera celui de l'image grand format affichée dans FancyBox
  • La légende: il faudra impérativement la remplir, cette donnée déclenchant l'affichage de l'attribut aria-describedby contenant l'index dont la valeur sera utilisée pour différencier les différentes galeries WordPress présentes sur la même page.
  • Inconvénient, la légende apparait sous la vignette. Si cela est un problème, la solution la plus simple sera de créer une classe CSS spécifique en supprimant l'affichage. Attention, cela est définitif!
    /* galerie WP Fancybox: supprime affichage titre thumb*/
    .gallery dd.wp-caption-text.gallery-caption {
        display:none;
    }
  • Le texte alternatif alt est utilisé en tant que tel et ne modifiera pas l'affichage
settings

Résultat

Seconde Galerie:

Le code HTML devient:

<div id="gallery-2" class="gallery galleryid-5532 gallery-columns-5 gallery-size-new-size">
  <dl class="gallery-item">
      <dt class="gallery-icon landscape">
          <a class="fancybox" href="http://akhenaton/wpdaletale/wp-content/uploads/2015/03/picture18.jpg" data-fancybox-group="wp-gallery-2 " title="Hélianthème">
            <img class="attachment-new-size" width="120" height="90" aria-describedby="gallery-2-5355" alt="Hélianthème" src="http://akhenaton/wpdaletale/wp-content/uploads/2015/03/picture18-120x90.jpg">
          </a>
      </dt>
      <dd id="gallery-2-5355" class="wp-caption-text gallery-caption"> Hélianthème </dd>
  </dl>
<dl class="gallery-item">
    <dt class="gallery-icon landscape">
        <a class="fancybox" href="http://akhenaton/wpdaletale/wp-content/uploads/2015/03/picture22.jpg" data-fancybox-group="wp-gallery-2 " title="Millepertuis">
          <img class="attachment-new-size" width="120" height="90" aria-describedby="gallery-2-5352" alt="Millepertuis" src="http://akhenaton/wpdaletale/wp-content/uploads/2015/03/picture22-120x90.jpg">
        </a>
    </dt>
    <dd id="gallery-2-5352" class="wp-caption-text gallery-caption"> Millepertuis </dd>
  </dl>
  <dl class="gallery-item">
    <dt class="gallery-icon landscape">
        <a class="fancybox" href="http://akhenaton/wpdaletale/wp-content/uploads/2015/03/picture25.jpg" data-fancybox-group="wp-gallery-2 " title="Renoncule">
          <img class="attachment-new-size" width="120" height="90" aria-describedby="gallery-2-5353" alt="Renoncule" src="http://akhenaton/wpdaletale/wp-content/uploads/2015/03/picture25-120x90.jpg">
        </a>
    </dt>
    <dd id="gallery-2-5353" class="wp-caption-text gallery-caption"> Renoncule </dd>
  </dl>
  <dl class="gallery-item">
    <dt class="gallery-icon landscape">
      <a class="fancybox" href="http://akhenaton/wpdaletale/wp-content/uploads/2015/03/picture21.jpg" data-fancybox-group="wp-gallery-2 " title="Abeille noire sur Aster">
        <img class="attachment-new-size" width="120" height="90" aria-describedby="gallery-2-5351" alt="Abeille noire sur Aster" src="http://akhenaton/wpdaletale/wp-content/uploads/2015/03/picture21-120x90.jpg">
      </a>
    </dt>
    <dd id="gallery-2-5351" class="wp-caption-text gallery-caption"> Abeille noire </dd>
  </dl>
  <dl class="gallery-item">
      <dt class="gallery-icon landscape">
        <a class="fancybox" href="http://akhenaton/wpdaletale/wp-content/uploads/2015/03/picture291.jpg" data-fancybox-group="wp-gallery-2 " title="Manucure">
          <img class="attachment-new-size" width="120" height="90" aria-describedby="gallery-2-5354" alt="Manucure" src="http://akhenaton/wpdaletale/wp-content/uploads/2015/03/picture291-120x90.jpg">
        </a>
      </dt>
      <dd id="gallery-2-5354" class="wp-caption-text gallery-caption"> Manucure </dd>
  </dl>
<br style="clear: both">
</div>

Cela fonctionne: les images de la galerie WordPress deviennent compatibles avec FancyBox où elles s'affichent avec leur titre. Les liens ont une class fancybox et en commun un attribut data-fancybox-group, ce qui permet aux images d'être reconnues comme appartenant à une même galerie par Fancybox et affichées en tant que telles. Pour leur attribut data-fancybox-group la valeur choisie ici est wp-gallery afin de différencier les images WordPress de celles appartenant aux galeries non WordPress, dont la data-fancybox-group a pour valeur gallery. Enfin, l'index WordPress de la galerie est ajouté grâce au filtre qui va extraire sa valeur de l'attribut aria-describedby ce qui permettra à Fancybox de différencier les différentes galeries WordPress, si elles existent sur une même page.

Troisième Galerie:

Ainsi, les différentes galeries WordPress présentes sur la même page sont bien indépendantes les unes des autres.

Ce post est le dernier du triptyque consacré à l'installation puis à l'utilisation du script Fancybox avec WordPress, que les galeries photos soient créées manuellement ou en utilisant les outils médias dédiés. Il existe toutefois une autre manière de créer une galerie photo sans plugin sous WordPress: le CSS3


Laisser un commentaire

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

*
*
Site web