Support » Plugin: WooCommerce » Display of thumbnails on Archive page

  • Resolved ice-horse

    (@ice-horse)


    Hello,

    I would like to display thumbnails in their original aspect ratio on the archive page but with their containers always the same height. So that landscape images fill out their container, but portrait images get sized down and displayed with spaces left and right.

    It seems like the only way to do this would be to have the image in its own container within the link element (currently, it shares the container with the h2 and the price span).

    That’s how it is:

    <a href="#" class="woocommerce-LoopProduct-link woocommerce-loop-product__link">
      <img src="x.jpg" class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail wp-post-image" alt="" width="400" height="267">
      <h2 class="woocommerce-loop-product__title">Title</h2>
      <span class="price">ab 
        <span class="woocommerce-Price-amount amount">xx
          <span class="woocommerce-Price-currencySymbol">€</span>
        </span>
      </span>
    </a>

    That’s how I need it:

    <a href="#" class="woocommerce-LoopProduct-link woocommerce-loop-product__link">
      <div class="image_container">
        <img src="x.jpg" class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail wp-post-image" alt="" width="400" height="267">
      </div>
      <h2 class="woocommerce-loop-product__title">Title</h2>
      <span class="price">ab 
        <span class="woocommerce-Price-amount amount">xx
          <span class="woocommerce-Price-currencySymbol">€</span>
        </span>
      </span>
    </a>

    I found no way to do this in the template structure, as the code output within the loop seems quite fragmented. Any ideas?

Viewing 1 replies (of 1 total)
  • Plugin Support RK

    (@riaanknoetze)

    Hi there,

    While I’m not entirely sure of the use-case without having a visual representation of what you’re getting at the moment, it might be worthwhile approaching this from a CSS perspective, especially in using the object-fit property for the img tags (more information at https://css-tricks.com/almanac/properties/o/object-fit/)

Viewing 1 replies (of 1 total)
  • The topic ‘Display of thumbnails on Archive page’ is closed to new replies.