Créer une galerie de portfolio.

Apprendre DXPR BuilderCréer des pagesSuivre un tutoriel

Créez ici une page de portfolio : un titre centré, trois projets côte à côte avec une photo de couverture et un résultat d’une ligne chacun, et un appel à l’action. Utilisez-la pour montrer votre travail d’un coup d’œil et relier chaque projet à son histoire. Pour présenter un projet en profondeur, suivez Rédiger une étude de cas.

La vidéo crée une page d’agence intitulée « Our work ».

Avant de commencer

  • Votre rôle dispose de l’autorisation Edit with DXPR Builder.
  • La médiathèque contient une photo de couverture par projet, recadrée aux mêmes proportions.
  • La page est ouverte dans le builder. Pour une nouvelle page, accédez à Content > Add content > Landing Page (/node/add/landing_page) et cliquez sur Save.
  • Les nouveaux éléments arrivent en haut de leur colonne : chaque photo de couverture se place donc après son texte.

Étape 1 : ajouter l’en-tête

  1. Cliquez sur Add Elements sur la page vide et choisissez Section dans l’onglet Layout.
  2. Survolez la section et ouvrez Plus > Paramètres. Sous HTML classes, choisissez Align text center, puis cliquez sur Save.
  3. Cliquez sur + sur la section et choisissez Text dans l’onglet Content.
  4. Saisissez « Our work » comme Heading 2, ajoutez une ligne d’introduction et cliquez sur Save. Le thème affiche le titre de la page comme Heading 1 de la page. Pour faire de ce titre le Heading 1 à la place, voir Créer des pages optimisées pour le référencement.

Étape 2 : ajouter la grille de projets

  1. Survolez la section et cliquez sur Add Section Below. Ouvrez les Plus > Paramètres de la nouvelle section, choisissez un Background gris clair dans le panneau Style et cliquez sur Save.
  2. Cliquez sur + sur la section et choisissez Row ; elle arrive avec deux colonnes égales. Cliquez sur son icône de grille (Column layout), choisissez le préréglage 1/3 + 1/3 + 1/3 et cliquez sur Save.
  3. Cliquez sur + dans la première colonne et choisissez Text. Saisissez le nom du projet comme Heading 3, ajoutez le résultat d’une ligne et cliquez sur Save.
  4. Cliquez sur + dans la même colonne et choisissez Image ; elle arrive au-dessus du texte. Cliquez sur Select Image, cochez la photo de couverture et cliquez sur Insert selected. Saisissez l’Alt attribute dans le panneau SEO et cliquez sur Save.
  5. Répétez pour les deuxième et troisième colonnes.

Étape 3 : ajouter l’appel à l’action

  1. Ajoutez une troisième section avec Add Section Below et ouvrez ses Plus > Paramètres. Choisissez Align text center sous HTML classes, puis le Background violet et le Font color blanc dans le panneau Style. Cliquez sur Save.
  2. Cliquez sur + sur la section et choisissez Button. Définissez Title sur « Contact us », Link sur /contact, Type sur Light et Size sur Large, puis cliquez sur Save.
  3. Cliquez à nouveau sur + et choisissez Text ; il arrive au-dessus du bouton. Saisissez « Let’s work together » comme Heading 2 et ajoutez une ligne. Réglez Font color sur blanc dans le panneau Style et cliquez sur Save.

Étape 4 : enregistrer et prévisualiser

  1. Cliquez sur Save dans la barre d’outils du builder.
  2. Ouvrez le menu d’affichage (l’eye icon) et choisissez Preview.

Aller plus loin

Non montré dans la vidéo :

  • Link each project : réglez Image link de la photo de couverture sur la page d’étude de cas.
  • Lift on hover : dans le panneau Style de chaque image, réglez Border radius sur 4 et Drop shadow sur 1. Dans Hover style, montez Drop shadow à 3.
  • More projects : ajoutez une autre Row avec le même préréglage sous la première.

Rendre la grille filtrable

La grille statique convient pour une poignée de projets. Pour laisser les visiteurs filtrer par type, enregistrez chaque projet comme contenu et affichez-les avec une vue qui a un filtre exposé. Views fait partie du cœur de Drupal.

1. Créer le type de contenu Portfolio

  1. Accédez à Structure > Content types > Add content type (/admin/structure/types/add).
  2. Nommez-le « Portfolio » et enregistrez.
  3. Sous l’onglet Manage fields, ajoutez un champ Image intitulé « Cover image ».
  4. Ajoutez un champ List (text) intitulé « Project type » avec des valeurs comme web|Web, branding|Branding et campaign|Campaign.
  5. Créez quelques éléments Portfolio sous Content > Add content > Portfolio.

2. Créer la vue

  1. Accédez à Structure > Views > Add view (/admin/structure/views/add).
  2. Nommez-la « Portfolio grid » ; sous View settings, affichez du Content de type Portfolio.
  3. Cochez Create a block, réglez le format d’affichage sur Grid de fields et enregistrez.
  4. Dans l’éditeur de vue, ajoutez les champs Cover image et Title, et réglez la grille sur 3 colonnes dans ses réglages de format.
  5. Sous Filter criteria, cliquez sur Add, choisissez Project type et cochez Expose this filter to visitors. Intitulez-le « Filter by type ».
  6. Sous Advanced, réglez Use AJAX sur Yes. Les filtres exposés d’une page du builder ne fonctionnent que via AJAX.
  7. Enregistrez la vue.

3. Insérer la vue dans la page

  1. De retour dans DXPR Builder, videz les trois colonnes statiques ou ajoutez une nouvelle Row.
  2. Cliquez sur +, ouvrez l’onglet Drupal Views et choisissez View: Portfolio grid (Block).
  3. Dans la boîte de dialogue des réglages, cochez Show exposed filters et cliquez sur Save. La grille s’affiche avec la liste déroulante « Filter by type » au-dessus, et les nouveaux éléments Portfolio apparaissent d’eux-mêmes.
  4. Cliquez sur Save dans la barre d’outils du builder.

Ce que vous voyez

Le titre centré « Our work » ouvre la page. Sur le bandeau gris en dessous, trois projets se tiennent côte à côte, chacun une photo de couverture sur son nom et son résultat. Un bandeau violet conclut la page avec Contact us.

Si la page ne s’affiche pas comme montré

  • Une photo de couverture se trouve sous son texte. La photo est arrivée avant le texte, et les nouveaux éléments arrivent en haut de leur colonne. Glissez la photo au-dessus du texte par la poignée de glissement de sa barre de contrôle.
  • Les couvertures ont des hauteurs différentes. Leurs proportions diffèrent. Recadrez-les aux mêmes proportions, téléversez-les à nouveau et choisissez les nouvelles copies.
  • Portfolio grid n’est pas dans l’onglet Drupal Views. La vue est désactivée, ou votre profil d’utilisateur du builder la masque. Activez-la sous Structure > Views, ou demandez à un administrateur de la cocher sous Views dans votre profil d’utilisateur.
  • L’éditeur affiche « Turn on Ajax on this view to use exposed filters. » La vue n’utilise pas AJAX. Réglez Use AJAX sur Yes sous Advanced dans l’éditeur de vue ; voir Un élément s’affiche ou se comporte mal.
  • La liste déroulante « Filter by type » manque. Show exposed filters est désactivé sur l’élément. Ouvrez les réglages de l’élément de vue, cochez-le et cliquez sur Save.

Et ensuite ?