This tutorial will show you how to create a unique collage image layout with a creatively placed border in Squarespace. A few important things to note before you copy and paste the code below into your own site:

→ This tutorial is for the image block in classic editor, not the new block in Fluid Engine. To learn more about this update, visit insidethesquare.co/fluid

→ Yes, you can TOTALLY create a PNG like this in an image editing program like Photoshop, Canva pro and others… this tutorial is for folks who don’t have access to those programs or don’t know how to create this using those; code to the rescue!

→ Be sure to edit the code to suit your own site style, trying different border types and changing the margin to fit your image style. For more info on creating borders, check out insidethesquare.co/borders

→ This code is specifically for collage images and won't work for other types like galleries or product thumbnails.

→ You can apply this to a single image by using its block id. There is a free chrome extension that I use to easily grab that info, available here. Please note that i am NOT affiliated with that company or extension in anyway - I just use it myself!

Here is the main code from this tutorial:

.sqs-block-image .design-layout-collage .image-card-wrapper {
border:1px solid #000;
}
.sqs-block-image .design-layout-collage .image-card {
background:transparent!important; margin-bottom: 5%
}
.sqs-block-image .design-layout-collage .intrinsic img {
z-index:999!important; position:absolute!important; transform:scale(0.85)!important;
}