How Do I Properly Extend Row Of Images?

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!

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

I was hoping not to change templates but I may have no choice. Thanks for the response

12 minutes ago, Coffee_N_Keys said:

I was hoping not to change templates but I may have no choice. Thanks for the response

You should not have to Om, Julia, Kent, they are part of the Montauk family so you should be able to adjust without changing templates. You are using one of them correct?

I am using OM yes - but every time I preview either Julia or Kent I only can see my site name displayed at the top. None of my thumbnails or anything carry over. So I essentially would have to rebuild my entire site again.

I may have to consider figuring out custom coding 

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:

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.