Varying items per row in the shop

I am trying to setup a photo print store. To deal with varying aspect ratios of different images, I would like to change the number of products displayed per row in the squarespace store. For example:

• First row is 2 landscape images at 3:2 ratio side by side. 
• Second row is 3 portrait images at 2:3 ration side by side.
• Third row is 1 panoramic image at 16:9. 
• Forth row could be 3 portrait images again. 

Basically I want to display 2 products per row if the images are landscape, 3 per row if portrait and 1 per row if panoramic. 

I have used this code successfully to hack the aspect ratios: https://sf.digital/squarespace-solutions/how-to-show-product-images-in-their-original-aspect-ratio-on-squarespace-71 

However, this makes my product page have huge portrait images and tiny panoramic images (because the pano images are trying to squeeze into the narrow width of the column). Unfortunately it is not possible to add another shop section with a different number of columns. 

Thanks a lot in advance. 

Can you share link to shop page?

Hi tuanphan,

Can I share it to you directly rather than publically? 

Thanks. 

1 hour ago, stim said:

Hi tuanphan,

Can I share it to you directly rather than publically? 

Thanks. 

 

Yes. You can send a private message

Great, thanks, PM sent!

The example I gave above would be the best but I guess maybe it is not possible to have a landscape image spanning 1.5 columns? Would I need to span whole columns? In this case, the following examples would be acceptable:

• 3 columns.
• 1 landscape image per column on each row (so 3 per row). 
• 1 portrait image per column on each row (so 3 per row).
• 1 panoramic image spanning all 3 columns (so 1 per row).

or

• 4 columns.
• 2 landscape images spanning 2 columns each on each row (so 2 per row). 
• 1 portrait image per column on each row (so 4 per row).
• 1 panoramic image spanning all 4 columns (so 1 per row).

Thanks a lot for your help!

There is also the topic of what happens when you use the filter. How will the images then display?

On 1/12/2022 at 7:40 PM, stim said:

Hi tuanphan,

Can I share it to you directly rather than publically? 

Thanks. 

 

You mean this? https://www.loom.com/share/8aafe5d3cff542d0a99d1afae732cd95

Yes, exactly! Ideally the landscape images on the top would be only 2 instead of 3 (to make them bigger), possible?

Thanks a lot for your help.

Here is a graphical representation of some layout options. The second one clearly has the best balance, which would be my first choice but I'm not sure if the landscape images can span across 1.5 columns like that. Otherwise option 3 (with 4 columns) works fairly well (and maybe the spacing between the 4 portrait images can be adjusted independently of the other spacing to bring them closer together and therefore bigger on the page?).

Please note that these layouts are not fixed, they are just examples. I might have 2 or 3 rows of landscapes before having the portrait images etc. Its the number of images per row that I would like to be able to adjust. 

Thanks very much!

Hi @tuanphan, do you have any update on this topic? 

Thanks a lot!

I currently overloaded, will check soon Thursday morning

If Thursday night, you still haven't seen an answer, you can tag me.

No Problem, appreciate the help, thank you.  🙂

@tuanphan any luck with this? Thanks!

18 hours ago, stim said:

@tuanphan any luck with this? Thanks!

Add to Print Shop Page Header

<style>
  @media screen and (min-width:992px) {
  /* general settings */
    .list-grid {
    display: flex !important;
    grid-template-columns: unset !important;
    flex-wrap: wrap !important;
    grid-column-gap: unset !important;
    grid-row-gap: unset !important;
}
    /* row 1: 2 images 3:2 */
    div.grid-item:nth-child(-n+2) {
    width: calc(50% - 20px);
    margin-left: 10px;
    margin-right: 10px;
}
    /* row 2: 3 images 2:3 */
    div.grid-item:nth-child(3), div.grid-item:nth-child(4), div.grid-item:nth-child(5) {
    width: calc(33.3333% - 20px) !important;
    margin-left: 10px;
    margin-right: 10px;
}
  div.grid-item:nth-child(3) .grid-image-wrapper, div.grid-item:nth-child(4) .grid-image-wrapper, div.grid-item:nth-child(5) .grid-image-wrapper {
      padding-bottom: 150% !important;
  }
  /* row 3: 1 image 16:9 */
    div.grid-item:nth-child(6) {
    width: 100%;
    margin-left: 10px;
    margin-right: 10px;
}
    .tweak-products-image-aspect-ratio-32-standard div.grid-item:nth-child(6) .grid-image-wrapper {
    padding-bottom: 56.25% !important;
}
  }
</style>

Next, remove this code from Custom CSS (it override item 6 code)

.tweak-products-image-aspect-ratio-32-standard .products.collection-content-wrapper .grid-item.tag-portrait .grid-image-wrapper {
    padding-bottom: 150% !important;
}

Currently you are publish too few items, so it is not possible to find a rule for future items, so the code above only runs for the first 6 items.

Hi @tuanphan

This is really cool, thank you. The layout is perfect like this. I assume if I add more images, I can just replicated the bit of code that corresponds with the correct aspect ratios? 

The only problem I have found so far, and it might kill the idea, is that it does not work with the product filters. It seems that the code is making the first row 2 landscape images wide, the second row 3 portrait images wide and the final row 1 pano image wide (which is what I asked for), but when a filter is selected, it can be that the first row is then populated by portrait or pano images so they do not display properly. 

Is it possible to fix this somehow? Perhaps by identifying the apsect ratio of the image and then placing it correctly when displaying the filter results? I guess I am asking too much, it seems too complicated!

Thanks a lot for your help. 

20 hours ago, stim said:

Hi @tuanphan

