Jump to content

Masonry-style grid with photos and videos

Recommended Posts

Posted

Site URL: https://www.amystallard.com/food-photography

I'm looking for a way to add looping videos to my photo gallery, like this: https://www.burklehagen.com/overview

I know that as a circle member, I can use Gallery Blocks or Gallery Sections, but here are the hangups I'm experiencing:

1. Gallery Block doesn't support masonry-style grids with different aspect ratios

2. Gallery Section doesn't support videos

Does anyone know of a workaround? I am thinking I might need to use some code to allow the Gallery Block to do the automatic masonry-style grid, and perhaps another code to be able to have my videos loop and play automatically like gifs. 

Any help would be greatly appreciated! 

  • 1 year later...
Posted
On 9/28/2024 at 1:07 AM, Mary_0221 said:

Hello @tuanphan I see that I can add a video in the gallery block but how can I make it grid: masonry design like this one in the provided sample?

https://www.burklehagen.com/overview

 

So you want

  • Masonry Design
  • Replace image with Video

I think we need to use plugin to create this with Gallery Block, I will test then let you know

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Posted (edited)
On 10/1/2022 at 8:27 AM, amystellar said:

Site URL: https://www.amystallard.com/food-photography

I'm looking for a way to add looping videos to my photo gallery, like this: https://www.burklehagen.com/overview

I know that as a circle member, I can use Gallery Blocks or Gallery Sections, but here are the hangups I'm experiencing:

1. Gallery Block doesn't support masonry-style grids with different aspect ratios

2. Gallery Section doesn't support videos

Does anyone know of a workaround? I am thinking I might need to use some code to allow the Gallery Block to do the automatic masonry-style grid, and perhaps another code to be able to have my videos loop and play automatically like gifs. 

Any help would be greatly appreciated! 

What you are after can be achieve with plugin Lightbox Studio, the page you referred to is using gif files as slide thumbnail and show videos on Lightbox,

image.thumb.png.08f58f70b0b68adc94fc6e083c48e090.png

Similar to this page https://miserytakeme.design/portfolio/cover-art

If you are interested, follow the tutorial here to re-create the layout after purchase, video lightbox supports
- Vimeo & Youtube links

- Video on Custom files (mp4)

- Video on Asset library

Edited by Beyondspace

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - PDF Lightbox popup - ...) </>  🗓️ Delivery Date Picker (Date picker form field)
Gallery block 7.1 workaround </> No-code customisations for Squarespace

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.