How to set different image formats for different store pages

Site URL: https://www.bethanykohrt.com/

Hi there,

I would like to have different image formats for different store pages, meaning all images in one store 1:1 and all images in another store page 4:3. Currently I have to have one format across the whole website.

Any suggestions please?

Thanks in advance!

Beth

On 5/11/2022 at 8:17 PM, BethTheArtist said:

Site URL: https://www.bethanykohrt.com/

Hi there,

I would like to have different image formats for different store pages, meaning all images in one store 1:1 and all images in another store page 4:3. Currently I have to have one format across the whole website.

Any suggestions please?

Thanks in advance!

Beth

You can share link to page where you want to set 4:3, we can take a look

Here's the page I want to set to 4:3. Thanks

https://leopard-jaguar-hw9f.squarespace.com/2022-i-died-for-beauty 

On 5/4/2022 at 9:32 AM, sarahcreates said:

On 5/11/2022 at 9:17 AM, BethTheArtist said:

Site URL: https://www.bethanykohrt.com/

Hi there,

I would like to have different image formats for different store pages, meaning all images in one store 1:1 and all images in another store page 4:3. Currently I have to have one format across the whole website.

Any suggestions please?

Thanks in advance!

Beth

If you use Summary Blocks you can adjust the image sizes to what you want but then there are other limitations you might hit with Summary Blocks such as the max products of 30. 

On 5/13/2022 at 4:27 PM, BethTheArtist said:

Here's the page I want to set to 4:3. Thanks

https://leopard-jaguar-hw9f.squarespace.com/2022-i-died-for-beauty 

Hi,

I see this page already 4:3 ratio?

Hi @tuanphan yes and it has therefore changed all other stores on my website to the 4:3 ratio. I want almost all of them 1:1 but now and again I need a different ratio (as in this case) and want to be able to change some stores but not all. Hope that makes sense. 

I have had to revert it back to 1:1 as it has messed up all other live stores on my site.

Thanks so much.

Beth

On 5/13/2022 at 1:18 PM, Donna_Vincent said:

 

Thank you - this creates a different layout to all other stores on my site, doesn't it? What I would like is a whole product page set to 4:3 images rather than a separate block within a section and all other store pages set to 1:1 but otherwise identical in layout and design. Unless I have misunderstood. Thanks anyway. B

10 hours ago, BethTheArtist said:

Thank you - this creates a different layout to all other stores on my site, doesn't it? What I would like is a whole product page set to 4:3 images rather than a separate block within a section and all other store pages set to 1:1 but otherwise identical in layout and design. Unless I have misunderstood. Thanks anyway. B

Not necessarily.  It would give you the option to change which store you want the 4:3 photos and then you can show the 1:1 photos for the other stores.   You can customize the summary block and all that you are showing is the title of the painting.  You can duplicate the page that you want the 4:3 photos, add the summary block, set it up with the photo and title to see if it would work for you.

Please see the following.

On 5/15/2022 at 8:15 AM, tuanphan said:

Hi,

I see this page already 4:3 ratio?

On 5/13/2022 at 1:18 PM, Donna_Vincent said:

 

Hi @creedon Thank you - I have pasted the code into Settings > Advanced > Code Injection > HEADER but it has changed it across the whole site again. I am not sure what I am doing wrong? Thanks so much.

10 hours ago, BethTheArtist said:

I have pasted the code into Settings > Advanced > Code Injection > HEADER but it has changed it across the whole site again.

If you put all the code in that location it will affect the whole site.

You need to follow the second step for each individual Store page you want to change.

Quote

Add code from file change default image aspect ratios for store page.html to Store Settings > Advanced > Page Header Code Injection for the store page.

This is how the store looks before my code runs.

And after.

Let us know how it goes.

@creedon Hi there, thanks very much for your reply. I have found the location for each individual store (Store Settings/Advanced/Page Header Code Injection), thank you for that, but I am just not sure which code applies, I thought maybe this one but isn't working? Any help gratefully received! Apologies for total lack of coding basics :-))

      const productsPageAspectRatio = '4:3';
      
      const productDetailPageAspectRatio = '4:3'

The code you posted is not the whole code. You need to following the instructions and install each piece of code where indicated. Then once the code is installed you can set those two lines in the code as you show above. That tells the code what aspect ratio to use.

Thanks @creedon, sadly I don't understand what you mean but I thank you for your time anyway. I have read previous posts on the subject and copied and pasted both into the locations described in the link but clearly I haven't done it correctly. I will reach out to Squarespace and see if they can help.

Have a good day.

Beth

@Donna_VincentThank you that's helpful. For now, I would ideally like to do it the way I had originally asked about but this gives me good ideas for other pages. Thanks so much! Beth