Faire une jolie galerie photo avec WordPress

Posté le 23 Mai 2014 dans Divers | 39 Commentaires


Sur un blog photo, la forme est importante, au delà de présenter ses + belles photos, on s’attache souvent à les mettre en valeur sur le site. De nombreux blogueurs, dont moi, ont opté pour une lightbox (un affichage des photos en surimpression et en grand format au clic), mais cela ne fait pas tout. En effet, on prend toujours plus de plaisir à lire un article dont la mise en forme est soignée et dont les photos sont jolies.

Voici quelques astuces pour reproduire une jolie galerie photo simplement : une seule condition, il faut utiliser un blog WordPress et les quelques extensions gratuites ci-dessous. Avant de vous lancer dans la lecture, vous pouvez vérifier le résultat en regardant  cet article : voyage photo en Islande.

Votre galerie après avoir lu ce tutoriel :)

Votre galerie après avoir lu ce tutoriel :)

Le rendu vous plaît ? OK, alors on y va.

Petite note avant lecture : on abordera deux types de blogs :

  • Les blogs WordPress.com : il s’agit des blogs offerts par WordPress et avec une adresse monpseudo.wordpress.com, ils ne nous serviront pas ici, mais nous auront besoin d’un compte wordpress.com.
  • Les blog WordPress auto hébergés : ce sont les blogs qui utilisent le CMS WordPress mais qui sont hébergé n’importe où sauf chez WordPress.com. Quelques exemples d’hébergeurs 1and1, OVH, etc…

PREMIÈRE ÉTAPE : CRÉATION D’UN COMPTE WORDPRESS.COM (facultatif)

La première étape est de vous assurer que vous disposez d’un compte WordPress.com : pour créer un compte sans créer de blog MonPseudo.wordpress.com, je vous invite à aller ici. Notez bien votre nom d’utilisateur et le mot de passe, il nous servira par la suite. Si vous disposez déjà d’un compte WordPress.com, nul besoin d’en créer un nouveau, vous pourrez le lier à votre blog auto hébergé sans souci.

DEUXIÈME ÉTAPE : INSTALLER ET CONFIGURER JETPACK

Jetpack est une extension gratuite crée par et pour WordPress. Elle permet d’ajouter les fonctionnalités de WordPress.com. Parmi les possibilités qu’offrent Jetpack, il y a la possibilité de créer un site mobile (compatible tablette / smartphone) en un clic, la possibilité d’avoir des statistiques de trafic (nombre de visiteurs, de visites etc…) et la possibilité de créer de jolies galeries photos simplement entre autre !

 Installation de Jetpack

Pour cela, dans votre back-office WordPress, vous allez vous rendre dans la section « Extensions » puis cliquer sur « ajouter ». Vous chercherez l’extension Jetpack et cliquerez sur « Installer », jusque là c’est facile (et je vous rassure, ça continuera comme ça !)

Installation de Jetpack

Installation de Jetpack

Configuration de l’extension

Une fois Jetpack installé, il vous faut l’activer.

Activer Jetpack

Activer Jetpack

Ensuite, vous êtes invité à vous connecter à votre compte WordPress.com (celui que vous avez créé en étape 1), pour cela cliquez sur le bouton « connexion à WordPress.com » qui apparaît désormais en haut de la fenêtre. Vous allez devoir saisir votre identifiant WordPress.com et ensuite il faudra « Autoriser Jetpack » : c’est cette étape qui apportera les fonctionnalités issues de WordPress.com dont on a besoin sur votre blog auto hébergé WordPress. C’est bon, vous suivez toujours ?

Connexion à WordPress.com

Connexion à WordPress.com

DERNIÈRE ÉTAPE : METTRE EN PLACE LES GALERIES PHOTO

Une fois de plus, nous allons passer plusieurs étapes, mais pas de crainte, je vous guide.

D’abord, vous allez vous rendre dans le nouvel onglet Jetpack qui apparaît en haut à gauche, dans la barre latérale et activer la mosaïque.

Mosaique Jetpack

Mosaique Jetpack

Une fois que c’est fait, n’oubliez pas de cliquer sur configurer (cf capture ci dessus) et de cocher la case « Affichez vos galeries dans une mosaïque d’image ».

Cochez cette case

Cochez cette case

Ouf ! vous avez survécu !
Tout est en place pour créer vos mosaïques. Maintenant, vous pouvez aller dans un article, cliquer sur « Ajouter un média », ajouter plusieurs photos (si vous êtes dans votre bibliothèque, sélectionnez plusieurs photos grâce à la touche Ctrl) puis cliquer à gauche sur « créer une galerie ».
Voilà ce que je vois chez moi à cet instant :

