Gallery · Portfolio

Projects one after another: the text stays beside the photos while they pass and stack; a card with the author and an index of the projects stays at the side.

Full-page views: desktop, phone and dark mode

At 1440px wide.

At 390px wide.

With your site in dark mode.

See it live: Gallery · Portfolio on fancybricks.co — the live preview, and the button that copies it.

In the builder

Preview on the front end. Scripts don't run inside the builder, so here you only see the layout: the index doesn't link or mark the current project here (it works on the front end). Save and open the page to see the full result.

Structure

This is what the Bricks Structure panel shows after you paste the template. Component instances say which component they are.

Portfolio
  Container
    Portfolio
      Card
        Card · Avatar
        Card · Person
          Card · Name
          Card · Role
        Index
          Index · List
            Index · Item
              Index · Link
            Index · Item
              Index · Link
            Index · Item
              Index · Link
            Index · Item
              Index · Link
      Projects
        Project · Canyons in winter light
          Project · Text
            Project · Intro   (FBK Intro)
              Project · Button   (FBK Button)
            Project · Points
              Point · Twelve days on the water   (FBK Icon item)
              Point · Shot on medium format fi   (FBK Icon item)
              Point · Printed for a gallery in   (FBK Icon item)
          Project · Photos
            Photo · guatape   (FBK Lightbox image)
            Photo · waterfall-45   (FBK Lightbox image)
            Photo · valley-45   (FBK Lightbox image)
        Project · The Cocora Valley after the rain
          Project · Text
            Project · Intro   (FBK Intro)
              Project · Button   (FBK Button)
            Project · Points
              Point · Seven dawns in the valle   (FBK Icon item)
              Point · A series of twenty print   (FBK Icon item)
              Point · Cover of a travel magazi   (FBK Icon item)
          Project · Photos
            Photo · valley   (FBK Lightbox image)
            Photo · waterfall   (FBK Lightbox image)
            Photo · penol-45   (FBK Lightbox image)
        Project · The coast road
          Project · Text
            Project · Intro   (FBK Intro)
              Project · Button   (FBK Button)
            Project · Points
              Point · Nine hundred kilometres   (FBK Icon item)
              Point · A book of forty photos   (FBK Icon item)
              Point · Shown at a festival in C   (FBK Icon item)
          Project · Photos
            Photo · road   (FBK Lightbox image)
            Photo · coast   (FBK Lightbox image)
            Photo · guatape   (FBK Lightbox image)
        Project · Wild cats of the reserve
          Project · Text
            Project · Intro   (FBK Intro)
              Project · Button   (FBK Button)
            Project · Points
              Point · Three weeks in the reser   (FBK Icon item)
              Point · Made with a conservation   (FBK Icon item)
              Point · Prints sold for the proj   (FBK Icon item)
          Project · Photos
            Photo · lioness   (FBK Lightbox image)
            Photo · road   (FBK Lightbox image)
            Photo · waterfall   (FBK Lightbox image)
    Index and current project (JS)

The template also pastes a dashed note above the section, with the short version of this page. It only shows inside the builder, never on the published page — see Builder notes.

How to adjust

Every step is the same move: pick the element in the Structure panel, change its Properties.

Where are those panels?

How to adjust a template shows every one of them in a screenshot of the real builder: the Structure and Properties panels, the classes on an element, a component's style families and the field where a CSS variable goes.

The classes this element carries, in the Bricks panel.

This template's own component, with its Style group open.

1. Paste the template in Bricks first — see Copy and paste.
2. Select Project · Intro ×4 (FBK Intro) › Properties: Eyebrow, Hide eyebrow, Title, Title level, Lead, Hide lead · Style group: Eyebrow style, Highlight, Title size, Accent line · Layout group: Alignment, Layout, Background, Spacing · Motion group: Reveal in slider.
3. Select Project · Button ×4 (FBK Button) › Properties: Text, Link, Tone, Shadow on hover · Icon group: Icon, Icon position · Style group: Style, Size, Width, Hover effect.
4. Select Point · Twelve days on the water, Point · Shot on medium format fi, Point · Printed for a gallery in (+9 more) (FBK Icon item) › Properties: Icon, Title, Title tag, Text · Show or hide group: Hide icon, Hide text · Style group: Layout, Look, Tone, Shape, Size, Alignment, HTML tag, Background.
5. Select Photo · guatape ×2, Photo · waterfall-45, Photo · valley-45 (+6 more) (FBK Lightbox image) › Properties: Image, Alt text · Lightbox group: Lightbox group, Lightbox width, Lightbox height · Shape group: Proportion, Shape, Hover, Hover overlay · Loading group: Loading · Caption group: Caption, Hide caption.
6. Spacing, sizes, color and timing with no property of their own: the CSS variables below.

CSS variables

These are the only values in the template meant to be changed by hand. Copy the block, paste it, edit the numbers.

The Custom CSS field of this template's own element, with one of its variables as a real example.

/* «Portfolio» · class .fbk-gfolio */
.fbk-gfolio {
  /* Distance from the top of the screen while the card and the texts stay, and
     the step between stacked photos */
  --fbk-t-top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--space-l));
  --fbk-t-stack: var(--space-s);
}

Paste the block in the element's Style → CSS field (the selector is already in it), or set the same variables on the class itself to change every copy at once. The values are your framework's variables, so they follow your site: Choosing a framework.

Requirements

• Code execution. Needs "Execute code" enabled for the role in Bricks → Settings → Custom code, or the JS block shows as plain text instead of running.

What each requirement is, and how to set it up once for the whole site: Requirements.

Finish by hand

• Each project: its FBK Intro (eyebrow, title, lead, button), its points (FBK Icon item) and its photos (FBK Lightbox image; each project has its own lightbox group). To add a project, duplicate one and add a link to the index: one link per project, in the same order (the link text can be shorter than the title). The script points each link to its project and marks the one on screen.
• Index states are in .fbk-gfolio__link (Style > CSS): hover, and the current project %root%[aria-current]. Stacked photos: the class fbk-gfolio__media--stack on each project's photos (remove it for a plain column). The thin gray line along the projects is %root%::before in .fbk-gfolio__main.
• Without "Execute code" the index links do nothing; everything else works.

On phones

The template is designed desktop first, the Bricks default, and only changes at the two widths the library uses:

• 991px and below — .fbk-gfolio, .fbk-gfolio__side, .fbk-intro.
• 767px and below — .fbk-gfolio__content, .fbk-gfolio__main, .fbk-gfolio__project, .fbk-section.

Those changes live in Bricks' own breakpoint fields, so you edit them where you always do: pick the breakpoint in the toolbar and the same fields follow.

Careful with the classes shared by the whole library (fbk-section, fbk-intro, the component classes): a change there shows up in every template that uses them.

If your site's breakpoints are set up mobile first, copy the mobile-first variant of the template instead — see Copy and paste.

Accessibility

In this template, keyboard focus is visible on every interactive piece; movement is cut back when the visitor's system asks for less motion; the state screen readers need is already set (aria-hidden, aria-label).

What is checked on every template, and what depends on your own palette: Accessibility.

Dark mode

With your site in dark mode this section turns dark too — the class fbk-section--auto-dark on the section does it. Remove the class to keep it light.

Its background is a modifier on the section, so you can swap it for any of the ones the template is checked with: fbk-section--light, fbk-section--soft, fbk-section--dark.

How the library follows your site's color scheme: Dark mode and preview.

Replaces

• Fancy Portfolio from Fancy Bricks 2.0

What happened to the old libraries, and what to do with pages already built with them: Migrating from 1.0/2.0.