Creating a Photography Blog Layout in Webflow

At a glance

The community member is looking to create a blog layout for their client that resembles an art gallery for photography. They prefer to use Webflow's built-in CMS instead of the Blogstomp (Storytailor) software. The main issue is achieving a collage layout with horizontal and vertical tiles that are symmetrical. Using the GALLERY field in Webflow, the images can be auto-sized, but vertical photos may not fit together nicely. The community member suggests setting horizontal images to 100% width and vertical images to 50% width, but is unsure how Webflow would know to do that.

In the comments, another community member acknowledges that the solution would likely involve JavaScript, which the original poster does not want to use as they are not a programmer. The commenter suggests exploring Webflow's cloneables and a JavaScript library called Masonry as potential solutions.

Useful resources

BBrad Poirier

I have a client looking to create their blog like an art gallery for photography.
They were going to use this software called Blogstomp (Storytailor) which integrates with just about any CMS.

Once you create the layout in Blogstomp, they give you a code to basically put into your webpage to have it embed the layout you created.

I’d prefer to create a webflow layout that works with the built in CMS.
So the #1 deal breaker here is the collage layout.
It stacks the images with horizontal/vertical tiles, but they’re symetrical.
Now, if I use the GALLERY field, I can upload landscape/portrait photos, and just have them auto-width and height. But if the vertical photos are a bit different, they don’t snug up next to each other nicely.
Any thoughts on this?
It’s almost like I need to set any HORIZONTAL image as 100% width, and any VERTICAL image as 50% width.
But how would webflow know to do that. (Dont just say “oh use javascript”… I am not a programmer)
Here is the website:
https://storytailorapps.com/storytailor-blog/?v=0b3b97fa6688

1 comment

MMatt Johnson

@Brad Poirier

(Dont just say “oh use javascript”… I am not a programmer)

Unfortunately.....the answer is....JavaScript. Haha sorry I had to say it because well, thats the answer.

You might be able to do some CSS trickery or even some Webflow tricks to make it work but I'd worry about how fragile that gets.

I would checkout the cloneables first.
https://webflow.com/made-in-webflow/popular?search=masonry+js&page=1

Secondly, I've used this JS library to help set this up in the past - it should/could work for Webflow as well, just need to match the classes up.
https://masonry.desandro.com/

Add a reply

Community forum for knowledge and support

Creating a Photography Blog Layout in Webflow