Quand PowerPoint est trop relou… Vive le shortcode [gallery] de #WordPress !

Crédits photo Presentation by FleurP, on Flickr

Vous connaissez ces accrocs du powerpoint qui copient / collent leur speech, qui illustrent leur prĂ©sentation de quelques cliparts / bmp bien pensĂ©s… Vous savez la fameuse prez qui pĂšse 3 tonnes et qui se sent Ă  l’Ă©troit dans les 125 pages qui la compose… Le truc super pro quoi (qu’on rĂȘve tous de lire) !

Et bien, tant que les gens se l’Ă©changent par mail, peu importe Ă  la limite.. Le problĂšme se pose quand on vous demande de la mettre sur l’Intranet dont vous vous chargez ! Et oui, vous faites un « clic droit propriĂ©tĂ©s » (au travail c’est souvent windaube 🙁 ) et dang 9MO ( > Ă  votre upload_max_filesize ) !

Patatra ! vous tentez de zipper sans trop y croire, paf 8.7MO. On pourrait s’amuser Ă  optimiser les images incluses… mais lĂ  on n’a pas le temps et c’est chiant ! Bon allez hop direction un hĂ©bergeur de fichiers sur Internet.. MĂȘme pas c’est de l’intranet et tout le monde ne dispose pas du pass pour satisfaire le proxy… misĂšre, en plus c’est vendredi 13 !

Heureusement le shortcode gallery nous tend les bras !

En effet, on peut plus facilement uploader 125 images de 50 Ă  100KO et se servir de cette fonctionnalitĂ© pour afficher la prez d’un seul coup. D’abord, il faut exporter la prez en fichiers image.

On exporte la prez en autant de jpg que de slides..

Ensuite, direction notre administration prĂ©fĂ©rĂ©e pour transfĂ©rer d’un simple glisser / dĂ©poser (WordPress 3.3) les images.

On upload tous les fichiers image pour créer une gallerie

Une fois le tĂ©lĂ©chargement terminĂ©, il s’agit de cliquer sur l’onglet « Gallery » qui est apparu Ă  droite de la « Media Library ». Si le coeur nous en dit, on peut s’amuser Ă  ajouter des lĂ©gendes (captions) Ă  nos 125 images, mais trĂšs vite, on va se diriger vers le bas de la fenĂȘtre pour paramĂ©trer notre shortcode gallery, comme illustrĂ© ci-dessous.

On ajoute Ă©ventuellement des captions et hop insertion du shortcode gallery

Notez bien que je fixe le dropdown « Gallery Columns » Ă  1. Ensuite on insert le shortcode en cliquant sur le bouton prĂ©vu Ă  cet effet. Une fois transfĂ©rĂ© dans l’Ă©diteur WordPress, on va l’enrichir de 2 nouveaux paramĂštres :

  1. size= »large »
  2. captiontag= »p »
Adaptation du shortcode (taille des images et balise des captions) + ajout du post meta

Notez Ă©galement que j’ajoute un post meta « prez » Ă  la page ou au post dont la valeur est 1. VoilĂ , notre shortcode est en place. Simplement en l’Ă©tat, il va nous afficher les slides les uns en dessous des autres, pas top ! Ainsi, ma premiĂšre idĂ©e a Ă©tĂ© d’utiliser thickbox pour lancer un diaporama dans sa fenĂȘtre modale. Pour cela, rien de plus simple, un jQuery qui masque toutes les diapos sauf la premiĂšre, qui ajoute une classe « thickbox » Ă  tous les liens gĂ©nĂ©rĂ©s par WordPress et un attribut rel ayant une valeur identique et le tour est jouĂ© :). A ce moment lĂ  de la partie, j’Ă©tais plutĂŽt content du rĂ©sultat d’ailleurs.

Je montre le rĂ©sultat Ă  mon community manager, qui me dit « c’est pas mal…. ça serait encore mieux sans la fenĂȘtre modale et avec un slider Ă  la place ». Il a raison !! Du coup ça me trotte dans la tĂȘte sur le chemin du retour dans le mĂ©tro et toute la soirĂ©e…

Alors, je commence par inspecter un moyen de changer l’output du shortcode (dans /wp-includes/media.php) mais les filters ne sont pas satisfaisants.

Jouons avec jQuery!

Du coup, je m’amuse Ă  faire des tests avec jQuery pour rĂ©cupĂ©rer le contenu de l’output, stocker dans une variable l’html qui m’intĂ©resse pour le rĂ©organiser dans un ul li et lancer FlexSlider… Et voilĂ  le rĂ©sultat pour une page WordPress.

Un Diaporama pour la page!

En gros, une fonction dans le functions.php va charger les Ă©lĂ©ments nĂ©cessaire au slider (css + js) ainsi que mon petit script ssi le post ou la page a un post meta « prez » fixĂ© Ă  1 et qu’on se situe sur un template single.php ou page.php.. Pour les autres templates, je vous invite Ă  utiliser le commentaire <!--more-->ï»ż pour forcer l’affichage du lien « Continue reading »..

more si votre thĂšme affiche the_content au lieu de the_excerpt dans les pages != single

Voici le rendu pour un post affiché dans son template single.php

Un mini diaporama pour l’article !

Comme c’est la pĂ©riode : TrĂšs bonne annĂ©e 🙂 . Et Si vous trouvez ce petit truc intĂ©ressant, vous pouvez tĂ©lĂ©charger le child thĂšme de 2011 que j’ai utilisĂ© pour regrouper ces fonctionnalitĂ©s.

3 commentaires sur “Quand PowerPoint est trop relou… Vive le shortcode [gallery] de #WordPress !

  1. Bonjour

    Merci pour cet excellent article.
    J’ai juste une question, quel plugin utilisez vous pour les customs field ou entrer le prez et sa valeur?

    Merci d’avance

    1. Hello,

      Il n’y a pas de plugin particulier, dans les options d’affichage (onglet en haut Ă  droite), il suffit d’activer la meta box des champs personnalisĂ©s ou custom fields.

      Merci pour ton commentaire 😉

Les commentaires sont fermés.