Blog Collage like Blogstomp / Storytailor

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


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

Tbh I struggled to understand you’re trying to do-
Are your referring to this layout, generated from the Webflow CMS?

I’m going to run with that.

When a client wants a distinctive layout like this, I use a collection list in a grid format, with the grid set to 12 columns.

If your layout were manual- then you could just store a field with the number of columns you want for each tile, and manually arrange them in 12-col rows, e.g. 3+9, 6+6, 4+4+4, 3+6+3… whatever.

Here it sounds like you want it to be automatic which means that you need to custom code a simple layout engine to make those determinations for you and apply those colspans to ensure 12-col rows.

I usually do 2 to 4 images per row at desktop, and 3 to 9 colspan per item, depending. It’s all about simple calcs and building an adaptable layout engine.

Portrait v. Landscape is more difficult, you’re going to end up cropping things regardless. To optimize for it, I use hints, so in the CMS, I’ll indicate for each item whether its tile is portrait or landscape, and the my engine will use those hints to choose the best layout for a row.

Important- there are always sizing and cropping challenges, but there are two techniques you can use to make this work best;

  • Have the layout engine first divide your image set into rows, and avoid any 1-item rows. Go for 2 to 3 items per row always, that avoids isolating a portrait image on its own 12-col row, where most of it would be cropped.
  • The images you use to represent each of the tiles should ideally always have the visual interest right at the center of the photo.

You’ll definitely need a programmer to build that part, unless you can find a library that already has that encoded. Give me a shout if you need a pro to build this.

Thank you.
The image example is from the blogstomp website.
But yes, it would need a layout just like that.

We’re looking for basically one image per row if horizontal, and then two images per row if vertical. (and fill-crop to the size so they line up neatly)

I would definitely like some pro help to build this out if you can shoot me a message I’d appreciate it.

1 Like