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­fich­er le port­fo­lio d’une graphiste. Après une recherche rapi­de dans le dépôt Word­Press et l’es­sai de quelques exten­sions qui n’ont pas su me con­va­in­cre, j’en suis venu à tester Visu­al Port­fo­lio. Et j’ai été très agréable­ment sur­pris.

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

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

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 utilise son pro­pre type d’ar­ti­cle per­son­nal­isé, éditable avec Guten­berg, mais qui accepte aus­si les autres types d’ar­ti­cles (arti­cles, pages…), les port­fo­lios Jet­pack, qui peut servir à affich­er une galerie d’im­ages tirées de la bib­lio­thèque de médias… bref, une exten­sion bien com­plète.

Visu­al Port­fo­lio est don­né pour com­pat­i­ble avec la dernière ver­sion de Word­Press, autant dire qu’il n’y a pas — a pri­ori — de rai­son de choisir une autre exten­sion pour affich­er son port­fo­lio.

Si vous voulez suiv­re ce tuto­riel et créer votre pro­pre port­fo­lio, vous trou­verez l’ex­ten­sion dans le dépôt Word­Press. Si vous n’avez jamais instal­lé d’ex­ten­sion, je vous recom­mande la lec­ture de l’ar­ti­cle Installer, activ­er, met­tre à jour et sup­primer une exten­sion Word­Press.

Nous allons pass­er 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ésen­ta­tion.

Les réglages de Visual Portfolio

Une fois l’ex­ten­sion activée, vous trou­verez dans le menu latéral de l’ad­min­is­tra­tion de Word­Press une entrée Visu­al Port­fo­lio.

C’est à par­tir de ce sous menu que vous pour­rez créer vos port­fo­lios (que vous pour­rez class­er par caté­gories, et même éti­queter vu qu’il s’ag­it d’un type per­son­nal­isé d’ar­ti­cle ou CPT), les blocs de présen­ta­tion, et en tout pre­mier lieu définir les réglages de l’ex­ten­sion.

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

Si toute­fois l’en­vie vous prend d’aller les mod­i­fi­er, vous trou­verez deux onglets : le pre­mier pour le pré­fixe dans l’url (port­fo­lio, par défaut), les fil­tres per­son­nal­isés et l’im­age par défaut (mais ne pas définir d’im­age à la Une dans un port­fo­lio, ce n’est quand même pas com­mun). Le deux­ième est dédié à l’af­fichage des images sous forme de slid­er avec Pho­to­swipe.

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

Le port­fo­lio, c’est l’ensem­ble des élé­ments que vous souhaitez présen­ter sur votre blog ou votre site. Par exem­ple un flo­rilège de vos réal­i­sa­tions, pour un graphiste, une agence web ou un design­er. Ou pour tout autre type de pro­jet. Comme des pavil­lons pour un cab­i­net d’ar­chi­tectes, des jardins pour un.e paysag­iste, des bou­quets pour un.e fleuriste.

Vous créerez un élé­ment de port­fo­lio comme vous créez un arti­cle, en util­isant Guten­berg, après avoir cliqué sur Por­fo­lio items puis sur Add New. Tous les blocs disponibles pour un arti­cle ou une page sont égale­ment disponibles pour un élé­ment de port­fo­lio.

Les points impor­tants : le titre, et l’im­age à la Une. Libre à vous de rajouter du texte, des pho­tos (ou des galeries de pho­tos), l’essen­tiel est quand même d’avoir une image à affich­er, et un titre pour expliciter l’élé­ment.

Voici à quoi ressem­ble un élé­ment de port­fo­lio en cours d’édi­tion :

Et main­tenant la page ter­minée :

Pour infor­ma­tion, vous trou­verez plus de détails sur le thème i2019 dans l’ar­ti­cle Per­son­nalis­er Twen­ty Nine­teen, et pour la démo (et le télécharge­ment), c’est par ici : i2019.

Si vous utilisez Jet­pack et son mod­ule Port­fo­lio, vous pou­vez faire l’im­passe sur les élé­ments de port­fo­lio de Visu­al Port­fo­lio et utilis­er ceux créés avec Jet­pack.

Les blocs de présentation (Portfolio Layouts)

Je ne sais pas trop com­ment traduire Lay­out dans le cas présent, bloc de présen­ta­tion m’a sem­blé le plus adéquat vu qu’il s’ag­it d’un bloc per­me­t­tant l’af­fichage d’un port­fo­lio au sein d’une page ou d’un arti­cle.

L’in­ter­face prin­ci­pale se trou­ve dans la colonne de droite ; la par­tie habituelle­ment réservée à la saisie ser­vant d’aperçu du bloc que vous obtien­drez en util­isant les divers réglages pro­posés. Ci-dessous les onglets disponibles, que nous allons pass­er en revue un à un :