This is really cool, thank you. The layout is perfect like this. I assume if I add more images, I can just replicated the bit of code that corresponds with the correct aspect ratios? 

The only problem I have found so far, and it might kill the idea, is that it does not work with the product filters. It seems that the code is making the first row 2 landscape images wide, the second row 3 portrait images wide and the final row 1 pano image wide (which is what I asked for), but when a filter is selected, it can be that the first row is then populated by portrait or pano images so they do not display properly. 

Is it possible to fix this somehow? Perhaps by identifying the apsect ratio of the image and then placing it correctly when displaying the filter results? I guess I am asking too much, it seems too complicated!

Thanks a lot for your help. 

You can add about 12 - 18 images, then we can check rules easier.

Which filter do you use? 

Also, can you share url again? Too many messages recently, can't find your site url

@tuanphan I have now added 12 images but nothing happens after the original 6 I posted (the additional 6 do not show up). Also, I got the aspect ratio of the 6th (panoramic) image incorrect, it should be 3:1 rather than 16:9 and I cannot see in the code how to change this (I tried changing the last "padding-bottom" to 33.33% but it did not work). 

The filters I am talking about are the standard Squarespace category filters for the shop, but I figured out a site layout to not need these filters. However, I would need to be able to add or remove code from the page header code injection in order to add or remove what ever image rows I want (for example, if I wanted to add 2 rows of 3 portrait image, then 3 rows of 2 landscape images etc). At the moment the code is beyond my basic website coding skills so I am not able to replicate it for additional rows!

An alternative to all of this would be just somehow display the product image as a masonry grid for the shop (which is available in the product summary block but not the main shop).

I will send you the url details again by PM.

Thanks again for all your help.

2 hours ago, stim said:

@tuanphan I have now added 12 images but nothing happens after the original 6 I posted (the additional 6 do not show up). Also, I got the aspect ratio of the 6th (panoramic) image incorrect, it should be 3:1 rather than 16:9 and I cannot see in the code how to change this (I tried changing the last "padding-bottom" to 33.33% but it did not work). 

The filters I am talking about are the standard Squarespace category filters for the shop, but I figured out a site layout to not need these filters. However, I would need to be able to add or remove code from the page header code injection in order to add or remove what ever image rows I want (for example, if I wanted to add 2 rows of 3 portrait image, then 3 rows of 2 landscape images etc). At the moment the code is beyond my basic website coding skills so I am not able to replicate it for additional rows!

An alternative to all of this would be just somehow display the product image as a masonry grid for the shop (which is available in the product summary block but not the main shop).

I will send you the url details again by PM.

Thanks again for all your help.

Ok so after some messing around, I have managed to figure some of this out:

I can add additional rows by copying the the blocks of code. For example, if I want another row of 2 landscape images, I copy the code and then change the nth numbers to the next images in the list. For example, if I want a forth row of 2 landscape images:

  /* row 4: 2 images 3:2 */
    div.grid-item:nth-child(7), div.grid-item:nth-child(8) {
    width: calc(50% - 20px);
    margin-left: 10px;
    margin-right: 10px;

Where (7) and (8) represent images 7 and 8 in my product list. I assume I can do this with every code block you gave me and mix and match.

For the panoramic aspect ratio, I figured out that my CSS for fixing the aspect ratio was not allowing me to change it, so changing this to 33.33% fixed this. Great!

The last (hopefully) thing I need to figure out is the responsiveness for Mobile. I changed the media query you added to 762px which means it keeps the format of the grid until mobile size, then it stacks all the images on top of each other in one column (with 992px the formatting was lost). Is this ok or will I run into another problem? Why did you choose 992px? Also, when it changes to the mobile view, it was not displaying the portrait images correctly (cropped them to landscape) which I have now fixed by adding back in the following code to the CSS:

.tweak-products-image-aspect-ratio-32-standard .products.collection-content-wrapper .grid-item.tag-portrait .grid-image-wrapper {
  padding-bottom: 150%!important;
}

You previously said I should remove this but I cannot see it creates a problem if I keep it? Could you please confirm? 

Thanks a lot!

On 1/31/2022 at 5:23 AM, stim said:

Ok so after some messing around, I have managed to figure some of this out:

I can add additional rows by copying the the blocks of code. For example, if I want another row of 2 landscape images, I copy the code and then change the nth numbers to the next images in the list. For example, if I want a forth row of 2 landscape images:

  /* row 4: 2 images 3:2 */
    div.grid-item:nth-child(7), div.grid-item:nth-child(8) {
    width: calc(50% - 20px);
    margin-left: 10px;
    margin-right: 10px;

Where (7) and (8) represent images 7 and 8 in my product list. I assume I can do this with every code block you gave me and mix and match.

For the panoramic aspect ratio, I figured out that my CSS for fixing the aspect ratio was not allowing me to change it, so changing this to 33.33% fixed this. Great!

The last (hopefully) thing I need to figure out is the responsiveness for Mobile. I changed the media query you added to 762px which means it keeps the format of the grid until mobile size, then it stacks all the images on top of each other in one column (with 992px the formatting was lost). Is this ok or will I run into another problem? Why did you choose 992px? Also, when it changes to the mobile view, it was not displaying the portrait images correctly (cropped them to landscape) which I have now fixed by adding back in the following code to the CSS:

.tweak-products-image-aspect-ratio-32-standard .products.collection-content-wrapper .grid-item.tag-portrait .grid-image-wrapper {
  padding-bottom: 150%!important;
}

You previously said I should remove this but I cannot see it creates a problem if I keep it? Could you please confirm? 

Thanks a lot!

min-width:992px means the code will run on Desktop only (it won't run on Tablet + Mobile)