Portfolio Gallery Ideas

Not sure if I put this post in the right category… which probably means I didn’t. :slight_smile:

I am finally getting to where I can add to my personal promotional website… to make the process go faster I am using a freeUI ket to build off of adding my own flare to it.

I have the home page to where I like it and am now on to the portfolio page.

I am envisioning having a brick type photo gallery. ( You know where images are not the same size and are nestled in one area. ) I want to also have a sort feature where All will be shown, then the visitor can select what select by category… On mouse over some basic info like, client & services used, will reveal. On click it will take them to a project page detail. Where there will be a slider or image thumbnail of other images pertaining to this project, and additional info like Customer’s testimonial, project brief, and the like.

I am wanting to make this dynamic so I will be taking advantage of the Collections features.

What I am wondering is; Has anyone used or come across a why to produce the Brick style gallery using Collections?


43%20AM 59%20AM

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

A. Uneven cols layout

Same height diff width - its easier to solve:
By webflow columns
-or- by custom flex grid (By deafult the height of flex cols is even).

Great trick her (Follow the course if you want):

In general its easier to work with background-images (Background-size: cover) for this layout - but it less semantic/Seo freindly/accsesbaility

B. Masonry

More complex. The “official” ± name of this layout is masonry (bricks) -

You could get masonry by flexbox (Example) - but most of the time with JS you get better results (Webflow custom code).

Webflow & masonry.js (Project example inside):

faebric example: overlay

Card X with overlay Y. Read her (And google/youtube it “css overlay” - endless tuturials + Forum search):

CMS Issue

For cms collection its more tricky (No way to bind CSS width as vairable for each item). Some ideas her:

Thank you Ezra, I’m gonna give this a try.

Jeff Biggs

So I have seen where I can add code to the and where I Can Embed Code… But I can not find where to add code before

Under page setting (Gear icon) --> Custom code tab (Top: inside head. Bottom “before body”)

Masonry.js is not a libary to learn this topic.

Start from simple example: