Créez des galeries époustouflantes avec le meilleur gestionnaire de galerie pour DIVI

Il est vrai que l'utilisation de galeries est généralement l'un des meilleurs moyens de montrer notre contenu sur un site Web, car cela semble plus professionnel que d'ajouter simplement des images, mais il est également vrai que la création de galeries et l'ajout de styles pourraient être un travail vraiment fastidieux, tout comme le fait d'ajouter des éléments à une page et de les adapter à votre site Web.

DIVI est généralement ce que nous utilisons dans ces cas car c'est un constructeur de page connu avec des outils parfaits, mais cela pourrait être limité lors de l'ajout d'images et c'est là que WP Media Folder vous aide.

WP Media Folder et son gestionnaire de galerie vous permettent de gérer et d'ajouter des galeries directement depuis DIVI, dans ce tutoriel nous allons voir à quel point c'est facile ;)

Pour ce post, nous allons utiliser DIVI, WP Media Folder, WP Media Folder Addon, et WP Media Folder Addon Galerie.

Connecter WordPress et les albums Google Photos pour créer des galeries impressionnantes

L'un des sujets de ce post est de créer ces galeries en utilisant des images importées directement depuis votre compte Google Photos, afin que vous puissiez facilement télécharger des images depuis votre téléphone vers Google Photos et les utiliser sur votre site WordPress.

Alors commençons par la connexion.

Tout d'abord, nous avons besoin d'une application Google Dev pour cela, allez ici : https://console.developers.google.com/project et créez un nouveau projet.

Ajoutez un nom au projet, vous pouvez ajouter ce que vous voulez.

Maintenant, attendez quelques instants pour que le projet soit créé.

S'il s'agit de la première fois que vous utilisez cette API de la bibliothèque de photos, vous devrez l'activer, pour l'activer, allez sur la Place de marché dans le menu de gauche.

Maintenant, dans la zone de recherche, tapez API de la bibliothèque de photos et recherchez-le.

Cliquez dessus, puis sur Activer.

Maintenant que c'est activé, cliquez sur "API et Services" dans le menu de gauche, sur ce panneau, allez à Identifiants.

Maintenant que vous êtes ici, dans le panneau supérieur, allez à + Créer des informations d'identification > ID client OAuth, si demandé, ajoutez un nom à votre écran de consentement OAuth.

Maintenant, configurez les informations d'identification comme suit :

• Sélectionnez "Application Web" et ajoutez un nom de votre choix.
• Origine JavaScript autorisée : https://your-domain.com (remplacer par votre nom de domaine, sans slash final).
  
• URI de redirection autorisées : https://votre-domaine.com/wp-admin/options-general.php?page=option-folder&task=wpmf&function=wpmf_google_photo_authenticated
  

Gardez à l'esprit que Google a changé sa politique, vous devez donc remplir vos domaines autorisés dans Onglet Écran de consentement OAuth > Modifier l'application.

Dans la section Domaines autorisés, cliquez sur +Ajouter un domaine et ajoutez votre domaine.

Ajoutez-le également à la section Vérification de domaine.

Et c'est fait ! Vous obtiendrez votre ID et votre secret à ajouter dans la configuration de WP Media Folder:)

Maintenant, connectons votre compte Google Photos à votre site WordPress, pour cela allez dans Réglages > WP Media Folder > Cloud > Onglet Google Photo.

Vous pouvez utiliser le mode Automatique qui est le plus simple, car vous n'aurez qu'à vous connecter à votre compte Google, pour cela, choisissez Automatique dans le "mode de connexion" puis Connecter Google Photos.

Une fenêtre contextuelle apparaîtra, cliquez sur Accepter.

La dernière étape sera de vous connecter à votre compte Google, d'autoriser les autorisations et de terminer la connexion.

C'est tout, vraiment facile et rapide, n'est-ce pas ? :)

De Google Photos à une galerie Divi WordPress

Comme le titre l'indique, de Google Photos à une galerie Divi WordPress, maintenant que Google Photos est connecté, nous pouvons procéder à la création de nos galeries à partir des albums de notre compte.

Tout d'abord, nous allons créer une nouvelle galerie à partir du gestionnaire.

Allez à Médias > Galeries de dossiers de médias.

Ici, nous allons pouvoir créer de nombreuses galeries différentes pour les images de notre site WordPress, de notre ordinateur, ou (dans ce cas) de Google Photos.

Cliquez sur +Ajouter une nouvelle galerie.

Cela ouvrira une fenêtre contextuelle où vous pouvez saisir le nom de la galerie, sélectionner le thème, et d'autres choses comme si vous voulez l'ajouter en tant que galerie parente ou peut-être une sous-galerie.

Sélectionnez toutes vos options mais ne vous inquiétez pas car vous pouvez éditer ceci après la création de la galerie, donc ce n'est pas comme quelque chose que nous ne pourrons pas changer ;)

Sur cet écran, vous avez 3 options pour ajouter des images à votre galerie, vous pouvez les ajouter depuis WordPress (votre bibliothèque de médias), depuis votre ordinateur, et depuis Google Photos.

Pour ce tutoriel, nous allons sélectionner Google Photos mais vous pouvez choisir ce que vous voulez.

