• Resolved oneray

    (@oneray)


    Hi,

    I’m using square images, I want the image’s height to fit exactly to the height of the rectangle box in the listing in modern grid mode – I mean square image in a rectangle box,

    There will be some empty white space to the right and left sides of the image inside the rectangle.

    Can you please help me with this?

    The page I need help with: [log in to see the link]

Viewing 10 replies - 1 through 10 (of 10 total)
  • Thread Starter oneray

    (@oneray)

    and if there is a way to change the color of the empty space to the right and left sides of the image within the rectangle, that would be great.

    Plugin Author ndre

    (@ndre)

    Hi @oneray,

    You have to set the modern grid image size in WordPress Settings > Media.

    Please also check: https://implecode.com/docs/ecommerce-product-catalog/modern-grid-with-square-images/

    Thread Starter oneray

    (@oneray)

    I’ve changed the settings in Media page. for the “Modern Grid Image” to:

    Max Width: 294
    Max Height: 185

    Now the height of the image fits inside the height of the rectangle, but the image is stretched horizontally !!

    Is there anyway to show the square image centered within the rectangle box ?

    like this >> https://ibb.co/Zd6VWqv

    and if there is a way to change the color of the empty white space to the right and left sides of the image within the rectangle, that would be much better.

    • This reply was modified 4 months, 3 weeks ago by oneray.
    Plugin Author ndre

    (@ndre)

    Hi @oneray,

    If you need it to be a rectangle you have to set the same width and height. Please make sure to regenerate thumbnails after you change the image size.

    Please try 292px width and 292px height or 250×250 (like your uploaded image size) and change the items per row to 3.

    You also have to follow this guide: https://implecode.com/docs/ecommerce-product-catalog/modern-grid-with-square-images/

    Thread Starter oneray

    (@oneray)

    This didn’t work, and I want 2 rectangle items per row, not 3 !!

    Thread Starter oneray

    (@oneray)

    Well, nevermind. I will use rectangle product images.

    Thanks again.

    Plugin Author ndre

    (@ndre)

    If you want to have two per row you have to set the width and height to 293px in WordPress Settings > Media.

    Thread Starter oneray

    (@oneray)

    I’m using rectangle image now, 316 x 200 px for individual product images,
    in WordPress Settings > Media, in “Modern Grid Image” I’m using the same numbers: 316 x 200

    Haven’t changed the “Catalog Single Page Image”, it is set to: 600 x 600 ..

    should I change anything here, or is this the correct setting?

    Plugin Author ndre

    (@ndre)

    The grid box, which is like a frame or a container for an image, is set to be a certain size. In your theme, it’s 296 pixels wide and 187 pixels tall.

    To make the image fit nicely into this grid box, you should ideally make it the same size as the grid box, which is 296 pixels wide and 187 pixels tall.

    This should be your settings in WordPress Settings > Media.

    However, when you’re uploading the image, it’s recommended to use a larger size, but keep the same proportions. This means if you increase the size of the image, make sure to keep the width to height ratio the same. For example, if you double the width, you should also double the height to maintain the same aspect ratio.

    Thread Starter oneray

    (@oneray)

    Done. Thank you.

Viewing 10 replies - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.