Visual Portfolio

Votre portfolio met en valeur vos expériences, vos créations. Et pour mettre en valeur votre portfolio, il y a Visual Portfolio. À essayer sans tarder…

Cet article prend 9 minutes à lire et comporte 2008 mots.

Lors d’un récent pro­jet, j’ai eu besoin d’af­fi­cher le port­fo­lio d’une gra­phiste. Après une recherche rapide dans le dépôt WordPress et l’es­sai de quelques exten­sions qui n’ont pas su me convaincre, j’en suis venu à tes­ter Visual Portfolio. Et j’ai été très agréa­ble­ment surpris.

Si cette exten­sion affiche plus de 10 000 ins­tal­la­tions actives, elle ne fait pas pour autant par­tie des poids lourds du mar­ché. Et pour­tant… elle a tout d’une grande — à l’ex­cep­tion du prix, vu qu’elle est gra­tuite de chez gratuite.

Ce n’est pas une exten­sion en ver­sion allé­gée, avec deux fonc­tion­na­li­tés au rabais et une ver­sion pro qui vous fait baver d’envie.

Non, c’est une exten­sion com­plète, avec dif­fé­rents modèles de pré­sen­ta­tion de port­fo­lios, qui uti­lise son propre type d’ar­ticle per­son­na­li­sé, édi­table avec Gutenberg, mais qui accepte aus­si les autres types d’ar­ticles (articles, pages…), les port­fo­lios Jetpack, qui peut ser­vir à affi­cher une gale­rie d’i­mages tirées de la biblio­thèque de médias… bref, une exten­sion bien complète.

Visual Portfolio, Photo Gallery & Post Grid

Auteur(s) : Visual Portfolio Team

Version actuelle : 3.3.10

Dernière mise à jour : 1 octobre 2024

visual-portfolio.3.3.10.zip

96%Évaluations 70 000+Installations WP 6.2+Nécessaire

Visual Portfolio est don­né pour com­pa­tible avec la der­nière ver­sion de WordPress, autant dire qu’il n’y a pas — a prio­ri — de rai­son de choi­sir une autre exten­sion pour affi­cher son portfolio.

Si vous vou­lez suivre ce tuto­riel et créer votre propre port­fo­lio, vous trou­ve­rez l’ex­ten­sion dans le dépôt WordPress. Si vous n’a­vez jamais ins­tal­lé d’ex­ten­sion, je vous recom­mande la lec­ture de l’ar­ticle Installer, acti­ver, mettre à jour et sup­pri­mer une exten­sion WordPress.

Nous allons pas­ser en revue les réglages de l’ex­ten­sion, la créa­tion d’un port­fo­lio, et la créa­tion d’un bloc de présentation.

Les réglages de Visual Portfolio

Une fois l’ex­ten­sion acti­vée, vous trou­ve­rez dans le menu laté­ral de l’ad­mi­nis­tra­tion de WordPress une entrée Visual Portfolio.

C’est à par­tir de ce sous menu que vous pour­rez créer vos port­fo­lios (que vous pour­rez clas­ser par caté­go­ries, et même éti­que­ter vu qu’il s’a­git d’un type per­son­na­li­sé d’ar­ticle ou CPT), les blocs de pré­sen­ta­tion, et en tout pre­mier lieu défi­nir les réglages de l’extension. 

Je vais être hon­nête : inutile d’al­ler tou­cher aux réglages, l’ex­ten­sion est très bien telle quelle. 

Si tou­te­fois l’en­vie vous prend d’al­ler les modi­fier, vous trou­ve­rez deux onglets : le pre­mier pour le pré­fixe dans l’url (port­fo­lio, par défaut), les filtres per­son­na­li­sés et l’i­mage par défaut (mais ne pas défi­nir d’i­mage à la Une dans un port­fo­lio, ce n’est quand même pas com­mun). Le deuxième est dédié à l’af­fi­chage des images sous forme de sli­der avec Photoswipe.

La création d’un élément de portfolio

Le port­fo­lio, c’est l’en­semble des élé­ments que vous sou­hai­tez pré­sen­ter sur votre blog ou votre site. Par exemple un flo­ri­lège de vos réa­li­sa­tions, pour un gra­phiste, une agence web ou un desi­gner. Ou pour tout autre type de pro­jet. Comme des pavillons pour un cabi­net d’ar­chi­tectes, des jar­dins pour un.e pay­sa­giste, des bou­quets pour un.e fleuriste.

