Portfolio Gallery Ideas

Design help General
1

INTRO
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.

THE VISION
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.

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

EXAMPLES

43%20AM
43%20AM1534×1148 422 KB
59%20AM
59%20AM1508×1136 448 KB

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

2

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:

3

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

Jeff Biggs

4

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

5

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

image
image1440×746 75.2 KB

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

Start from simple example:
https://webflow.com/website/jquery-countdown