Si vous choisissez Google Photos, vous verrez tous les albums et les images du compte que vous avez connecté à votre site auparavant.

Vous pouvez importer un album complet en cliquant sur Importer l'album ou également, sélectionner plusieurs images et cliquer sur Importer la sélection.

Par exemple, ici nous allons sélectionner 5 images et importer uniquement celles-ci.

C'est aussi simple que de cliquer sur les images que vous souhaitez et puis, cliquez, comme expliqué avant, sur Importer la sélection.

Maintenant que vous avez ajouté les images à la galerie, vous les verrez dans le gestionnaire, sur cet écran initial, vous avez la possibilité de les commander, de définir une image comme couverture de la galerie, et également, de modifier l'image elle-même.

Vous remarquerez un autre onglet appelé Paramètres d'affichage et code court.

Dans cette section, vous aurez la possibilité de modifier davantage les paramètres de la galerie comme le thème que vous souhaitez utiliser, le nombre de colonnes, la taille de l'image, l'action au clic, et la taille de la lightbox si vous sélectionnez une lightbox comme action au clic.

Il y a également le shortcode pour cette galerie au cas où vous voudriez l'utiliser ;)

Vous aurez également ces options dans Divi, donc ne vous inquiétez pas d'avoir à revenir chaque fois que vous souhaitez modifier quelque chose dans la galerie.

Maintenant que vous avez terminé la création de la galerie, cliquez sur enregistrer et allez à la page/article que vous souhaitez modifier, et cliquez sur Utiliser le Divi Builder, vous pouvez l'utiliser en front-end ou en back-end sans problème ;)

Sélectionnez la colonne comme vous le faites habituellement, puis recherchez le module WPMF Gallery Addon.

Dans la prochaine fenêtre contextuelle, vous verrez l'option pour ajouter une galerie déjà créée, ainsi que toutes les autres options que vous avez vues dans l'onglet Afficher du gestionnaire de galerie afin de pouvoir éditer facilement la galerie.

Nous allons sélectionner la galerie que nous avons créée précédemment.

La galerie sera affichée et vous pourrez modifier tous les paramètres d'affichage avec un aperçu en direct afin que chaque modification soit reflétée automatiquement.

Le meilleur outil lorsque vous souhaitez vérifier comment les choses se passent sans avoir à cliquer sur l'aperçu ou recharger la page à chaque fois qu'une modification est apportée.

Maintenant, vous pouvez terminer la création de votre page et la publier sans avoir à vous soucier de ne pas savoir à quoi ressemblera la galerie dans le frontend.

Un outil vraiment génial, n'est-ce pas ?

Créer des galeries à partir du Cloud directement vers Divi

Vous pensiez peut-être que c'était tout, mais la réponse est non ! Vous pouvez également créer des galeries avec des images hébergées dans le cloud, vous allez pouvoir économiser de l'espace de stockage et également utiliser Divi pour placer la galerie ;)

Nous allons utiliser un dossier Google Drive pour cela, mais gardez à l'esprit que d'autres intégrations cloud sont disponibles avec WP Media Folder et l'Addon (Dropbox, AWS, OneDrive).

Afin de pouvoir connecter Google Drive à votre site WordPress, vous pouvez suivre le guide détaillé ici le processus est similaire à celui de Google Photos, vous ne devriez donc pas avoir de problèmes.

Après avoir créé/synchronisé les dossiers Google Drive, vous pouvez aller à la page/article que vous souhaitez modifier et cliquer sur Utiliser le Divi Builder, ajoutez votre colonne, et, dans les modules, recherchez celui appelé Galerie WPMF

Ce module vous permettra de créer la galerie directement dans le Divi Builder, tout d'abord, ajoutons les images en cliquant sur Ajouter des images à la galerie dans la section Images

Cela chargera votre bibliothèque de médias dans une fenêtre contextuelle, recherchez le dossier contenant les images que vous souhaitez ajouter à l'intérieur et cliquez dessus.

Nous allons utiliser le dossier Google Drive pour ce cas.

Maintenant, dans la section de droite, sélectionnez toutes les images que vous souhaitez ajouter en cliquant dessus, puis cliquez sur Sélectionner.

Cela chargera toutes les images dans le module Divi et vous verrez toutes les options disponibles pour l'édition de la galerie, comme le thème, les colonnes, la taille, l'action au clic, les bordures, les ombres, le rayon de bordure et une option pour ajouter un flou à l'image.

La meilleure partie de ceci est que chaque modification que vous apportez sera automatiquement affichée dans l'aperçu, vous n'aurez donc pas à recharger la page ou à enregistrer le modèle à chaque modification.

Comme vous pouvez le voir, ces plugins sont juste une combinaison parfaite ;)

Obtenez le site Web WordPress le plus professionnel avec la meilleure combinaison

Nous n'avons présenté que quelques-unes des fonctionnalités disponibles dans WP Media Folder, il en existe d'autres comme décharger complètement vos médias sur AWS, PDF Embedded, et plus de connexions cloud comme OneDrive et Dropbox, alors qu'attendez-vous pour commencer à utiliser toutes ces fonctionnalités incroyables ? Allez ici et obtenez votre propre abonnement :)