En aparté, la galerie ci-dessus a été réal­isée avec Visu­al Port­fo­lio, en util­isant la dis­po­si­tion Mason­ry. 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 pris­es et de leur nom­bre. À vous d’ef­fectuer des essais jusqu’à trou­ver la meilleure présen­ta­tion pos­si­ble.

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

L’ex­ten­sion est prête pour la tra­duc­tion, si vous ne voulez pas régler à chaque fois vos textes par défaut, passez par Loco Trans­late par exem­ple pour traduire a min­i­ma les chaînes dont vous avez l’u­til­ité. J’en ai effec­tué une par­tie (env­i­ron 64% des 204 chaînes), dont les textes par défaut et les chaînes utiles à l’af­fichage au sein des élé­ments de port­fo­lio. Ce n’est pas très com­pliqué, mais cela prend du temps.

Name & Shortcode

En français, nom et code court. Vous avez à bap­tis­er votre port­fo­lio, et c’est lui qui vous délivr­era un code court (short­code) à insér­er dans vos pages et arti­cles.

Layout

Peut être traduit par mod­èle. Vous avez le choix entre Grid, Mason­ry, Jus­ti­fied, Slid­er ou Tiles.

Gap per­met de régler l’e­space­ment entre les dia­pos­i­tives, Items per page le nom­bre d’élé­ments de por­fo­lio à affich­er en une seule passe, et Stretch per­met de s’af­franchir de la largeur nor­male de la page.

Items Style

Vous pou­vez choisir entre plusieurs effets au sur­vol des dia­pos­i­tives : Default, Fly, Emerge ou Fade. L’op­tion Over­lay back­ground col­or et Over­lay Text Col­or, un peu plus bas dans le même onglet, définis­sent respec­tive­ment la couleur de super­po­si­tion (avec ges­tion de la trans­parence) et la couleur du texte lié.

Show excerpt per­met d’af­fich­er l’ex­trait dans le cas d’un élé­ment de port­fo­lio ou d’un arti­cle. En acti­vant Show icon vous aurez une jolie icone (à choisir dans les icones fontawe­some v5) au beau milieu de la dia­pos­i­tive, au sur­vol. Une icone pour les images, une pour les vidéos. Que deman­der de plus ?

Une longueur per­son­nal­isée de l’ex­trait ? Vous l’avez avec Excerpt words count ! La pos­si­bil­ité d’af­fich­er la date de paru­tion ? C’est égale­ment prévu ! Au final, vous pou­vez per­son­nalis­er à l’en­vi votre port­fo­lio…

Item Click Action

Tout sim­ple­ment l’ac­tion à effectuer quand on clic-clic-clique sur la diapo. On ne fait rien. Ou on redirige vers l’URL (de l’im­age, du port­fo­lio, de l’ar­ti­cle). Sur la même page, ou dans un nou­v­el onglet. Ou on choisit d’af­fich­er l’im­age ou la vidéo en pleine page dans une pop­up.

Filter

Pour affich­er une seule caté­gorie, ou tout, au pre­mier affichage (quand il y en a plusieurs). L’in­con­vénient, c’est que l’ex­ten­sion est un peu bébête, s’il n’y a qu’une seule caté­gorie, elle affichera quand même All (Tout) à moins de dés­ac­tiv­er le fil­tre. À not­er que All peut (doit) être traduit. Et que cette tra­duc­tion inter­vient au niveau du mod­èle. Vous pou­vez donc choisir un texte dif­férent pour chaque port­fo­lio.

En fonc­tion du fil­tre appliqué, vous aurez un code court à copi­er / coller. Mais à ce que j’ai pu remar­quer, le fil­tre est géré à la base, lorsque l’on demande l’af­fichage d’un port­fo­lio dans Guten­berg.

Pagination

Enfin un mot anglais facile à com­pren­dre ! Tiens, pour le coup, je ne vais même pas le traduire 😉 Essayez juste de ne pas en écorcher la pronon­ci­a­tion (pæʤɪˈneɪʃən en alpha­bet phoné­tique).

Vous pou­vez donc activ­er ou dés­ac­tiv­er la pag­i­na­tion, choisir entre une pag­i­na­tion clas­sique avec des nom­bres, une pag­i­na­tion de type “charg­er la suite” ou un scroll infi­ni (atten­tion si votre galerie est longue comme un jour sans pain).

Pour la pag­i­na­tion aus­si vous pou­vez gér­er le texte à affich­er port­fo­lio par port­fo­lio.

Voici un bloc Port­fo­lio, avec des élé­ments de port­fo­lio :

La gestion de Visual Portfolio dans Gutenberg

Pour insér­er un bloc précédem­ment créé, vous trou­verez un bloc dédié dans les blocs com­muns :

Le port­fo­lio peut égale­ment servir à affich­er les arti­cles, avec un fil­trage par caté­gorie comme dans l’ex­em­ple ci-dessous :