Vous crée­rez un élé­ment de port­fo­lio comme vous créez un article, en uti­li­sant Gutenberg, après avoir cli­qué sur Porfolio items puis sur Add New. Tous les blocs dis­po­nibles pour un article ou une page sont éga­le­ment dis­po­nibles pour un élé­ment de portfolio.

Les points impor­tants : le titre, et l’i­mage à la Une. Libre à vous de rajou­ter du texte, des pho­tos (ou des gale­ries de pho­tos), l’es­sen­tiel est quand même d’a­voir une image à affi­cher, et un titre pour expli­ci­ter l’élément.

Voici à quoi res­semble un élé­ment de port­fo­lio en cours d’édition :

Et main­te­nant la page terminée :

Pour infor­ma­tion, vous trou­ve­rez plus de détails sur le thème i2019 dans l’ar­ticle Personnaliser Twenty Nineteen, et pour la démo (et le télé­char­ge­ment), c’est par ici : i2019.

Si vous uti­li­sez Jetpack et son module Portfolio, vous pou­vez faire l’im­passe sur les élé­ments de port­fo­lio de Visual Portfolio et uti­li­ser ceux créés avec Jetpack.

Les blocs de présentation (Portfolio Layouts)

Je ne sais pas trop com­ment tra­duire Layout dans le cas pré­sent, bloc de pré­sen­ta­tion m’a sem­blé le plus adé­quat vu qu’il s’a­git d’un bloc per­met­tant l’af­fi­chage d’un port­fo­lio au sein d’une page ou d’un article.

L’interface prin­ci­pale se trouve dans la colonne de droite ; la par­tie habi­tuel­le­ment réser­vée à la sai­sie ser­vant d’a­per­çu du bloc que vous obtien­drez en uti­li­sant les divers réglages pro­po­sés. Ci-des­sous les onglets dis­po­nibles, que nous allons pas­ser en revue un à un :

En apar­té, la gale­rie ci-des­sus a été réa­li­sée avec Visual Portfolio, en uti­li­sant la dis­po­si­tion Masonry. Pour des cap­tures de por­tions d’é­cran, il n’y a pas d’ex­ten­sion par­faite ou de modèle à recom­man­der, tout dépend des cap­tures prises et de leur nombre. À vous d’ef­fec­tuer des essais jus­qu’à trou­ver la meilleure pré­sen­ta­tion possible.

Intéressons-nous donc aux écrans ci-des­sus. Les titres sont en anglais, l’ex­ten­sion n’est pas (encore) traduite.

L’extension est prête pour la tra­duc­tion, si vous ne vou­lez pas régler à chaque fois vos textes par défaut, pas­sez par Loco Translate par exemple pour tra­duire a mini­ma les chaînes dont vous avez l’u­ti­li­té. J’en ai effec­tué une par­tie (envi­ron 64% des 204 chaînes), dont les textes par défaut et les chaînes utiles à l’af­fi­chage au sein des élé­ments de port­fo­lio. Ce n’est pas très com­pli­qué, mais cela prend du temps.

Name & Shortcode

En fran­çais, nom et code court. Vous avez à bap­ti­ser votre port­fo­lio, et c’est lui qui vous déli­vre­ra un code court (short­code) à insé­rer dans vos pages et articles.

Layout

Peut être tra­duit par modèle. Vous avez le choix entre Grid, Masonry, Justified, Slider ou Tiles.

Gap per­met de régler l’es­pa­ce­ment entre les dia­po­si­tives, Items per page le nombre d’élé­ments de por­fo­lio à affi­cher en une seule passe, et Stretch per­met de s’af­fran­chir de la lar­geur nor­male de la page.

Items Style

Vous pou­vez choi­sir entre plu­sieurs effets au sur­vol des dia­po­si­tives : Default, Fly, Emerge ou Fade. L’option Overlay back­ground color et Overlay Text Color, un peu plus bas dans le même onglet, défi­nissent res­pec­ti­ve­ment la cou­leur de super­po­si­tion (avec ges­tion de la trans­pa­rence) et la cou­leur du texte lié.

