How to Add Website Thumbnails to a Webflow Portfolio Grid

To add website thumbnails to a Webflow portfolio grid, store a thumbnail in an Image field on each portfolio CMS item, show those items in a Collection List, and connect an Image element inside each Collection Item to that field. The same CMS image can instead be used as a div’s dynamic background. Use an Image element when the thumbnail is meaningful content and needs alt text; use a background when it is mainly a decorative crop or fixed-shaped visual.

1. Prepare the portfolio Collection

In Webflow CMS, create a Collection for projects, or open the Collection that already contains them.
Add an Image field named something clear, such as Thumbnail.
For each project, upload or select its thumbnail in that field and save or publish the item.
If you want image alt text to vary by project, add a plain text field such as Thumbnail alt text and fill it in for each item. Describe the image’s useful content rather than repeating the project title.

A Collection stores similarly structured items, while its fields hold the content that can be connected to page elements. Webflow’s Collection fields guidance and Image field documentation explain these CMS building blocks.

2. Add the repeating grid

Open the portfolio or landing page in the Webflow Designer.
Add a Collection List where the grid should appear, and set its source to the portfolio Collection.
Place the thumbnail and any project title or metadata inside the Collection Item. Webflow repeats that content for each item in the selected Collection.
Select the Collection List or its list wrapper and use the Style panel’s Grid or Flex layout controls to set columns, gaps, and responsive behavior.

Choose the number of columns, spacing, and thumbnail crop based on your design and content. Webflow’s documentation describes the layout controls, but there is no universally correct thumbnail ratio or size for every portfolio.

3. Connect each CMS image

Use an Image element for content images

Add an Image element inside the Collection Item.
Select the image’s settings and bind its image source to the Collection’s Thumbnail field.
Bind the alt text to the Thumbnail alt text text field if you created one. Otherwise, enter suitable static alt text only if it accurately describes every repeated image; a repeated generic description is usually not useful.
In the Style panel, set the element’s width and height or aspect ratio, then choose how the image fits its box. Use a crop such as cover when equal-sized tiles matter, and check that important subjects remain visible.

Use a dynamic background for a visual treatment

If the thumbnail is decorative or the card design depends on a background crop, select a div or section inside the Collection Item, open its background image controls, and bind the background to the same CMS Image field. Set the container’s dimensions, image size, position, and tiling in the Style panel. A background image does not provide the same per-image dynamic alt text workflow as an Image element, so prefer the Image element when the image conveys content.

Webflow documents both CMS-bound Image elements and dynamic background images in its Image field guidance.

4. Choose what a thumbnail click does

Open project details: Make the card or thumbnail a link to the current item’s Collection page, or bind a link to a URL field if the destination is external or customized. Check that the link wraps the intended card content and remains usable on narrow screens.
Show larger media in place: Use a Lightbox and bind it to the CMS image intended for the larger view. A Lightbox opens images or videos in a fullscreen slideshow modal. See Webflow’s Lightbox documentation.
Keep the thumbnail non-clickable: If the image is only decoration, do not make it look or behave like a link. Provide a separate, clearly labeled project link if visitors need to open the project.

A Lightbox and a project link serve different purposes: the former presents media, while the latter navigates to project information.

5. Handle missing images and check the result

Decide what should happen when a project has no thumbnail before publishing. You can filter the Collection List so only items whose Thumbnail field is set appear, or use conditional visibility for the thumbnail element. Filtering removes the item from the grid; conditional visibility preserves the card but hides its image. Choose according to whether every project should remain listed.

Preview the page and confirm multiple Collection items show different images.
Check desktop and narrow layouts for unexpected stretching, cropping, overflow, or uneven card heights.
Open each thumbnail and confirm it goes to the intended Collection page, URL, or Lightbox.
Check an item with no image to verify the selected filter or visibility behavior.
Publish the site and inspect the live page, since Designer preview and published output can differ when content or publishing state is incomplete.

Or skip the browser setup

If you still need to create the website preview images, ScreenshotNeo can return a screenshot from one GET request. See the ScreenshotNeo API documentation for its options.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"},
    timeout=90,
)
open("shot.webp", "wb").write(r.content)

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
const bytes = new Uint8Array(await res.arrayBuffer());
await import('node:fs/promises').then(fs => fs.writeFile('shot.webp', bytes));

Replace the example URL with a project website and save the returned image into the corresponding Webflow CMS Image field. ScreenshotNeo removes cookie banners, newsletter popups, and chat widgets before the shot. Bot checks, blank pages, and failed loads are not billed. Its MCP server lets AI agents take screenshots. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000. Sign up for 1,000 free screenshots a month, with no card required.

Troubleshooting

Symptom	Likely cause	What to check or fix
The same image appears on every card	The image was set as a static asset rather than connected to the CMS field, or every item has the same image selected.	Reopen the Image element’s image settings and bind the source to the Collection Image field. Check each CMS item’s value.
The image binding is unavailable	The element is outside a Collection Item, the Collection List source is wrong, or the field is not an Image field.	Move the element into the repeated Collection Item, confirm the list’s source, and verify the field type in the CMS.
A card has an empty image area	That CMS item has no thumbnail, or the image is hidden by conditional visibility.	Set the field, adjust the condition, or filter items with no image from the Collection List.
The subject is cut off	The tile’s fixed shape and image fitting or position settings crop the source.	Adjust the image fit or focal position, change the tile ratio, or use a less aggressive crop.
The image looks stretched	Width and height force a shape without a suitable fit rule.	Use a consistent aspect ratio and a fit mode that preserves proportions, then inspect the result at each breakpoint.
Clicking opens the wrong destination	A static link or incorrect dynamic URL is bound to the card.	Inspect the link settings inside the Collection Item and bind to the intended current Collection page or URL field.
Lightbox does not open the expected media	The Lightbox is not connected to the right CMS media or the click target is obscured by another link.	Check its dynamic media binding and the element nesting around the Lightbox trigger.

Performance, reliability, and cost

Grid performance depends on the number and dimensions of images the page loads. Use appropriately sized source images for the rendered tiles, avoid unnecessarily large files, and test the published page at the viewport sizes visitors use. The dossier does not establish a universal file-size target or thumbnail dimension, so measure against your own page and image quality requirements.

CMS-driven thumbnails are reliable when each item has a valid field value and the list is published with the intended source and filters. Keep image selection and alt text in the CMS so edits stay attached to the relevant project. For ScreenshotNeo, the stated plans are Free: 1,000 shots/month with no card; Starter: $5 for 3,000; Growth: $15 for 15,000; Pro: $39 for 60,000; Scale: $99 for 250,000; Business: $249 for 1,000,000. Yearly billing gives two months free, and every feature is on every plan. Failed loads, bot checks, blank pages, and cache hits cost nothing.

FAQ

Yes. Add a separate CMS Image field for the larger media and bind the Lightbox to it, while the grid Image element uses the thumbnail field.

Should every project thumbnail link to its detail page?

Only if opening project details is the intended action. Use a Lightbox when the goal is to view the image or video itself, and keep decorative images non-clickable.

Does Webflow require a particular portfolio thumbnail ratio?

The cited Webflow guidance documents the field and layout workflow, but it does not prescribe one ratio. Choose a crop that suits the portfolio and verify it across breakpoints.

Can I capture screenshots directly into the Webflow CMS automatically?

The ScreenshotNeo examples here return image bytes; this workflow describes saving a resulting image and adding it to the CMS Image field. The cited material does not document a direct Webflow CMS integration.