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 projet, j’ai eu besoin d’af­fi­cher le port­fo­lio d’une graphiste. 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 à tester Visual Portfolio. Et j’ai été très agréa­ble­ment surpris.

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

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

Non, c’est une exten­sion complète, avec diffé­rents modèles de présen­ta­tion de port­fo­lios, qui utilise son propre type d’ar­ticle person­na­lisé, éditable avec Gutenberg, mais qui accepte aussi les autres types d’ar­ticles (articles, pages…), les port­fo­lios Jetpack, qui peut servir à affi­cher une gale­rie d’images tirées de la biblio­thèque de médias… bref, une exten­sion bien complète.

Visual Portfolio est donné pour compa­tible avec la dernière version de WordPress, autant dire qu’il n’y a pas – a priori – de raison de choi­sir une autre exten­sion pour affi­cher son portfolio.

Si vous voulez 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’avez jamais installé d’ex­ten­sion, je vous recom­mande la lecture de l’ar­ticle Installer, acti­ver, mettre à jour et suppri­mer une exten­sion WordPress.

Nous allons passer 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 à partir 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 étique­ter vu qu’il s’agit d’un type person­na­lisé d’ar­ticle ou CPT), les blocs de présen­ta­tion, et en tout premier lieu défi­nir les réglages de l’extension. 

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

Si toute­fois l’en­vie vous prend d’al­ler les modi­fier, vous trou­ve­rez deux onglets : le premier pour le préfixe dans l’url (port­fo­lio, par défaut), les filtres person­na­li­sés et l’image par défaut (mais ne pas défi­nir d’image à la Une dans un port­fo­lio, ce n’est quand même pas commun). Le deuxième est dédié à l’af­fi­chage des images sous forme de slider 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 souhai­tez présen­ter sur votre blog ou votre site. Par exemple un flori­lège de vos réali­sa­tions, pour un graphiste, une agence web ou un desi­gner. Ou pour tout autre type de projet. Comme des pavillons pour un cabi­net d’ar­chi­tectes, des jardins pour un.e paysa­giste, des bouquets pour un.e fleuriste.

Vous crée­rez un élément de port­fo­lio comme vous créez un article, en utili­sant Gutenberg, après avoir cliqué sur Porfolio items puis sur Add New. Tous les blocs dispo­nibles pour un article ou une page sont égale­ment dispo­nibles pour un élément de portfolio.

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

Voici à quoi ressemble 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 utili­sez Jetpack et son module Portfolio, vous pouvez faire l’im­passe sur les éléments de port­fo­lio de Visual Portfolio et utili­ser ceux créés avec Jetpack.

Les blocs de présentation (Portfolio Layouts)

Je ne sais pas trop comment traduire Layout dans le cas présent, bloc de présen­ta­tion m’a semblé le plus adéquat vu qu’il s’agit d’un bloc permet­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 partie habi­tuel­le­ment réser­vée à la saisie servant d’aperçu du bloc que vous obtien­drez en utili­sant les divers réglages propo­sés. Ci-dessous les onglets dispo­nibles, que nous allons passer en revue un à un :

En aparté, la gale­rie ci-dessus a été réali­sée avec Visual Portfolio, en utili­sant la dispo­si­tion Masonry. Pour des captures de portions d’écran, il n’y a pas d’ex­ten­sion parfaite ou de modèle à recom­man­der, tout dépend des captures prises et de leur nombre. À vous d’ef­fec­tuer des essais jusqu’à trou­ver la meilleure présen­ta­tion possible.

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

L’extension est prête pour la traduc­tion, si vous ne voulez pas régler à chaque fois vos textes par défaut, passez par Loco Translate par exemple pour traduire a minima les chaînes dont vous avez l’uti­lité. J’en ai effec­tué une partie (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 compli­qué, mais cela prend du temps.

Name & Shortcode

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

Layout

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

Gap permet de régler l’es­pa­ce­ment entre les diapo­si­tives, Items per page le nombre d’élé­ments de porfo­lio à affi­cher en une seule passe, et Stretch permet de s’af­fran­chir de la largeur normale de la page.

Items Style

Vous pouvez choi­sir entre plusieurs effets au survol des diapo­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 respec­ti­ve­ment la couleur de super­po­si­tion (avec gestion de la trans­pa­rence) et la couleur du texte lié.

Show excerpt permet 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 fonta­we­some v5) au beau milieu de la diapo­si­tive, au survol. Une icone pour les images, une pour les vidéos. Que deman­der de plus ?

Une longueur person­na­li­sée de l’ex­trait ? Vous l’avez avec Excerpt words count ! La possi­bi­lité d’af­fi­cher la date de paru­tion ? C’est égale­ment prévu ! Au final, vous pouvez person­na­li­ser à l’envi votre port­fo­lio…

Item Click Action

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

Filter

Pour affi­cher une seule caté­go­rie, ou tout, au premier affi­chage (quand il y en a plusieurs). 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­chera quand même All (Tout) à moins de désac­ti­ver le filtre. À noter que All peut (doit) être traduit. Et que cette traduc­tion inter­vient au niveau du modèle. Vous pouvez donc choi­sir un texte diffé­rent pour chaque portfolio.

En fonc­tion du filtre appli­qué, vous aurez un code court à copier / coller. 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 à comprendre ! Tiens, pour le coup, je ne vais même pas le traduire 😉 Essayez juste de ne pas en écor­cher la pronon­cia­tion (pæʤɪˈ­neɪʃən en alpha­bet phonétique).

Vous pouvez 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 infini (atten­tion si votre gale­rie est longue comme un jour sans pain).

Pour la pagi­na­tion aussi vous pouvez 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 communs :

Le port­fo­lio peut égale­ment servir à affi­cher les articles, avec un filtrage par caté­go­rie comme dans l’exemple ci-dessous :

Le port­fo­lio suivant n’est pas à propre­ment parler un port­fo­lio mais une gale­rie ; j’ai choisi de l’af­fi­cher en « grande largeur ». Les images, libres de droits, viennent de Pixabay.

La même gale­rie, en largeur normale (réglage Gutenberg), avec le modèle Justified :

Dans Gutenberg, j’ai opté pour une largeur normale. Mais dans le slider, j’ai activé l’op­tion stretch, et le slider s’af­fiche donc en pleine largeur, 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 dernière image n’est pas justi­fiée. Un choix qui se défend, l’esthétique n’est pas forcé­ment au rendez-vous quand on est en justi­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 survol, sur le char­ge­ment partiel, sur Photoswipe et se conten­ter de la popup dédiée à Jetpack – à moins de passer à la caisse et de payer $19 pour avoir une exten­sion compa­tible de chez dfac­tory, que je vous présente rapi­de­ment dans l’ar­ticle Des exten­sions gratuites pour créer une gale­rie photo attrayante.

Pour finir voici la même gale­rie d’images sous forme de slider, le dernier modèle proposé par Visual Portfolio :

Il y a 3 types de sliders : cover­flow (ci-dessus), 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 sliders. Il dépanne, et c’est déjà bien.

Pour la présen­ta­tion en slider, 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