Tutorial: Photography Portfolio

A justified portfolio with a lightbox, watermarked proofs, and a password-protected client gallery.

What you'll build: a public portfolio page that looks like a photographer's site, plus a private proofing gallery you can send a client a link to.

Time: about 25 minutes.

You'll use: Justified · Lightbox · Content · Watermark · Visibility & Password · Reusable galleries

Before you start

• 20–40 photographs uploaded, mixing portrait and landscape.
• Alt text and captions filled in. The captions become your on-tile titles, so this one matters.
• Images no larger than ~2500 px on the long edge.

Part 1: The public portfolio

Step 1: Insert the block

1. Create a new page called Portfolio.
2. Add the Shaped Gallery block.
3. On the layout picker, choose Automatic Justified.
4. Add from Media, select your photographs, Add to Gallery.

You should have a gallery of even rows with nothing cropped. That's the layout doing its job — it scales each row to a shared height and lets widths fall where they may.

Step 2: Set the rhythm

Open Layout Settings:

Control	Set to	Why
Maximum Row Height	Auto	It adapts to the viewport, so a phone gets several images per row instead of one enormous one.
Horizontal Gap	12 px desktop, 8 px mobile	Tight enough that the gallery reads as one object. Use the device switcher for the mobile value.
Vertical Gap	12 px desktop, 8 px mobile	Match the horizontal gap.
Order	Default	A portfolio is curated. Random undoes your curation.

Step 3: Quiet hover

Open Image & Video Settings → Style:

Control	Set to
Hover Animations	Zoom
Animation Duration	400 ms

Then flip the state switcher to Hover and set Image Opacity to 92 %. The slight dim plus the zoom reads as "this responds to you" without shouting.

Step 4: Turn on the lightbox

1. Open Image Click Action.
2. Click Action Type → Lightbox.
3. Lightbox Click Action → Full Image, so the whole photo is clickable.

Then configure the viewer once, site-wide, at Shaped Gallery → Settings → Modules → Lightbox → gear:

Setting	Set to	Why
Lightbox Theme	Dark Theme	Photographs read better against dark.
Image Caption	On	Your captions become the viewer's caption.
Item Counter	On	Visitors know how far through they are.
Bottom Thumbnails Gallery Icon	On	Lets them jump rather than page.
Download	Off	You're showing work, not distributing files.

Save Changes.

Step 5: Captions on the tiles

Open Content Settings:

1. Image Title on, source Attachment Caption, HTML Tag → Span.

   Span rather than a heading: these are labels, not sections. Twelve headings in a row makes a worse page outline than none.

2. Image Description off. On a portfolio, one line is enough.

3. Content Display Style → Overlay, Overlay Style → Position, Overlay Positions → Bottom, Overlay Size 35.

4. Content Visibility → On Hover, Overlay Opacity 0.5.

Check this on a phone

On Hover is invisible on touch. That's acceptable here because the caption is a title you already know — but if the text carried a price or a project name, set Content Visibility to Always instead.

Step 6: Set resolution and publish

1. Image & Video Settings → Settings → Resolution → Large.
2. Lazy Load on (it already is).
3. If you have more than about 30 photos: Layout Settings → Ajax Pagination on, then Show Per View 18, Pagination Type Load More.
4. Publish, and check the page in a private window at desktop and phone width.

Part 2: The client proofing gallery

Same plugin, different settings — and this is where the watermark and password earn their keep.

Step 7: Configure the watermark

Shaped Gallery → Settings → Modules → Watermark → gear:

Setting	Set to
Watermark Type	Text
Watermark Text	PROOF — yourstudio.com
Text Size	28
Text Color	White
Display Style	Style One
Repeat Watermark	On
Watermark Transparency	~35 %

Save Changes.

Repeat on is what makes the mark hard to crop out — it's on every part of the image, not in one corner.

Step 8: Build the gallery

1. Shaped Gallery → Add New Gallery.
2. Title it Smith wedding — proofs. Descriptive titles are how you'll find it later.
3. Layout Grid, Columns 4 / 3 / 2. A proofing set is for choosing from, and a regular grid is easier to scan than a justified one.
4. Add the client's images.
5. Image & Video Settings → Settings: Image Watermark on, Right Click Protection on, Resolution → Medium.
6. Image Click Action → Click Action Type → Lightbox.

Step 9: Lock it

1. Advanced Settings → Visibility tab.
2. Visibility → Password.
3. Set Password — something you can send in an email.
4. Publish.

Step 10: Place it

1. Copy the shortcode from Gallery Info — [shaped_gallery id="…"].
2. Create a page, add a Shortcode block, paste it.
3. Publish, and send the client the page URL and the password.

Changing the password revokes access

It locks out everyone who had already entered the old one — which is exactly how you end a proofing window.

What you built

• A public portfolio with balanced rows, hover captions and a dark lightbox.
• A private, watermarked, password-protected proofing gallery with its own permanent link.
• One watermark configuration serving every gallery that opts in.

Where to go next

• Filterable Gallery tutorial — add categories and search
• Best Practices · Performance