How to resize 4,000 images to 1:1 aspect ratio from 3:4 with a black background

Hi All,

I've set my website up with 1:1 aspect ratio as it the easiest to use my photos on multiple platforms (for marketing purposes).

However, I have c4,000 images that I have previously taken and used on eBay.

How can I either insert custom code to take these 3:4 images and put them on a 1:1 with black background? Or is there a way I can bulk edit these offsite and then ?

I'm stuck on this one, it seems as though this should be simple but it isn't (or am I wrong? 🙂 ) 

I have an app where I do this but it only does one image at a time - which really isn't an option for 4,000 photos.

Thanks, Chris

This is my website www.booksthatexpandthemind.co.uk

2 hours ago, Chris_BTETM said:

Hi All,

I've set my website up with 1:1 aspect ratio as it the easiest to use my photos on multiple platforms (for marketing purposes).

However, I have c4,000 images that I have previously taken and used on eBay.

How can I either insert custom code to take these 3:4 images and put them on a 1:1 with black background? Or is there a way I can bulk edit these offsite and then ?

I'm stuck on this one, it seems as though this should be simple but it isn't (or am I wrong? 🙂 ) 

I have an app where I do this but it only does one image at a time - which really isn't an option for 4,000 photos.

Thanks, Chris

This is my website www.booksthatexpandthemind.co.uk

I check that the image on your site is currently set with 1:1 ratio.

Do you mean you need to make all images on your site with only the ratio 1:1?

2 hours ago, Chris_BTETM said:

Hi All,

I've set my website up with 1:1 aspect ratio as it the easiest to use my photos on multiple platforms (for marketing purposes).

However, I have c4,000 images that I have previously taken and used on eBay.

How can I either insert custom code to take these 3:4 images and put them on a 1:1 with black background? Or is there a way I can bulk edit these offsite and then ?

I'm stuck on this one, it seems as though this should be simple but it isn't (or am I wrong? 🙂 ) 

I have an app where I do this but it only does one image at a time - which really isn't an option for 4,000 photos.

Thanks, Chris

This is my website www.booksthatexpandthemind.co.uk

I check that the image on your site is currently set with 1:1 ratio.

Do you mean you need to make all images on your site with only the ratio 1:1?

6 hours ago, Beyondspace said:

I check that the image on your site is currently set with 1:1 ratio.

 

Do you mean you need to make all images on your site with only the ratio 1:1?

Hi,

Yes, my website is set up as 1:1 but I have c4,000 photos (not on my website yet) that are 3:4 and I need to get them put into 1:1 format (with a black background). I'd like either some bulk edit method (so I can use the images on my website or Facebook/Instagram) or CSS code but this would only be for my website.

I hope that makes sense.

Chris

17 hours ago, Chris_BTETM said:

Hi,

Yes, my website is set up as 1:1 but I have c4,000 photos (not on my website yet) that are 3:4 and I need to get them put into 1:1 format (with a black background). I'd like either some bulk edit method (so I can use the images on my website or Facebook/Instagram) or CSS code but this would only be for my website.

I hope that makes sense.

Chris

Is there any images with 3:4 which need to set with 1:1 ratio on your site? Can you show me how to find it?

Hi,

Not on my website. I've not loaded them up as they don't look good.

I have attached an example of the original images and how I want them to look on my website (and other distribution channels).

These photos were taken in 3:4 aspect ratio but in some cases they have been cropped to remove surrounding and just focus on the product.

I hope that helps.

6 hours ago, Chris_BTETM said:

Hi,

Not on my website. I've not loaded them up as they don't look good.

I have attached an example of the original images and how I want them to look on my website (and other distribution channels).

These photos were taken in 3:4 aspect ratio but in some cases they have been cropped to remove surrounding and just focus on the product.

I hope that helps.

 

You can upload the original images and use the following code on Home > Design > Custom Css to set them fit with ratio 1:1

.products.collection-content-wrapper .grid-item .grid-image-cover {
  height: 100% !important;
  width: auto !important;
  left: 50%;
  transform: translateX(-50%);
}

.products.collection-content-wrapper .grid-image-wrapper {
  background-color: #000;
}

Hi,

