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

Menu Visual Portfolio
Menu 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 :

Élément de portfolio - Édition
Élément de port­fo­lio – Édition

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

Élément de portfolio - Affichage
Élément de port­fo­lio – Affichage

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 :

Bloc Gutenberg
Bloc Gutenberg

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 char­ge­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 passer par le bloc code court dans lequel vous insé­re­rez le short­code. L’affichage se fait correc­te­ment, tant dans Elementor que dans la page générée.

Les points noirs

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

Premier constat à l’uti­li­sa­tion, qui vaut pour la grande majo­rité des exten­sions utili­sant une light­box : on ne peut pas utili­ser plusieurs exten­sions de type gale­rie sur une même page. Donc on ne peut pas utili­ser Visual Portfolio et une gale­rie, il faudra choisir.

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

La plupart du temps, j’uti­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­tivé l’une et activé 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­lité entre HT Mega – Ultimate Addons for Elementor Page Builder et Visual Portfolio, par exemple : la seconde prend le pas sur la première au niveau des CSS, lié à une gestion trop géné­ra­liste de certaines balises ou à un conflit lié aux polices fonta­we­some en version 4.7 dans un cas, en version 5 dans l’autre. 

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

Troisième point noir : le slider 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 tricher pour le texte en dessous du slider. C’est clai­re­ment un slider de dépan­nage : si vous avez un besoin récur­rent de sliders, prenez une exten­sion dédiée.

En conclusion

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

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

Et vous, avez-vous déjà adopté 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) ?

18 réflexions sur “Visual Portfolio”

  1. [es] Hola, he tradu­cido tu comen­ta­rio al inglés y al fran­cés para que todos puedan enten­der tu pregunta y mi respuesta. Simplemente, en Portfolio Elements, busque Diseño en la confi­gu­ra­ción del bloque y haga clic en el pequeño botón « + ». Se abre una ventana emer­gente que le permite crear un filtro.

    [en] Hello, I have trans­la­ted your comment in English and French so that everyone can unders­tand your ques­tion and my answer. Simply, in Portfolio Elements, look for Layout in the block settings, and click on the little « + » button. A popup opens and allows you to create a filter.

    [fr] Bonjour, j’ai traduit votre commen­taire en anglais et en fran­çais pour que tout le monde puisse comprendre votre ques­tion et ma réponse. Il suffit, dans Éléments du Portfolio, de cher­cher Mise en page dans les réglages du bloc, et de cliquer sur le petit bouton « + ». Une popup s’ouvre et permet de créer un filtre.

  2. [es] Hola ¿cómo puedo hacer un filtrado por cate­goría a mi galería de fotos ? Tengo la galería e hice las distin­tas cate­gorías pero no veo ninguna opción que me permita hacerlo.

    [en] Hello, how can I filter my photo gallery by cate­gory ? I have the gallery and I made the different cate­go­ries but I don’t see any option that allows me to do it.

    [fr] Bonjour, comment puis-je filtrer ma gale­rie photo par caté­go­rie ? J’ai la gale­rie et j’ai fait les diffé­rentes caté­go­ries mais je ne vois aucune option qui me permette de le faire.

  3. Bonjour,
    J’ai le même souci, je souhaite chan­ger la couleur du texte du filtre sélec­tionné. La couleur par défaut est le bleu de Visual Portfolio et souhaite la chan­ger. J’ai testé ce que vous dites dans votre réponse, « Descendez jusqu’à Style de l’élément, puis trou­vez Couleur d’arrière-plan de la super­po­si­tion. », cepen­dant cela me change la couleur du texte à l’in­té­rieur de mes visuels et non sur le filtre… Comment faire ?

  4. C’est possible dans l’on­glet bloc de la barre laté­rale à droite. Descendez jusqu’à Style de l’élé­ment, puis trou­vez Couleur d’arrière-plan de la super­po­si­tion.

  5. Bonjour,
    je voulais savoir si il était possible de chan­ger la couleur du texte que l’on trouve dans le filtre ? La couleur de base est bleue mais ne convient pas du tout avec l’am­biance de mon site et je ne vois pas où je peux faire cette modi­fi­ca­tion (je précise que j’ai version gratuite de l’extension). 

    Merci

  6. Bonjour, oui c’est possible, avec une règle de redi­rec­tion. Par contre, tout dépend du type de redi­rec­tion que vous souhai­tez mettre en place. Il faudrait que vous m’en disiez plus pour que je puisse vous répondre correctement.

  7. En bas de chaque layout, vous avez les classes CSS à modifier :

    Available classes:
    .vp-id-20 - use this classname for each styles you added. It is the main Visual Portfolio wrapper.
    .vp-id-20 .vp-portfolio__items - items wrapper.
    .vp-id-20 .vp-portfolio__item - single item wrapper.
    .vp-id-20 .vp-filter - filter wrapper.
    .vp-id-20 .vp-pagination - pagination wrapper.

    .vp-id-20 corres­pond à ce layout en parti­cu­lier. Si vous souhai­tez modi­fier pour l’en­semble du site, utili­sez unique­ment la deuxième classe, .vp-pagination par exemple.

  8. j’ai pu me débrouiller avec Grid, merci.
    Dernière chose mon port­fo­lio se compose d’offres d’emploi et la mise en page du texte n’est pas respec­tée lors de l’af­fi­chage de l’ex­trait dans ma grille.
    j’ai essayé avec des balises html mais sans succès, y a t’il un moyen d’af­fi­cher l’ex­cerpt avec la mise en page ?
    merci

  9. Si, j’ai fait une mise à jour du plugin et j’ai bien le grid, mais le problème reste la taille de chaque item qui n’est pas la même en hauteur.

  10. Bonjour,
    Désolé pour cette réponse tardive, mais je n’ai pas l’op­tion Grid, mais seule­ment Tiles, Masonry, justi­fied ou slider. Pour l’ins­tant j’ai mis Masonry mais les colonnes selon leur contenu n’ont pas la même hauteur.

  11. bonsoir, il suffit de ne pas choi­sir Tiles en layout, mais Grid. La dispo­si­tion sera du même type que pour l’exemple qui affiche les articles du blog, dans cet article-ci (exemple du ‘chapitre’ La gestion de Visual Portfolio dans Gutenberg.

  12. Bonjour,
    J’utilise visual port­fo­lio pour affi­cher des offres d’emploi mais j’ai un problème d’ajus­te­ment des colonnes en hauteur pour ne pas avoir le déca­lage mansonry. j’ai essayé avec flex mais ça ne fonc­tionne pas. avez-vous une idée pour avoir toutes les colonnes (3) de la même hauteur.
    merci

Les commentaires sont fermés.

Retour en haut
Les cookies que nous utilisons sont indispensables au bon fonctionnement de ce site. Il n'y a aucun pistage publicitaire et les données statistiques recueillies sont anonymisées.
J'ai compris