PC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteTo add a thumbnail for every Webflow portfolio project, store each image in an Image field on a CMS Collection, display that Collection with a Collection List, and connect an Image element or background image inside each repeated Collection Item to the field. Use an Image element when the image needs dynamic alt text; use a background image for a decorative, consistently cropped treatment.
Set up the portfolio Collection and thumbnail field
- In Webflow CMS, create or open the Collection that holds your portfolio projects. Each project should be a Collection item.
- Add an Image field to the Collection and give it a clear name such as “Thumbnail.”
- Open each project item and upload or select its thumbnail in that field. Save and publish the Collection items when ready.
A Collection’s Image field stores an image for an item and can supply it to page designs. See Webflow’s Image field documentation.
As an Amazon Associate I earn from qualifying purchases.
Repeat thumbnails in a grid
- On the portfolio page in the Designer, add a Collection List and choose the portfolio Collection as its source.
- Add an Image element inside the Collection Item. Because elements inside the item repeat, Webflow can display the corresponding project’s image in every card.
- Select the Image element, open its image settings, choose the option to get the image from a field, and select the Thumbnail field.
- Style the Collection List and its Collection Items as a grid or flex layout. Set the number of columns, gaps, card width, and responsive behavior to suit the page.
Webflow documents Collection Lists as the way to display and repeat Collection content. See Collection List and Collection fields.
Choose an Image element or a background image
| Approach | Best suited to | What to configure |
|---|---|---|
| Image element | A thumbnail that is meaningful content and should have dynamic alt text. | Connect its image source to the Thumbnail field. Connect alt text to an appropriate text field, such as a project title or image description. |
| Background image on a div or section | A decorative image or a card design that needs a fixed visual container and crop. | Connect the background image to the Thumbnail field, then set background size, position, and repeat behavior in the Style panel. |
Webflow supports both Image elements and dynamic background images for Collection images. The right choice depends on the image’s role in the design; the documentation does not prescribe a universal thumbnail ratio or pixel dimension.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Handle missing thumbnails
If some projects do not have an image, decide whether those projects should appear without a thumbnail or be omitted from the grid.
- Omit incomplete cards: add a Collection List filter requiring the Thumbnail image field to be set.
- Keep every project visible: use conditional visibility on the image element so it appears only when the field has a value, and provide a designed fallback if needed.
Check the published page as well as the Designer preview: a filter changes which Collection items appear, while conditional visibility leaves the item in the list but changes the element shown within it.
Rank #2
Decide what clicking a thumbnail does
| Desired result | Webflow approach |
|---|---|
| Show a larger image or video in an overlay | Use a Lightbox and connect its media to the relevant CMS content. Webflow describes a Lightbox as showing images or videos in a fullscreen slideshow modal. See Lightbox. |
| Open the project’s case-study page | Link the card or thumbnail to the current item’s Collection page. |
| Open a custom destination | Use a suitable dynamic URL field if each project needs its own destination. |
A Lightbox presents media; a project link navigates to project details. Choose the behavior that matches the visitor’s intent.
Or skip the browser setup
If you still need to create the image files, ScreenshotNeo can return a website screenshot with one API request. After generating the screenshot, upload the resulting image to each project’s Thumbnail field in Webflow as described above.
Quick Recap
Rank #4
Example cURL request:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the ScreenshotNeo API documentation for request options. ScreenshotNeo removes cookie banners, newsletter popups, and chat widgets before capture; bot checks, blank pages, and failed loads are never billed. Its MCP server lets AI agents take screenshots. The free plan includes 1,000 screenshots a month with no card, and paid plans start at $5 for 3,000.
Sign up for ScreenshotNeo’s free plan.
Troubleshoot common problems
- The same image appears on every card: confirm the Image element or background is connected to the Collection field, not set to one static asset, and verify that each Collection item has its own image.
- No thumbnails appear: check that the field is populated, the element is inside the Collection Item, the Collection List uses the intended Collection, and any filter does not exclude the items.
- Some projects disappear: review Collection List filters, especially a condition that requires the image field to be set.
- The crop looks wrong: for a background image, adjust size and position in the Style panel; for an Image element, adjust the element’s sizing and fit treatment to match the card.
- Clicking opens the wrong thing: inspect whether the card uses a Lightbox, Collection page link, or dynamic URL, and connect the intended action at the correct element.
- Alt text is missing or unhelpful: use an Image element and connect alt text to a descriptive Collection text field rather than relying on a decorative background image.
Design and publishing checks
- Use images with a consistent visual crop so card rows feel deliberate; Webflow does not define a required ratio or size.
- Check the grid at the breakpoints your portfolio supports and make sure thumbnails remain visible and links usable.
- Preview a project with an image and one without it to verify the chosen missing-image behavior.
- Publish and inspect the live page, including its image loading, crop, alt text, and click destination.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