Show excerpt per­met d’af­fi­cher l’ex­trait dans le cas d’un élé­ment de port­fo­lio ou d’un article. En acti­vant Show icon vous aurez une jolie icone (à choi­sir dans les icones fon­ta­we­some v5) au beau milieu de la dia­po­si­tive, au sur­vol. Une icone pour les images, une pour les vidéos. Que deman­der de plus ?

Une lon­gueur per­son­na­li­sée de l’ex­trait ? Vous l’a­vez avec Excerpt words count ! La pos­si­bi­li­té d’af­fi­cher la date de paru­tion ? C’est éga­le­ment pré­vu ! Au final, vous pou­vez per­son­na­li­ser à l’en­vi votre port­fo­lio…

Item Click Action

Tout sim­ple­ment l’ac­tion à effec­tuer quand on clic-clic-clique sur la dia­po. On ne fait rien. Ou on redi­rige vers l’URL (de l’i­mage, du port­fo­lio, de l’ar­ticle). Sur la même page, ou dans un nou­vel onglet. Ou on choi­sit d’af­fi­cher l’i­mage ou la vidéo en pleine page dans une popup.

Filter

Pour affi­cher une seule caté­go­rie, ou tout, au pre­mier affi­chage (quand il y en a plu­sieurs). L’inconvénient, c’est que l’ex­ten­sion est un peu bébête, s’il n’y a qu’une seule caté­go­rie, elle affi­che­ra quand même All (Tout) à moins de désac­ti­ver le filtre. À noter que All peut (doit) être tra­duit. Et que cette tra­duc­tion inter­vient au niveau du modèle. Vous pou­vez donc choi­sir un texte dif­fé­rent pour chaque portfolio.

En fonc­tion du filtre appli­qué, vous aurez un code court à copier / col­ler. Mais à ce que j’ai pu remar­quer, le filtre est géré à la base, lorsque l’on demande l’af­fi­chage d’un port­fo­lio dans Gutenberg.

Pagination

Enfin un mot anglais facile à com­prendre ! Tiens, pour le coup, je ne vais même pas le tra­duire 😉 Essayez juste de ne pas en écor­cher la pro­non­cia­tion (pæʤɪˈ­neɪʃən en alpha­bet phonétique).

Vous pou­vez donc acti­ver ou désac­ti­ver la pagi­na­tion, choi­sir entre une pagi­na­tion clas­sique avec des nombres, une pagi­na­tion de type « char­ger la suite » ou un scroll infi­ni (atten­tion si votre gale­rie est longue comme un jour sans pain).

Pour la pagi­na­tion aus­si vous pou­vez gérer le texte à affi­cher port­fo­lio par portfolio.

Voici un bloc Portfolio, avec des élé­ments de portfolio :

La gestion de Visual Portfolio dans Gutenberg

Pour insé­rer un bloc pré­cé­dem­ment créé, vous trou­ve­rez un bloc dédié dans les blocs com­muns :

Le port­fo­lio peut éga­le­ment ser­vir à affi­cher les articles, avec un fil­trage par caté­go­rie comme dans l’exemple ci-dessous :

Le port­fo­lio sui­vant n’est pas à pro­pre­ment par­ler un port­fo­lio mais une gale­rie ; j’ai choi­si de l’af­fi­cher en « grande lar­geur ». Les images, libres de droits, viennent de Pixabay.

La même gale­rie, en lar­geur nor­male (réglage Gutenberg), avec le modèle Justified :

Dans Gutenberg, j’ai opté pour une lar­geur nor­male. Mais dans le sli­der, j’ai acti­vé l’op­tion stretch, et le sli­der s’af­fiche donc en pleine lar­geur, sans tenir compte de la mise en page déci­dée par Gutenberg.

Si vous êtes arrivé.e en fin de gale­rie, vous aurez remar­qué que la der­nière image n’est pas jus­ti­fiée. Un choix qui se défend, l’esthétique n’est pas for­cé­ment au ren­dez-vous quand on est en jus­ti­fi­ca­tion ‘abso­lue’. On aurait pu — pour une fois — avoir mieux avec Jetpack mais il faut dans ce cas faire l’impasse sur les effets au sur­vol, sur le char­ge­ment par­tiel, sur Photoswipe et se conten­ter de la popup dédiée à Jetpack — à moins de pas­ser à la caisse et de payer $19 pour avoir une exten­sion com­pa­tible de chez dfac­to­ry, que je vous pré­sente rapi­de­ment dans l’ar­ticle Des exten­sions gra­tuites pour créer une gale­rie pho­to attrayante.

