Skip to content

Build a portfolio gallery

Here you build a portfolio page: a centred heading, three projects side by side with a cover photo and a one-line result each, and a call to action. Use it to show your work at a glance and link each project to its story. To write up one project in depth, follow Write up a case study.

The video builds an agency page called "Our work".

Before you start

  • Your role has the Edit with DXPR Builder permission.
  • The media library holds a cover photo for each project, cropped to the same proportions.
  • The page is open in the builder. For a new one, go to Content > Add content > Landing Page (/node/add/landing_page) and click Save.
  • New elements land at the top of their column, so each cover photo goes in after its text.

Step 1: add the header

  1. Click Add Elements on the empty page and pick Section from the Layout tab.
  2. Hover the section and open More > Settings. Under HTML classes pick Align text center, then click Save.
  3. Click + on the section and pick Text from the Content tab.
  4. Type "Our work" as Heading 2, add one line of introduction and click Save. The theme prints the page title as the page's Heading 1. To make this heading the Heading 1 instead, see Build SEO-friendly pages.

Step 2: add the project grid

  1. Hover the section and click Add Section Below. Open the new section's More > Settings, pick a light grey Background in the Style panel and click Save.
  2. Click + on the section and pick Row; it arrives with two equal columns. Click its grid icon (Column layout), pick the 1/3 + 1/3 + 1/3 preset and click Save.
  3. Click + in the first column and pick Text. Type the project name as Heading 3, add the one-line result and click Save.
  4. Click + in the same column and pick Image; it lands above the text. Click Select Image, tick the cover photo and click Insert selected. Type the Alt attribute in the SEO panel and click Save.
  5. Repeat for the second and third column.

Step 3: add the call to action

  1. Add a third section with Add Section Below and open its More > Settings. Pick Align text center under HTML classes, then the purple Background and white Font color in the Style panel. Click Save.
  2. Click + on the section and pick Button. Set Title to "Contact us", Link to /contact, Type to Light and Size to Large, then click Save.
  3. Click + again and pick Text; it lands above the button. Type "Let's work together" as Heading 2 and add one line. Set Font color to white in the Style panel and click Save.

Step 4: save and preview

  1. Click Save on the builder toolbar.
  2. Open the view menu (the eye icon) and choose Preview.

Go further

Not shown in the video:

  • Link each project: set Image link on the cover photo to the case study page.
  • Lift on hover: in each image's Style panel set Border radius to 4 and Drop shadow to 1. In Hover style raise Drop shadow to 3.
  • More projects: add another Row with the same preset under the first.

Make the grid filterable

The static grid suits a handful of projects. To let visitors filter by type, store each project as content and show them with a View that has an exposed filter. Views is part of Drupal core.

1. Create the Portfolio content type

  1. Go to Structure > Content types > Add content type (/admin/structure/types/add).
  2. Name it "Portfolio" and save.
  3. On the Manage fields tab, add an Image field labelled "Cover image".
  4. Add a List (text) field labelled "Project type" with values such as web|Web, branding|Branding and campaign|Campaign.
  5. Create a few Portfolio items at Content > Add content > Portfolio.

2. Build the View

  1. Go to Structure > Views > Add view (/admin/structure/views/add).
  2. Name it "Portfolio grid"; under View settings show Content of type Portfolio.
  3. Tick Create a block, set the display format to Grid of fields and save.
  4. In the view editor, add the fields Cover image and Title, and set the grid to 3 columns in its format settings.
  5. Under Filter criteria, click Add, choose Project type and tick Expose this filter to visitors. Label it "Filter by type".
  6. Under Advanced, set Use AJAX to Yes. Exposed filters in a builder page work only through AJAX.
  7. Save the view.

3. Insert the View in the page

  1. Back in DXPR Builder, empty the three static columns or add a new Row.
  2. Click +, open the Drupal Views tab and pick View: Portfolio grid (Block).
  3. In the settings dialog, tick Show exposed filters and click Save. The grid renders with the "Filter by type" dropdown above it, and new Portfolio items appear on their own.
  4. Click Save on the builder toolbar.

What you see

The centred "Our work" heading opens the page. On the grey band below, three projects stand side by side, each a cover photo over its name and result. A purple band closes the page with Contact us.

If you don't see the page as shown

  • A cover photo sits below its text. The photo went in before the text, and new elements land at the top of their column. Drag the photo above the text by the drag handle on its control bar.
  • The covers have different heights. Their proportions differ. Crop them to the same proportions, upload them again and pick the new copies.
  • Portfolio grid is not in the Drupal Views tab. The view is disabled, or your builder user profile hides it. Enable it at Structure > Views, or ask an administrator to tick it under Views in your user profile.
  • The editor shows "Turn on Ajax on this view to use exposed filters." The view does not use AJAX. Set Use AJAX to Yes under Advanced in the view editor; see An element looks or behaves wrong.
  • The "Filter by type" dropdown is missing. Show exposed filters is off on the element. Open the view element's settings, tick it and click Save.

What's next?

Something wrong or missing on this page? Report it or edit the page.