Thank you, this is helpful in that it works on the "Shop" page but when I hoover over the image or go to the product page the original photo is shown 

Shop page:

Product Page:

Can I inject the same code on the product page or somewhere else so it also impacts the Hoover/Zoom view?

Here's the product page URL https://www.booksthatexpandthemind.co.uk/shop/p/1665-pharsalia-sive-de-bello-civili-caesaris-et-pompeji-lib-x-by-m-annaei-lucani-

Thank you for your help, really appreciated.

3 hours ago, Chris_BTETM said:

Here's the product page URL https://www.booksthatexpandthemind.co.uk/shop/p/1665-pharsalia-sive-de-bello-civili-caesaris-et-pompeji-lib-x-by-m-annaei-lucani-

You can try the following code

.tweak-product-basic-item-gallery-design-slideshow .ProductItem-gallery-slides-item img, .tweak-product-basic-item-gallery-design-carousel .ProductItem-gallery-slides-item img{
  width: auto !important;
  left: 50% !important;
  position: absolute;
  transform: translateX(-50%);
}

.tweak-product-basic-item-gallery-design-slideshow .ProductItem-gallery-slides-item, .tweak-product-basic-item-gallery-design-carousel .ProductItem-gallery-slides-item, .ProductItem-gallery-thumbnails-item {
  background-color: #000; 
}
.ProductItem-gallery-thumbnails-item-image {
  width: auto !important;
}

Support me by pressing 👍  or marking as solution if this useful for you

Hi,

Many thanks, that works except for on the mobile I get the CSS text appearing. I'm sure It's me not doing something quite right....

Can you show where you put the code? It should be Home > Design > Custom Css

Hi ,

I originally put it in the Home>Design>Custom Css but it didn't work onthe product pages as can be seen below.

So I put it in the custom CSS field of the product page and then the product image changed as below

Except going to the mobile view shows the Css code at the top

Thank you

You can try remove my all code on Home > Design > Custom Css, then check again if this text still exists

It may cause if you add my code directly on:

- page setting > header injection

- Or Home > Settings > Advanced > Code injection, the header 

You need to wrap my code on

<style>

   my code

</style>

when you put code on 2 above locations

Hi,

Apologies for the delay in replyinh, unfortunately I've had to deal with family health matters but all ok now.

Yes, the code now works. I inserted the following in the Header Section:

<style type="text/css">
.tweak-product-basic-item-gallery-design-slideshow .ProductItem-gallery-slides-item img, .tweak-product-basic-item-gallery-design-carousel .ProductItem-gallery-slides-item img{
  width: auto !important;
  left: 50% !important;
  position: absolute;
  transform: translateX(-50%);
}

.tweak-product-basic-item-gallery-design-slideshow .ProductItem-gallery-slides-item, .tweak-product-basic-item-gallery-design-carousel .ProductItem-gallery-slides-item, .ProductItem-gallery-thumbnails-item {
  background-color: #000; 
}
.ProductItem-gallery-thumbnails-item-image {
  width: auto !important;
}

</style>

And on the product pages the following is inserted:

.tweak-product-basic-item-gallery-design-slideshow .ProductItem-gallery-slides-item img, .tweak-product-basic-item-gallery-design-carousel .ProductItem-gallery-slides-item img{
  width: auto !important;
  left: 50% !important;
  position: absolute;
  transform: translateX(-50%);
}

.tweak-product-basic-item-gallery-design-slideshow .ProductItem-gallery-slides-item, .tweak-product-basic-item-gallery-design-carousel .ProductItem-gallery-slides-item, .ProductItem-gallery-thumbnails-item {
  background-color: #000; 
}
.ProductItem-gallery-thumbnails-item-image {
  width: auto !important;
}

This now works with no html visible to the end mobile user.

This is great thank you so much.

In the background I have also been working on finding a solution that converts the actual images, as some of my original images cannot be used on other platforms e.g. Instagram.

I have come across a tool call Image Magick which can take command line instructions to modify the original image files. I'm still testing this but it seems to be able to give me what I need and this will adjust my original photos put them into a 1:1 aspect ratio without skewing and adding a black background. If this works successfully it will save me a huge amount of time 🙂