Pour finir voi­ci la même gale­rie d’i­mages sous forme de sli­der, le der­nier modèle pro­po­sé par Visual Portfolio :

Il y a 3 types de sli­ders : cover­flow (ci-des­sus), slide ou fade. Pour un besoin ponc­tuel, il peut faire l’af­faire. Mais vous note­rez l’ef­fet d’es­ca­lier sur les images de côté. Ce n’est pas le nec plus ultra des sli­ders. Il dépanne, et c’est déjà bien.

Pour la pré­sen­ta­tion en sli­der, je vous conseille de char­ger toutes les images, et de mettre un texte expli­ca­tif ou un espace insé­cable dans la zone de texte de fin de char­ge­ment (par défaut : You’ve rea­ched the end of the list).

La gestion des blocs Visual Portfolio dans Elementor

Il n’y a pas de bloc dédié, vous devrez pas­ser par le bloc code court dans lequel vous insé­re­rez le short­code. L’affichage se fait cor­rec­te­ment, tant dans Elementor que dans la page générée.

Les points noirs

Alors, aurais-je trou­vé l’ex­ten­sion par­faite, le nec plus ultra du port­fo­lio ? Pas si vite ! 

Premier constat à l’u­ti­li­sa­tion, qui vaut pour la grande majo­ri­té des exten­sions uti­li­sant une light­box : on ne peut pas uti­li­ser plu­sieurs exten­sions de type gale­rie sur une même page. Donc on ne peut pas uti­li­ser Visual Portfolio et une gale­rie, il fau­dra choisir.

Sans une solu­tion de ges­tion d’ac­ti­va­tion à la demande des exten­sions telle que Plugin Organizer, il fau­dra éga­le­ment s’en tenir à une seule exten­sion pour l’en­semble de votre site.

La plu­part du temps, j’u­ti­lise Justified Gallery pour illus­trer mes articles (quand j’ai besoin d’une gale­rie). Dans cet article, j’ai créé ma gale­rie d’illus­tra­tion via Visual Portfolio, donc en dehors de l’ar­ticle. J’ai désac­ti­vé l’une et acti­vé l’autre.

Second point noir, il semble que Visual Portfolio inter­fère avec d’autres exten­sions. J’ai noté une incom­pa­ti­bi­li­té entre HT Mega – Ultimate Addons for Elementor Page Builder et Visual Portfolio, par exemple : la seconde prend le pas sur la pre­mière au niveau des CSS, lié à une ges­tion trop géné­ra­liste de cer­taines balises ou à un conflit lié aux polices fon­ta­we­some en ver­sion 4.7 dans un cas, en ver­sion 5 dans l’autre. 

Deux exten­sions gra­tuites, très utiles, mais à ne pas uti­li­ser sur une même page (enfin, en fonc­tion des modules acti­vés sur HT Mega).

Troisième point noir : le sli­der n’est pas un modèle du genre. Il faut pré­char­ger toutes les images, il y a un effet d’es­ca­lier si on choi­sit l’op­tion cover­flow, et il faut tri­cher pour le texte en des­sous du sli­der. C’est clai­re­ment un sli­der de dépan­nage : si vous avez un besoin récur­rent de sli­ders, pre­nez une exten­sion dédiée.

En conclusion

En dehors de ces trois points, je n’ai pas noté de pro­blème particulier.

Que dire d’autre ? Visual Portfolio fait ce qu’on lui demande, le fait plu­tôt bien et ces limi­ta­tions sont bien minimes au vu du prix et des ser­vices ren­dus. L’essayer, c’est prendre un seul risque — celui de l’adopter 😉

Et vous, avez-vous déjà adop­té Visual Portfolio pour pré­sen­ter vos port­fo­lios ou vos gale­ries d’images ? Ou avez-vous une autre exten­sion qui fait l’af­faire (peut-être mieux d’ailleurs) ?