Modal Portfolio est le nom que j'ai attribué à ma 6e extension WordPress. J'admets que je n'ai pas été très imaginatif sur ce coup-là, mais c'est ainsi. :-)
Modal Portfolio est une extension qui permet de gérer des portfolios (ou galeries photos) différenciés grâce à un système de shortcodes. Qui plus, les galeries permettent d'afficher des filtres par catégorie ainsi que des fenêtres modales pour afficher les photos (ou vidéos depuis la version 1.3) mais aussi des contenus additionnels. Le thème de base est crée en responsive web design mais vous avez la possibilité de paramétrer de nombreux options voire d'opter pour votre propre CSS si vous voulez aller plus loin (détails plus bas dans l'article ou dans la documentation de l'extension).
Télécharger “Modal Portfolio v1.7.4.1”modal-portfolio.zip – Téléchargé 27555 fois – 1,37 Mo
Pourquoi créer une énième extension de portfolio pour WordPress ?
Loin de moi l'idée de dire que les autres extensions de portfolios ou de galeries sont mauvaises, surtout quand on sait que certaines sont géniales. En fait, la raison est beaucoup plus simple que cela et m'a obligé à créer Modal Portfolio pour répondre à des besoins que je n'ai pas trouvés ailleurs (mais qui doivent sûrement exister parmi la multitude de plugins de ce type...).
En réalité, un client m'a demandé d'afficher des galeries photos filtrées qui ouvraient sur des modales (ou pop-in si vous préférez) contenant un titre, une image et du texte. Jusque là, tout va bien, j'ai trouvé 2 ou 3 extensions de portfolio qui offraient globalement ce type de possibilités. Le souci de mon client, c'est qu'il avait besoin de plusieurs sous-catégories de galeries et donc de plusieurs portfolios. Et là, je n'ai pas trouvé une seule extension répondant à tous les critères en presque six heures de recherches et de tests, même parmi les extensions payantes trouvées grâce à notre ami Google...
Par conséquent, je n'ai pas eu d'autres choix que de créer Modal Portfolio pour répondre à ce manque sur WordPress, bien que cela doive certainement existé en réalité (mais que je ne l'ai pas trouvé...). L'avantage de cette extension est de pouvoir gérer de multiples shortcodes pour afficher plusieurs galeries différentes.
Spécificités de Modal Portfolio
L'intérêt de Modal Portfolio réside en trois points principaux :
- Possibilité de gérer des catégories parentes et enfants afin d'afficher des galeries différentes selon les options du shortcode (voir plus bas). Ainsi, une même extension permet de créer plusieurs portfolios, mais tous de même type à ce jour (avec les mêmes blocs affichés, etc.).
- Possibilité d'afficher des contenus variés au sein de la modale et pas uniquement des photos comme dans la majorité des extensions de portfolios ou de galeries photos.
- Personnalisation des blocs à afficher et des effets de style. Même si ce n'est pas parfait, c'est toujours mieux que la plupart des plugins qui n'offrent aucune option de personnalisation...
L'extension offre de multiples options de réglages pour personnaliser les blocs à afficher (filtres, description, titre...) mais aussi pour adapter les effets de style en jQuery appliqués à la fenêtre modale et aux effets de texte.
Côté style graphique, le plugin ne dispose actuellement que d'une seule feuille de style simple qui doit encore être améliorée. J'ai donc ajouté un champ dans les options pour ajouter l'URL d'une feuille de style personnelle (qui remplace celle par défaut dans ce cas). Il est même possible de vider ce champ pour qu'aucune feuille de style additionnelle ne soit rajoutée si vous préférez placer vos styles CSS directement dans la feuille principale du thème.
Depuis la version 1.3 de Modal-Portfolio, il est possible d'éditer la feuille de style par défaut avec quelques options de personnalisation (couleurs, marges, effets de survol, etc.). Le nombre d'options devrait s'élargir au fil des versions...
La version 1.7 du plugin offre aussi de nouvelles options intéressantes :
- ajout multiple de référence pour gagner du temps (cela évite l'ajout référence par référence) ;
- classement des filtres et des vignettes, dans l'ordre désiré ou au hasard ;
- limitation possible du nombre de vignettes à afficher dans la page (par exemple, maximum 100 images, etc.).
N.B. : toutes les classes CSS sont présentées dans la documentation du plugin (sous les options, tout en bas de la page) afin que vous ne perdiez pas trop de temps à tout chercher manuellement.
Utilisation de Modal Portfolio avec WordPress
L'utilisation de l'extension est relativement simple et se fait en plusieurs étapes :
- Création des catégories (et sous-catégories si nécessaire) des portfolios. Le seul inconvénient réside dans le fait qu'il peut y avoir des problèmes de gestion si vous allez trop en profondeur dans les sous-catégories, je n'ai pas encore trouvé de solutions adéquates (dans ce cas, certains filtres sautent parfois ainsi que des catégories parentes).
- Création des références en ajoutant les informations nécessaires, à savoir le titre, la description, la catégorie (ou les catégories), le titre de la vignette ainsi que l'image à la Une.
- Utilisation des shortcodes adaptés (voir plus bas) dans les publications pour afficher les galeries.
Le système de shortcode offre deux options à ce jour pour personnaliser l'affichage, et peut s'utiliser ainsi :
- [modal-portfolio] pour tout afficher (catégories parentes et enfants, etc.)
- [modal-portfolio parents=1] pour afficher tout mais aussi les filtres correspondants aux catégories parents (masqués par défaut).
- [modal-portfolio categorie_parente="nom_categorie"] ou [modal-portfolio parent_cat="nom_categorie"] pour afficher uniquement les références associées à la catégories parentes et ses sous-catégories.
Il est possible de combiner les deux options bien entendu mais faites attention si vous utilisez des sous-niveaux trop profonds dans les catégories, je ne garantis pas que tous les bons filtres s'afficheront.
Exemple en live avec des photos et des vidéos (ici, avec le shortcode [modal-portfolio parents=1]) :
Vidéo 3
Vidéo 2
Seconde vidéo importée via une URL YouTube avec une vignette affichée grâce à l'image à la Une
Vidéo 1
Exemple de vidéo importée via une URL YouTube, avec une image à la Une pour faire office de vignette.
Troisième image
Exemple de texte de test pour l'image n°3 !
Seconde image
Exemple de texte de test pour l'image n°2 !
Première image
Exemple de texte de test pour l'image n°1 !
L'avantage des shortcodes est de pouvoir créer plusieurs catégories parentes pour obtenir des galeries ou des portfolios différenciés, puis l'option "categorie_parente" (ou "parent_cat") permet de cibler les références souhaitées selon la publication créée...
Questions fréquentes (update du 11/07/2018)
Il est courant que des utilisateurs me posent des questions à propos du plugin Modal Portfolio. De nombreuses options se sont ajoutées et il convient parfois de chercher un peu pour trouver les réponses. Voici donc quelques "classiques" qui reviennent fréquemment :
- Comment peut-on afficher uniquement l'image ou la vidéo dans la fenêtre modale ? Il suffit d'aller dans les options et de mettre "non" à l'option "Afficher la description dans la fenêtre modale ?", c'est aussi simple que cela.
- Comment faire pour que l'image ou la vidéo occupe 100% de la largeur de la fenêtre (notamment si on masque le texte) ? Il faut aller dans les styles CSS. Soit vous êtes développeur et vous jouez avec les classes CSS correspondantes (.modal-pf-img pour la colonne de gauche, .modal-pf-content pour la colonne de droite, etc.), soit vous utilisez les styles dynamiques (option disponible) et vous jouez avec les styles de la section "Style de la fenêtre modale" (il faut mettre la largeur de la colonne de gauche à "100%", la largeur de la colonne de droite à "0%" et la marge à droite à "0%" également).
- Comment adapter la hauteur de la fenêtre modale à son contenu ? Il faut mettre "auto" dans le style CSS "Hauteur de la fenêtre modale" (style dynamique) ou indiquer "height:auto" dans le CSS (via l'id "#simplemodal-container").
- Comment ordonner les résultats au hasard ? Il suffit de se rendre dans les paramètres additionnels du panneau d'options et de choisir "Au hasard" en ordre d'affichage des images.
Pour lever tout de suite quelques interrogations, il faut bien savoir que l'objectif premier de Modal Portfolio est de proposer des vignettes indépendantes pour afficher des images/vidéos dans une modale, accompagnées d'un texte. Il existe des galeries photos pour ne faire qu'un portfolio "photo" classique si nécessaire. C'est d'ailleurs pour cette raison qu'aucune pagination n'a été prévue, etc.
Idées d'améliorations du plugin
Comme toute extension, Modal Portfolio n'est pas parfaite, et j'ai déjà quelques idées en tête pour améliorer l'ensemble (quand je trouverai le temps de le faire prochainement...) :
- Rajouter d'autres types de modales pour laisser le choix aux utilisateurs. Il faut cependant trouver des fenêtres jQuery qui permettent d'afficher les contenus et pas uniquement des images...
- Penser à un système manuel pour sélectionner les filtres à afficher.
- Ajouter des options supplémentaires dans les shortcodes pour pouvoir différencier quelque peu les affichages définitifs selon les publications et le shortcode utilisé.
- Ajouter des thèmes graphiques pour éviter aux utilisateurs de forcément reprendre le CSS de base ou de devoir éditer leur propre style CSS.