Voilà une nouvelle fonction intégrée à l’excellent plugin Jetpack de WordPress qui va vous permettre très facilement de mettre en forme les galeries d’images. C’est une fonctionnalité qui nécessitait jusqu’à présent d’installer un plugin spécifique. Maintenant c’est très simple et cela fonctionne avec tous les thèmes :

  1. Installez l’extension gratuite Jetpack
  2. Activez le module « Tiled Galleries » (voir l’image)
  3. Insérez une galerie photos et vous pouvez maintenant avec un menu déroulant sélectionner le type de présentation souhaitée (voir l’image)
  4. C’est tout !

Associée avec la nouvelle gestion des médias proposée depuis la version 3.5, on va enfin pouvoir insérer et gérer des diaporamas sans passer par une machine à gaz comme NextGEN Gallery.

La mosaïque d’images (effet Tiles)

Regardez mon exemple ci-dessous, c’est une galerie avec effet « slideshow ». A noter que j’ai rajouté un bandeau noir dans le bas des images pour que les titres apparaissent, sinon c’était illisible…

Vous pouvez également apprécier l’effet « Tiles » sur mon site de test de Twenty Twelve. Pour les non anglophones, « tile » signifie carrelage, c’est donc un effet mosaïque d’image avec une petite marge, avec un bel effet d’apparition de titre en roll-over.

[hr]

Le diaporama (effet Slideshow)

Attention : il y a un bug d’affichage si il y a des photos sous un slideshow (voir la copie écran)

Egalement : il y a un petit bug lors de la mise à jour du plugin, il faut le réinstaller en FTP
[EDIT : visiblement c’est corrigé avec la version 2.1.1]… (voir la discussion complète)

[ EDIT : le problème de marge à droite peut être facilement résolu avec cette méthode ]

 

Bonus : Voilà un tuto très intéressant pour remplacer les styles CSS de JetPack
http://wpbeaches.com/overriding-jetpacks-css-styles-in-wordpress/

Bonus : Un joli thème enfant et plugin pour utiliser des galeries en mosaïque sans JetPack
http://wp-tiles.com/tiledfourteen/