Galerie WordPress Galerie WordPress

Cliquez sur le bouton bleu pour insérer votre article, jetez un oeil à l’aperçu de votre article, et voilà, le tour est joué !

Pour voir le résultat avec de jolies images, c’est par ici, ou là

J’espère vous avoir éclairé, n’hésitez pas à me poser vos questions si besoin et à donner vos astuces si vous en avez :)
PS : l’article est très moche, mais au moins, vous comprendrez tout de suite l’intérêt d’une jolie galerie :)

Photographe à Aix en Provence, je partage avec vous mes plus belles captures, mes astuces et mon quotidien.. Je suis toujours ouvert à l'échange alors n'hésitez pas à me faire vos remarques et/ou critiques pour que l'on en discute ! Sauf mention explicite, la copie et l'utilisation à des fins commerciales ou non de ces contenus ne sont pas autorisées.

39 Commentaires

  1. Madame Voyage.fr
    8 juin 2017

    Hello David,
    Un grand merci pour tes conseils d’une simplicité et d’une efficacité redoutable ! J’adore ! J’ai mis moins d’une minute à installer le Plugin et à constater que mes galeries déjà existantes c’étaient transformées automatiquement (aucun changement manuel à effectuer). Merci encore tu peux aller voir le résultat 😉 Marion

    Reply
    • David Steiner
      8 juin 2017

      Merci ! Content d’avoir été utile 🙂
      Je suis allé voir ton site : tu fais de jolies photos, bravo !

      Reply
  2. Xedo
    4 février 2016

    Merci pour les infos, même si la présentation n’était pas la même et j’ai les menus en anglais, donc pour moi, sachant que « Jetpack » était installé j’ai été dans/ tableau de bord/(nom du site)/widgets/Jetpacks/reglages/Tiled galleries/Activer et configuration… Donc encore merci car les menus semblent chaque fois différents suivants les versions semble-t-il…

    Reply
    • David Steiner
      4 février 2016

      L’article est un peu ancien, WordPress a pu évoluer entre temps. Merci de votre passage.

      Reply
  3. Arnaud
    5 novembre 2015

    Bonjour

    Dans mes réglages, je n’ai pas l’option « affichez vos galeries en mosaique.

    que faire?

    MErci pour les explications

    Reply
    • David Steiner
      5 novembre 2015

      Il faut activer l’option dans l’onglet « Jetpack » sur votre tableau de bord

      Reply
      • Arnaud
        5 novembre 2015

        Bonjour

        MErci pour la réponse.

        dans mon tableau de bord, je clique sur Jetpack – réglages.
        Ensuite, je vais dans le module « Mosaïque d’images » – « configurer »

        Mais là, je ne vois pas l’option à cocher.

        Merci

        Reply
        • David Steiner
          5 novembre 2015

          Si les Mosaïques d’images sont activées, vous devriez voir un bouton « désactiver » près du bouton « configurer »

          Si c’est bien le cas, alors dans l’article dans lequel vous souhaitez avoir une galerie, il faut « ajouter un media » puis dans la fenêtre qui s’ouvre cliquez sur « Créer une galerie », selectionnez vos images et appliquez les réglages ci-dessous.

          Si le type « mosaïque » n’apparait pas ici, je ne pourrais pas vous aider + malheureusement !

          Reply
          • arnaud
            5 novembre 2015

            je n’ai pas dans les réglages

            Type: Mosaique d’images.

            Pourtant, dans jetpack, mosaique est activé.
            un autre module à activer également?

            Mille mercis pour l’aide et le temps pris

          • David Steiner
            5 novembre 2015

            Je ne vois pas d’où ça peut venir alors, désolé

          • arnaud
            5 novembre 2015

            ce serait mon theme qui empecherait de faire fonctionner cette option?

          • David Steiner
            5 novembre 2015

            C’est possible, si vous parlez anglais, le support Jetpack pourra peut être vous répondre ?

  4. Johanna
    4 juin 2015

    Merci beaucoup de ton aide précieuse, cela n’a rien à voir avec la gallerie de base (et vraiment pas très esthétique) de WordPress !

    Encore merci 🙂

    Reply
    • David Steiner
      4 juin 2015

      Avec plaisir

      Reply
    • Pierre-Marie
      18 septembre 2015

      Bonjour,

      J’ai chargé Jetpack pour faire une mosaïque photo. Le problème c’est que toutes mes photos s’affichent en tailles identiques, côtes à côtes, sans aucun effet mosaïque justement. Des colonnes de photos aux mêmes dimensions. Est-ce que j’ai raté un épisode ?

      Merci pour cet article en tout cas !

      Reply
      • David Steiner
        18 septembre 2015

        Vous avez bien activé Jetpack puis les mosaïques ? Dans l’article vous avez coché le format « mosaïque d’image » ?

        Reply
  5. emma
    28 mai 2015

    Bonjour,
    J’ai installé ce module sur mon site et la mosaique fait la moitié de la votre en largeur.
    je cherche des réglages, qqchose, je ne trouve rien. mon site est récent.
    une idée?

    merci

    Reply
    • David Steiner
      28 mai 2015

      La solution la plus simple est Custom Content Witdh, un petit plugin qui permet de spécifier la largeur des galeries
      http://wordpress.org/plugins/custom-content-width/

      Bonne journée,
      David

      Reply
      • emma
        28 mai 2015

        Merci !

        et vous utilisez FancyBox pour faire apparaitre les images quand on clique dessus?

        Reply
        • David Steiner
          28 mai 2015

          Oui tout à fait.

          Reply
          • emma
            28 mai 2015

            Merci, super, je vais aussi tester Simple Lightbox dont vous parlez plus bas.

            merci et bonne journée.

  6. Serge
    10 avril 2015

    Bonsoir
    Alors .
    si je vais sur votre site « voyage photo en Islande » quand je clique sur une photo comme Lacmille
    la photo s’affiche toute seule dans une autre page , je suis obligé de faire un retour pour pouvoir cliquer sur une autre image, sur Google Chrome par contre sur IE cela fonctionne très bien !!!
    J’ai mis une petite video ici -> http://scsv.free.fr/gal.avi
    Savez-vous comment régler ce problème ??
    merci
    Serge

    Reply
    • David Steiner
      10 avril 2015

      Merci de m’avoir informé, je vais creuser ça 🙂
      Si je trouve, je donnerai la solution !

      Reply
    • David Steiner
      14 avril 2015

      Je peux résoudre le problème en activant « Carousel » dans Jetpack, ce n’est pas idéal, mais à défaut de mieux ça fonctionne. Je vais creuser encore !

      Reply
    • David Steiner
      22 avril 2015

      A priori j’ai résolu le problème : une incompatibilité entre l’appel dans le footer du javascript de la lightbox et mon plugin de gestion du cache (WP Rocket). En remettant le javascript dans le corps de page le problème semble résolu chez moi. Et pour vous ?

      Reply
  7. Lacmile
    16 mars 2015

    Bonjour!

    J’ai un petit problème avec ma lightbox, j’ai eu le même problème que Camille ( quand je clique sur une photo la lightbox ne se met pas en marche ) la photo s’affiche toute seule dans une autre page , je suis obligée de faire un retour pour pouvoir cliquer sur une autre image , j’ai suivi la réponse que vous avez faite à Camille mais cela ne fonctionne pas . Avez vous une idée d’où pourrait venir le problème ?

    Merci 😀

    Reply
    • David Steiner
      16 mars 2015

      Si vous avez déjà testé la méthode donné au dessus, je ne vois pas d’autre piste, ou alors en changeant de plugin de gestion de la lightbox peut être ?

      Reply
      • Lacmile
        16 mars 2015

        J’ai trouver d’où venait le problème ! il y avait un conflit JS entre la lightbox et mon scroll ! En tout cas merci de votre réponse et pour se tuto vraiment sympa! 😀

        Reply
  8. Camille
    14 janvier 2015

    Bonjour,
    Je viens de démarrer sur WordPress car je me lance dans la création d’un site internet pour l’assoc’ dont je fais partie ! Seulement le hic c’est qu’après avoir appliqué la mosaïque d’images, je n’arrive pas à obtenir un lightbox pour mes images. Mon problème : lorsque je clique sur l’une des images de ma mosaïque cela m’envoie sur le lien de stockage de la photo alors que je voudrais qu’elle s’ouvre en grand.

    J’ai vu que cela fonctionne très bien sur les liens que vous nous avez donné. Pourriez-vous me préciser comment vous avez fait ?

    (Dans mes recherches, je me suis rendue compte que certains plug-ins interféraient entre eux, là j’ai tout essayé et je ne trouve pas.)

    Reply
    • David Steiner
      14 janvier 2015

      Bonjour Camille,
      Pour la lightbox, il y a de nombreuses extensions dont celle-ci (à installer et configurer).

      Pour que le clic vers une image déclenche la lightbox, il faut veiller à ce que les liens de la galerie soit avec le réglage « Lier à : fichier Média » comme sur l’image jointe.
      Bon courage, avec quelques essais cela devrait bien fonctionner !

      Reply
  9. Chromatovore
    13 septembre 2014

    Cette solution marche parfaitement !
    J’ai cependant trouver une autre solution qui éviterait de taper ce code à chaque fois que l’on veut aligner une galerie dans une nouvelle page ou un nouvel article.

    Résumons :
    Pour aligner une mosaïque, on peut taper le code suivant dans l’éditeur texte de la page ou article :
    [*gallery type= »rectangular » link= »file » ids= »1,2,3,4″]

    ou on peut se rendre dans le menu wordpress : Apparence -> Editeur.
    On va tout en bas de la feuille de style de son thème, et on tape, APRES le dernier caractère de la feuille de style :

    .tiled-gallery .gallery-row {
    margin: 0 auto;
    }

    L’Alignement sera donc appliqué à TOUTE les galeries du site, sans avoir à éditer chaque page contenant une galerie.

    Dès que je rentre de weekend, je vais tout de même tester la solution du plugin (à moins que je ne trouve une autre ligne de code…), car maintenant que mes galeries sont centrées, j’aimerai qu’elles fasse la largeur de mon site.
    Évidement, pourquoi faire simple quand on peut faire compliqué 🙂

    Reply
  10. Chromatovore
    11 septembre 2014

    Bonjour à Tous.
    J’arrive un peu tard sur ce sujet, mais c’est une des rares discussions qui abordent le sujet.
    J’ai récemment installé Jetpack, et j’ai le même problème que Thomas Benezeth.
    Je ne trouve pas le moyen de centrer une mosaïque d’image dans une page.
    Existe-t’il un moyen de remédier à ce problème par l’ajout ,par exemple,d’un code dans l’éditeur texte de la page ?
    Car j’évite généralement d’installer des plugin pour remédier à ce genre de petites choses.
    Merci pour votre attention !

    Reply
    • David Steiner
      11 septembre 2014

      Tu dois pouvoir centrer ta galerie en allant dans l’onglet texte de ton article (ou ta page) et en ajoutant
      < *div* align="center">ICI LA LIGNE DE CODE TA GALERIE ex : [*gallery type= »rectangular » link= »file » ids= »1,2,3,4″]< */div*> (en enlevant les * et en remplaçant les numéros par les ID de tes photos)

      Sinon si tu veux que ta galerie prenne toute la largeur de la page, utilise l’extension Custom Content http://wordpress.org/plugins/custom-content-width/ (mais elle te fera ajouter une extension).

      Tiens moi (nous) au courant !
      PS : désolé pour ces multiples publications, j’ai du corriger et recorriger les fautes.

      Reply
  11. Laurent
    27 mai 2014

    C’est vrai qu’on voit de plus en plus ce type de mise en page des photos sur les blogs wordpress. C’est indubitablement très esthétique, et l’assemblage des photos crée une certaine dynamique très plaisante. Mais je me demande toujours en fait si beaucoup de monde réalise qu’on voit les photos en plus grandes en cliquant dessus. Disons que c’est très bien si on souhaite joindre pas mal de photos à l’article, sinon, à toutes les mettre en plein format, il faut scroller sans fin, on finit par scroller trop vite et au final,on ne voit rien.
    Mais je me demande si les photos n’ont pas plus d’impact si on fait un choix plus drastique, qu’on en met moins et qu’on les met toutes du coup en pleine taille. Je n’ai personnellement pas la réponse … les goûts et les couleurs …

    Reply
    • David Steiner
      28 mai 2014

      Bonjour, oui chacun est libre de faire comme il veut. Pour ma part je fais un peu des 2, selon le nombre de photos que je veux montrer. Merci de ton avis !

      Reply
  12. Quoi de neuf en ce lundi matin? [71] | Marc Charbonnier
    26 mai 2014

    […] photographe blogueur David Steiner nous explique la méthode qu’il utilise pou publier de jolies galeries sur WordPress. […]

    Reply
  13. Thomas Benezeth
    24 mai 2014

    Merci pour l’aide que tu m’as apporté via Twitter pour mon blog 😉 Et pour cet article aussi, maintenant j’ai enfin une belle galerie et Jetpack !

    Par contre, je n’arrive pas à centrer cette galerie, elle se met sur la gauche et je trouve ça moyen… Une idée ?

    Reply
    • David Steiner
      24 mai 2014

      Pour ma part, je n’ai pas eu ce problème, mais pour le corriger je pense que l’extension Custom Content Width
      fera des merveilles : elle ajoute simplement une paramètre « largeur des custom content » dans l’onglet « Réglages -> Média ». Tu stipules une largeur de la même taille que celle de ton blog (en général, autour des 1000px) et ça devrait le faire 🙂

      Reply

Laisser un petit mot