An Ordered Masonry Blog Layout?

Site URL: https://www.thedesignemotive.com

Hi everyone,

I came across a website and love the layout of their homepage and wanting to replicate it of sorts for my own site, www.thedesignemotive.com. The website I'm referring to is https://minimalissimo.com/

What I love about it is the three-column layout but with differing aspect ratios of the thumbnail, but then they are lined up through an invisible centreline for each row.

I know this is a long stretch but would it be possible to achieve something similar using code?

20 minutes ago, anthonyrichardson said:

Site URL: https://www.thedesignemotive.com

Hi everyone,

I came across a website and love the layout of their homepage and wanting to replicate it of sorts for my own site, www.thedesignemotive.com. The website I'm referring to is https://minimalissimo.com/

What I love about it is the three-column layout but with differing aspect ratios of the thumbnail, but then they are lined up through an invisible centreline for each row.

I know this is a long stretch but would it be possible to achieve something similar using code?

Yes, this is very much possible. What template are you currently using? Made changes to your site locally but would like to test this out in Squarespace really quick to make sure this is pretty easy to accomplish / scale. 

The website you found applies different widths / aspect ratios depending on the thumbnail image they've uploaded. An easy way to target this is either by:

• Adding a category / tag to the item
• Automatically looking at the thumbnail image original dimensions and determining if it's square, landscape, portrait, etc. 

From there we can apply a max or fixed width to the item container. Which is how they have some items different widths / aspect ratios.

If you want feel free to email me a contributor invite to nick@nickscola.com (Admin permissions) and I'll be glad to help out.

40 minutes ago, NickScola said:

Yes, this is very much possible. What template are you currently using? Made changes to your site locally but would like to test this out in Squarespace really quick to make sure this is pretty easy to accomplish / scale. 

The website you found applies different widths / aspect ratios depending on the thumbnail image they've uploaded. An easy way to target this is either by:

• Adding a category / tag to the item
• Automatically looking at the thumbnail image original dimensions and determining if it's square, landscape, portrait, etc. 

From there we can apply a max or fixed width to the item container. Which is how they have some items different widths / aspect ratios.

If you want feel free to email me a contributor invite to nick@nickscola.com (Admin permissions) and I'll be glad to help out.

Hi Nick,

I just invited you as a contributor to test.