39 thoughts on “ Nouveau : créez un diaporama ou une mosaïque d'images avec Jetpack ”

  1. Bonjour,
    Pour activer cette fonctionnalité, faut-il obligatoirement se connecter à WordPress.com ?

  2. Oui, l’installation de l’extension Jetpack nécessite un compte gratuit Wordpres.com. A noter que cela ne fonctionne pas en local, c’est obligatoirement en ligne…

  3. Hello,

    Bon, c’est lent … mais j’ai un autre soucis. En mode mozaïque rectangulaire, il se borne a utiliser 3 colonnes quelques soit la valeur indiqué et surtout, il n’utilise pas toute la largeur de la page …
    Une idée?

    Merci d’avance
    Hep

  4. C’est lent ? Avez-vous bien optimisé les photos avant ?
    Oui, en mode mozaïque, il n’y a que 3 colonnes, mais c’est responsive, donc normalement ça occupe toute la largeur de page.
    Avez-vous un gabarit de page « pleine page / full width » ?
    Sinon il y a un style CSS dans le thème qui doit générer des marges, il faut vérifier avec Firebug et créer un style pour l’annuler

  5. Merci,

    la page concernée est celle-ci:
    http://hephoto.ch/info/
    Pour tester cette fonction, j’ai justement « coller » la galerie dans une page qui est en plaine largeur, comme l’est la totalité du site wp.

    Si je mets, « cercle » ou « carré », là, il utilise toute la largeur de la page.

    Cela étant dit, si il n’y a que 3 colonnes, cela rend cette fonction tout de suite moins attrayante.
    Mais j’aimerais quand même comprendre pourquoi il est pas sur toute la largeur en mode mozaïque.

  6. Oui, c’est bizarre, ça ressemble à un bug… Avez-vous essayé sur une page sans autre contenu ? Et avec le thème Twenty Twelve, ça donne quoi ?

  7. Bonjour.

    Merci pour cette article. Je débute avec WordPress, j’aurais une question, au début de l’article vous détaillez. Le processus d’installation et d’utilisation en 4 points.
    Le 3ième points :  » Insérez une galerie photos et vous pouvez maintenant avec un menu déroulant sélectionner le type de présentation souhaitée ».

    J’ai pas de problème pour insérer les images mais je ne trouve pas de menu déroulant j’ai bien activé la galerie dans Jetpack évidemment. Je ne vois aucun changement. avant ou après installation du Plugin.

    Désolé pour la question de débutant. Mais je trouve pas ce menu déroulant pour choisir la présentation ou est il ?

    Merci d’avance.

  8. Regardez, j’ai rajouté une copie écran dans l’article.
    Bonn chance !

  9. Oui, c’est bizarre, j’ai regardé, j’ai pas la solution. Éventuellement, faudrait poser la question sur les forums WordPress.org

  10. Bonjour !
    Merci pour l’info, le mode mosaïque que je voulais était dispo sur wordpress.com mais non sur wordpress.org (?!)
    Cependant, quand je l’active via Jetpack sur wp.org, certaines de mes photos disparaissent… Elles sont pourtant visibles sur le mode mosaïque normal. Du coup, ça fait des trous.

    Des idées ?

    Merci d’avance,
    J.

  11. A mon avis, c’est un bug d’affichage. Il suffit de changer l’ordre des photos.
    Pour que ça fasse toute la largeur, il faudrait utiliser un modèle de page / template « pleine page » sans sidebar, mais qui n’existe pas dans ce thème. Il faudrait le créer…

  12. Mmh, j’ai déjà tenté de changer l’ordre + ré-uploader les photos « manquantes » (ce sont toujours les mêmes) rien n’y fait. Elles s’affichent très bien dans le mode basique mais disparaissent dans le mode tiled mosaic…

  13. Le problème de largeur se corrige très simplement avec ce code à rajouter dans le fichier « functions.php » et à ajuster selon vos besoins…

    if ( ! isset( $content_width ) )
        $content_width = 800;

    Voir la discussion

  14. Bonjour,

    tout d’abord merci pour ce petit tuto. Cela fait des mois que je veux installer des diaporamas photos sur mon site d’école (les parents en réclament un :D).

    Mais j’ai encore un léger problème… quand je sélectionne Diaporamas dans la liste déroulante et que je veux voir l’aperçu de mon article, à la place du diaporama j’ai un bloc tout noir et au dessus il est écrit : Ce diaporama nécessite JavaScript, pourtant j’ai JavaScript installé sur l’ordinateur.

    De plus, sur votre exemple, en mosaique carré (ici : http://twenty-twelve.gd6d.fr/post-format-test-gallery/), lorsqu’on clique sur une image, ça ouvre non pas l’image toute seule, mais l’image dans le diaporama. C’est exactement ça que je voudrais ! Comment faites-vous ? Car moi quand je sélectionner « Mosaique carré », chaque image s’ouvre seule et non pas dans le diaporama.

    Merci de votre aide !

  15. Pour cela, il faut bien veiller à avoir au préalable activé le module « Carousel » dans la page d’option JETPACK;
    Ensuite, dans les réglages de la galerie, il faut bien lier au fichier média, non pas à la page du fichier attaché…
    Et là, les parents sont contents 😉

  16. Merci pour votre réponse rapide, mais tout ce que vous avez dit, je l’ai fait. Mais rien ne change 🙁

    J’ai activé le Carousel, j’ai bien lié au fichier média, mais cela m’ouvre une seule photo et non l’ensemble dans le diaporama 🙁

    Je vous mets le lien : http://www.notredamestlon.fr/?p=289

    Deuxième chose, en mode Diaporama, cela me fait un écran noir. Là encore je vous mets un exemple : http://www.notredamestlon.fr/?p=367

    Autant pour le diaporama écran noir, c’est pas grave, autant pour le mode Carousel j’aimerai vraiment que cela fonctionne :p

    Encore merci !

  17. Je n’arrive pas à accéder à votre site. Il y a peut-être une incompatibilité avec votre thème. Activez temporairement le thème par défaut et regardez si ça marche. Autre piste, les extensions. Désactivez les (sauf JetPack) et testez la page.

    [ajout : ] J’ai vu la page. A mon avis, c’est un problème avec les images qui sont trop lourdes ! Il faut les optimiser avant de les mettre en ligne : reduire la taille à 900 px de large par ex.
    Egalement, vous pouvez facilement éviter la marge à droite avec cette méthode

  18. Bon eh bien, c’est ce que je redoutais, c’est une incompatibilité du thème. Puisque avec un autre thème par défaut, tout fonctionne nikel… cela ne vient pas de la taille des images donc.

    Mais tout cela m’embête, car je ne vais pas changer le design du site 🙁 pensez-vous qu’il y a possibilité de rendre tout cela compatible avec mon thème ? Car c’est une thème que j’ai construit de A à Z, je ne suis parti de rien. Donc il suffit peut-être de rajouter quelque chose.

  19. J’ai rajouté la ligne préconisée pour l’appel du script jquery, mais ça ne change rien. Rah, je vais continuer de batailler (même si je ne m’y connais pas plus que ça) parce que je tiens vraiment à garder mon thème mais je tiens aussi à avoir ce Carousel qui fonctionne !

    Encore merci pour votre disponibilité et votre patience.

  20. Vous devriez essayer avec un autre ordinateur, c’est à mon avis un problème dans votre navigateur (ancien, limitations, bug ?).

  21. Sur 3 postes différents j’ai le même soucis
    avec Chrome, IE et Firefox tous en dernière version.

  22. Salut!
    Je souhaite faire défiler les images à l’en-tête du site plus rapidement que ce qui se passe actuellement. Et c’est JetPack que nous avons activé comme pluggin.

    Des idées?

    Merci d’avance pour l’aide!

  23. Jetpack reste simple et avec peu d’options. Je ne suis pas sûr que ça soit possible et ça risque d’être un paramètre à changer dans les fichiers du plugins, fichiers qui seront écrasés lors d’une mise à jour… Le mieux je pense est de se tourner dans ce cas vers un autre plugin (le choix est vaste..)
    Vous pouvez aussi demander directement au support :
    https://wordpress.org/support/plugin/jetpack

  24. C’est fait et très bien comme je le souhaitais. Nous utilisons le thème de Sampression qui permet d’avoir l’en-tête avec des images changent. Le jetPack est aussi activé. Je veux alors utiliser le pluggin que vous m’avez conseillé. Le diapo est crée déjà. Que faire maintenant?

  25. Salut!
    Pouvez-vous nous aider, svp, à autoriser les commentaires de tous nos posts? On a tout essayé!..
    Merci d’avance!

  26. Bonjour, merci pour le tuto ! Juste une question… Lorsque que je clique sur les images (une fois la galerie réalisée) je tombe sur une page de mon blog avec uniquement l’image sélectionnée. Est-il possible de mettre un lien différent lorsqu’on clique sur une des images ? Est-il possible d’en mettre un lien différent par image ? Merci !

  27. Bonjour,

    J’utilise le carrousel de Jetpack. L’image arrive bien en plein écran mais on ne peut pas faire défiler les autres images à l’aide d’une flèche comme lorsque l’on clique sur le vôtre.

    Savez-vous où dois-je aller pour permettre cette fonction? Merci 🙂

  28. Bonjour alex-coureur-des-bois, il me semble que dans votre site ça ne marche pas parce qu’une autre fonction de diaporama est déjà intégrée dans le thème (ce n’est pas la même interface…). Vous n’avez pas une option « désactiver le lightbox » ?

Laisser un commentaire