Jump to content

How Do I Properly Extend Row Of Images?

Recommended Posts

Site URL: https://mikebrodner.com/

Hi all! I'm an editor and have loved displaying my work on Squarespace. As my portfolio has grown, I am trying to figure out how to extend my thumbnails/padding/borders beyond what they are. They only allow me to go so far. Check out the layout I currently have. I'm using an image as a thumbnail that you can click on, that will take you to a page with video. You'll notice it's only 4 images per row. What I want to do is extend my row of images to, let's say, 8 images per row. I just find it more visually pleasing to fill up the blank space on the page. How do I achieve this without changing templates or messing with my already clean layout? Thoughts or suggestions? Thanks in advance!

 

Screen Shot 2021-02-17 at 12.18.06 PM.png

Screen Shot 2021-02-17 at 12.18.31 PM.png

Link to comment
  • Replies 5
  • Created
  • Last Reply

Top Posters In This Topic

Montauk family which includes Julia and others has full site width index page capability. It is set in design/site styles, as is Avenue which is very similiar in look. I use that template. You can set an index to 8 per row but the page width would need to match  or the thumbnails will be too small I would think. 

https://support.squarespace.com/hc/en-us/articles/205815428-Montauk-Site-Styles-tweaks

 

Edited by derricksrandomviews
Link to comment
On 2/17/2021 at 8:24 PM, Coffee_N_Keys said:

As my portfolio has grown, I am trying to figure out how to extend my thumbnails/padding/borders beyond what they are. They only allow me to go so far. Check out the layout I currently have. I'm using an image as a thumbnail that you can click on, that will take you to a page with video. You'll notice it's only 4 images per row. What I want to do is extend my row of images to, let's say, 8 images per row.

Hi

Firstly let me say that you shouldn't need to change anything drastic like the template as there are a number of ways to do this.

Right now it looks as though you have created the page using individual Image Blocks. I could be wrong, but you don't appear to be using the Om-specific Index features. If that's the case, there are three issues to consider:

  1. Firstly, the Montauk-family (including Om) has a fixed-width canvas. Your page appears to be fixed at 1150 pixels currently but you can increase this in Site Styles (in the SIZE & VALUES section) to allow you to display more thumbnails on larger screens. When the slider reaches 1200px it will appear to be at maximum, but you can click the digits themselves and overtype them. Note that the width is a maximum; on smaller screens, the width will still be limited by the available space in the browser.
  2. Secondly, Squarespace uses a 12-column grid (on all templates) which means that if you are using Image Blocks (or the built-in Index feature) it is only possible to have 2, 3, 4 or 6 thumbnail columns. You cannot have 8, because 12 isn't divisible by this. For this you'll need a Gallery or Summary Block.
  3. Lastly as Derrick mentioned, forcing eight images per row may be problematic. They would look great on my 5K display but on a laptop or smaller screen, the thumbnails will be relatively small and potentially unreadable. A Gallery Block will simply make each thumbnail smaller on laptops, like this:

592105943_Screenshot2021-02-20at18_10_34.thumb.png.0eb7544956da1e59ea4f88ffafc3f677.png

Taking this all into account, I recommend storing the thumbnail images in a Gallery page. The Gallery can then be connected to a 'Grid' Summary Block to display them on the page. Summary Blocks have a unique feature which allows you to set the width of each image, and when the screen is smaller, they drop down to the next line without shrinking. Like this: https://recordit.co/IRsyEbv4hE (the screencast is best viewed on a large screen).

There are a couple of gotchas to consider (Summary Blocks can show up to 30 images) but these are solvable. I can post back if you find this approach helpful. 

Let me know if you have questions.

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment

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.