Le port­fo­lio suiv­ant n’est pas à pro­pre­ment par­ler un port­fo­lio mais une galerie ; j’ai choisi de l’af­fich­er en “grande largeur”. Les images, libres de droits, vien­nent de Pix­abay.

La même galerie, en largeur nor­male (réglage Guten­berg), avec le mod­èle Jus­ti­fied :

Dans Guten­berg, j’ai opté pour une largeur nor­male. Mais dans le slid­er, j’ai activé l’op­tion stretch, et le slid­er s’af­fiche donc en pleine largeur, sans tenir compte de la mise en page décidée par Guten­berg.

Si vous êtes arrivé.e en fin de galerie, vous aurez remar­qué que la derniè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 ‘absolue’. On aurait pu — pour une fois — avoir mieux avec Jet­pack mais il faut dans ce cas faire l’impasse sur les effets au sur­vol, sur le charge­ment par­tiel, sur Pho­to­swipe et se con­tenter de la pop­up dédiée à Jet­pack — à moins de pass­er à la caisse et de pay­er $19 pour avoir une exten­sion com­pat­i­ble de chez dfac­to­ry, que je vous présente rapi­de­ment dans l’ar­ti­cle Des exten­sions gra­tu­ites pour créer une galerie pho­to attrayante.

Pour finir voici la même galerie d’im­ages sous forme de slid­er, le dernier mod­èle pro­posé par Visu­al Port­fo­lio :

Il y a 3 types de slid­ers : cov­er­flow (ci-dessus), slide ou fade. Pour un besoin ponctuel, il peut faire l’af­faire. Mais vous noterez l’ef­fet d’escalier sur les images de côté. Ce n’est pas le nec plus ultra des slid­ers. Il dépanne, et c’est déjà bien.

Pour la présen­ta­tion en slid­er, je vous con­seille de charg­er toutes les images, et de met­tre un texte expli­catif ou un espace insé­ca­ble dans la zone de texte de fin de charge­ment (par défaut : You’ve reached the end of the list).

La gestion des blocs Visual Portfolio dans Elementor

Il n’y a pas de bloc dédié, vous devrez pass­er par le bloc code court dans lequel vous insér­erez le short­code. L’af­fichage se fait cor­recte­ment, tant dans Ele­men­tor 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 !

Pre­mier con­stat à l’u­til­i­sa­tion, qui vaut pour la grande majorité des exten­sions util­isant une light­box : on ne peut pas utilis­er plusieurs exten­sions de type galerie sur une même page. Donc on ne peut pas utilis­er Visu­al Port­fo­lio et une galerie, il fau­dra choisir.

Sans une solu­tion de ges­tion d’ac­ti­va­tion à la demande des exten­sions telle que Plu­g­in Orga­niz­er, il fau­dra égale­ment s’en tenir à une seule exten­sion pour l’ensem­ble de votre site.

La plu­part du temps, j’u­tilise Jus­ti­fied Gallery pour illus­tr­er mes arti­cles (quand j’ai besoin d’une galerie). Dans cet arti­cle, j’ai créé ma galerie d’il­lus­tra­tion via Visu­al Port­fo­lio, donc en dehors de l’ar­ti­cle. J’ai dés­ac­tivé l’une et activé l’autre.

Sec­ond point noir, il sem­ble que Visu­al Port­fo­lio inter­fère avec d’autres exten­sions. J’ai noté une incom­pat­i­bil­ité entre HT Mega – Ulti­mate Addons for Ele­men­tor Page Builder et Visu­al Port­fo­lio, par exem­ple : la sec­onde prend le pas sur la pre­mière au niveau des CSS, lié à une ges­tion trop général­iste de cer­taines balis­es ou à un con­flit lié aux polices fontawe­some en ver­sion 4.7 dans un cas, en ver­sion 5 dans l’autre.

Deux exten­sions gra­tu­ites, très utiles, mais à ne pas utilis­er sur une même page (enfin, en fonc­tion des mod­ules activés sur HT Mega).

Troisième point noir : le slid­er n’est pas un mod­èle du genre. Il faut précharg­er toutes les images, il y a un effet d’escalier si on choisit l’op­tion cov­er­flow, et il faut trich­er pour le texte en dessous du slid­er. C’est claire­ment un slid­er de dépan­nage : si vous avez un besoin récur­rent de slid­ers, prenez une exten­sion dédiée.

En conclusion

En dehors de ces trois points, je n’ai pas noté de prob­lème par­ti­c­uli­er.

Que dire d’autre ? Visual Port­fo­lio fait ce qu’on lui demande, le fait plutôt bien et ces lim­i­ta­tions sont bien min­imes au vu du prix et des ser­vices ren­dus. L’es­say­er, c’est pren­dre un seul risque — celui de l’adopter 😉

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