# Portfolio Widget

> Build a free filterable portfolio grid for any website — WordPress, Shopify, Wix, Squarespace or plain HTML. Categories, lightbox, case-study links. No signup.

- Canonical URL: https://www.zyff.app/widget-builder/portfolio
- Status: working
- Price: free to build and embed, no signup, no watermark; saving a widget so it can be edited later needs an account, and the paid plans raise the saved-widget and monthly-view ceilings — see https://www.zyff.app/pricing
- Processing: runs on Zyff's servers; input is held in memory for the request and never stored

Zyff's portfolio widget shows your work in a grid visitors can filter by category, free. Each piece carries a title, a category, an optional description and either a case-study link or a full-size image in the lightbox — and the filter bar builds itself from whatever categories you type, appearing only once there are two or more. Choose photo cards, a hover overlay, masonry that keeps every original shape, or a carousel. Zyff does not host the images: you paste URLs from wherever they already live. The output is one div and one script tag that works in WordPress, Shopify, Wix, Squarespace, Webflow or a hand-written HTML page alike.

## How to add a portfolio to your website

1. **Add your work** — Give each piece a title, a category and an image URL. Type the same category on several pieces and it becomes a filter button automatically.
2. **Choose where the title sits** — Below the image reads clearly everywhere; over the image is cleaner; on hover is cleanest of all but invisible on a phone, which the editor warns you about.
3. **Decide what a click does** — A piece with a case-study link opens it. A piece without one opens the image full size in the lightbox, which pages with the arrow keys and closes on Escape.
4. **Copy the embed code** — Paste the container div and script tag where the work should appear, or download the standalone HTML file. Check the 390px mobile preview before you ship it.

## Features

- **A filter that builds itself**: The category bar comes from the categories you type on each piece, in the order they first appear. Nothing to configure, and it stays hidden until there are at least two categories so a single-discipline portfolio never shows a bar with one button.
- **Links win over the lightbox**: A piece with a case-study URL opens it; a piece without one opens the image. One click cannot sensibly do both, so the presence of a link is what decides.
- **Four layouts**: Photo cards with the title beneath, a hover overlay, masonry that crops nothing, and a paged carousel for a large body of work.
- **Never a broken tile**: A piece with no image yet shows its title in the tile's place, so a portfolio assembled over a fortnight looks deliberate the whole time.
- **A lightbox that behaves**: Arrow keys page through, Escape closes, and focus returns to the tile that opened it rather than dumping a keyboard visitor at the top of the page.
- **Nothing to slow your page**: The widget runs in the visitor's browser from the settings in your snippet, makes no request to Zyff when your page loads, and every image loads lazily.

## Specifications

| Property | Value |
| --- | --- |
| Pieces | Up to 60, each with a title, category, image, description and link |
| Layouts | 4 templates: photo cards, hover overlay, masonry, carousel |
| Filtering | Automatic from the categories you type; hidden below two categories |
| Crops | Landscape 4:3, square, portrait 3:4, or keep the original shape |
| Columns | 1 to 5, dropping to 2 below 900px and 1 below 560px |
| Image hosting | None — the widget loads your images from their own URLs |
| Output | One container div plus one script tag, or a downloadable HTML file |
| Price | Free to build; paid plans for saved widgets |

## Frequently asked questions

**How do I add a portfolio to my website?**

Add each piece in Zyff's builder with a title, category and image URL, pick a layout, then copy the generated embed code into your page. The whole flow is free with no signup, and the snippet is plain HTML, so it drops into any CMS block that accepts custom code.

**How does the category filter work?**

It builds itself from whatever you type in each piece's category field, in the order those categories first appear — so you control the order by ordering the pieces. It only appears once two or more distinct categories exist, because a filter bar with a single button is just clutter.

**What is the difference between this and the photo gallery?**

A gallery shows photos; a portfolio shows work. Each piece here carries a title, a category and a description rather than just a caption, the categories drive a filter, and a piece can link to a case study instead of opening as an image. If you only want pictures in a grid, the photo gallery is the simpler tool.

**Should I use the hover overlay layout?**

Only if your visitors are mostly on desktop. There is no hover on a touch screen, so phone visitors see the images with no titles or categories at all. The editor says so when you pick it. Cards or the always-on overlay are safer defaults.

**Can a piece link to a case study?**

Yes — add a link to it and clicking the tile opens that instead of the lightbox. Pieces without a link still open their image full size, so you can mix the two in one portfolio.

**Does Zyff host my images?**

No. You paste a URL for each piece and the widget loads it from there, so your work stays wherever you already keep it. Replacing the file at that URL updates the portfolio everywhere it is embedded.

**What image size should I use?**

Around 1600px on the long edge. Every tile loads lazily so a big portfolio does not fetch everything at once, but the lightbox shows the same file — it has to be large enough to look right full screen without being a 6MB original.

**Where do I paste the portfolio embed code?**

Wherever the work should appear — a dedicated portfolio page, an about page, or partway down a home page. Put the container div in that spot and keep the script tag with it.

**Is the portfolio widget really free?**

Yes. Building it, styling it and embedding it are free with no signup, no trial and no watermark — a free embed carries a small "Portfolio by Zyff" link, which is how the tool stays free. Photo cards and masonry are both free, and so is the category filter: it is the whole reason this is a portfolio rather than a gallery. A paid plan adds the hover overlay and carousel layouts, full colour control and removes the attribution link.

## Related tools

- [Photo Gallery Widget](https://www.zyff.app/widget-builder/photo-gallery): A photo gallery with a lightbox, in four layouts.
- [Logo Showcase Widget](https://www.zyff.app/widget-builder/logo-showcase): A wall of client, partner or press logos.
- [Timeline Widget](https://www.zyff.app/widget-builder/timeline): Company history or a roadmap, on a vertical spine.
- [Before and After Slider](https://www.zyff.app/widget-builder/before-after): Two photos in one frame, revealed by a divider visitors drag.
- [PDF Embed Widget](https://www.zyff.app/widget-builder/pdf-embed): Show a PDF in the page with the browser's own viewer.