Proposal: Enable Lightbox for Squarespace 7.1 Auto-layouts
In the recent updates of Lightbox Studio, I have enabled the lightbox feature for Slide Gallery blocks and sections:
How to enable lightbox for Slideshow and Reel Gallery sections
How to enable lightbox for Slideshow, Carousel and Stack Gallery blocks
Due to the high demand for turning Auto-layouts to support lightbox, I will keep this post as a proposal to share the knowledge and plans to make this possible.
What are Auto-layouts?
Auto-layouts is a Squarespace 7.1 template feature. It helps showcase your team or different projects with sets of images, text, and buttons in a customizable layout. Auto-layout is available as sections template under People, Services, or Testimonials.
Tips: Look for layouts with an i icon in the top-right corner and click the one you want.
Auto-layout Designs
Simple List
Displays items and their elements in a row from left to right. Depending on your settings and the number of items, the layout may create more rows below the first.
Banner Slideshow
Displays one item at a time with elements overlaying the image, which acts as a background for the section. Visitors click controls to scroll through the items.
Carousel
Displays items and their elements in a row from left to right in a rotating carousel. Visitors click controls to scroll through more items.
These layouts are simple and can be achieved similarly to how I enabled the lightbox on Gallery sections.
Enabling Lightbox for Auto-layouts
Similar to Slideshow Gallery sections, the lightbox feature on Auto-layout will be enabled site-wide, meaning all Auto-layouts will inherit lightbox settings.
What displays on Lightbox
Lightbox is used for displaying enlarged images, so the image must be available on lightbox, regardless of whether you enable the image on the list item or not.
Also, the list item can contain Title, Description, and Button. I propose including only the Description and Title in the lightbox; including the button would be too crowded, so it must be left out.
Lightbox Handler
Since we can attach links to both Description and Button, I think it is wise to attach the lightbox handler to the image only. If the image is missing, then the lightbox indicator on the list item will act as the Lightbox handler.
Potential Issues
1. Lightbox Indicators
Lightbox indicators are usually found at the bottom right of the image, which works well for most image shapes. However, for rounded cropped images, the ideal location for the indicator might differ to maintain aesthetic appeal and visibility.
Proposed Solution:
Place the lightbox indicator at the center of the rounded image. This ensures that it is clearly visible and doesn't interfere with the rounded edges of the image.
2. Lightbox Captions
As proposed before, captions in the lightbox should consist only of the title and description of the Auto Layout item. This approach maintains a clean and focused presentation, avoiding clutter in the lightbox view.
Proposed Solution:
Exclude buttons from the lightbox caption to keep it simple and informative.
This proposal aims to streamline the integration of lightbox features into Squarespace 7.1 auto-layouts, enhancing the visual presentation and user experience on your site. If you have any feedback or suggestions, please feel free to share them.
Conclusion
This proposal aims to streamline the integration of lightbox features into Squarespace 7.1 auto-layouts, enhancing the visual presentation and user experience on your site.
Stay tuned for updates on the release of this feature! If you have any feedback or suggestions, please feel free to share them. Your input will be invaluable as we refine and finalize this enhancement.