Square Aspect Ratio for images on Collection pages

[TCK]

Hi,

The images on our collection page are all the ratios that have been uploaded to the product. However, we want shopify to crop them all to square ratio. I have tried following instructions for other themes (I am using Brooklyn), but not working.. e.g. this thread: https://community.shopify.com/c/Shopify-Discussion/how-to-change-the-aspect-ratio-of-product-images-...

Is it possible to do this? I have a screen shot of the collection page below so that you can see what I mean. As you can see, the gravy and frozen chestnuts have the grey blocks above and below - and it is showing the entire image. I want it to crop the left and right sides so that it becomes square like the other images. Is that possible? I'm confident in using some liquid code to make it happen.

Thanks in advance

Tom

[Aitechdigital]

Hello TCK!

Just to confirm. Did you follow the thread of this conversation to the next page? https://community.shopify.com/c/Shopify-Discussion/how-to-change-the-aspect-ratio-of-product-images-...

The solution on the first page works only for the product page, but the solution on the second page works on thee collection page.

Please try the solution again. I hope it works!

Thank You!

Need an expert? You can always contact us.  www.fiverr.com/aitechdigital  .  Or contact our services directly https://www.fiverr.com/s2/f97574a029

[TCK]

Thanks for your quick reply.

I tried all of the code examples on that thread but I don't have the same liquid files as I'm using brooklyn Theme.

Just to confirm, are you talking about this bit of code that should be added to the theme.css.liquid file? This makes no difference for me...

I also tried all of the larger bits of code that we're supposed to be added to product-card-grid.liquid file, but I had to add to the product-grid-item.liquid file as the aforementioned doesn't exist for brooklyn. However this just makes a mess of the collection pages - the grid completely disappears and the whole thing looks a mess.

Thanks

Tom

[Aitechdigital]

You're welcome Tom! And Hi!

Since you're using the Brooklyn theme, this should be able to help.

Add this code to Assets/theme.scss.liquid file:

.slick-slide img {
    margin-top: -1rem;
}

I hope this helps!

Thanks! 

[TCK]

Hi there,

Perhaps I should take back the statement I made about being confident my abilities to code, as I'm not able to make this work...

Can I confirm, am I supposed to be using the two pieces of code in conjunction? I.e. the below \/ plus the piece of code for the theme.css.liquid file that you wrote in your last message???

Thanks

{% comment %}
    Renders a product card using "Grid" style
    Accepts:
    - max_height: {Number} Maximum height of the product's image (required)
    - product: {Object} Product Liquid object (required)
    - show_vendor: {Boolean} Show the product's vendor depending on the section setting (optional)

    Usage:
    {% include 'product-card-grid', max_height: max_height, product: product, show_vendor: section.settings.show_vendor %}
{% endcomment %}
<div class="grid-view-item{% unless product.available %} grid-view-item--sold-out{% endunless %} product-card">
  <a class="grid-view-item__link grid-view-item__image-container full-width-link" href="{{ product.url | within: collection }}">
    <span class="visually-hidden">{{ product.title }}</span>
  </a>

  {% capture img_id %}ProductCardImage-{{ section.id }}-{{ product.id }}{% endcapture %}
  {% capture wrapper_id %}ProductCardImageWrapper-{{ section.id }}-{{ product.id }}{% endcapture %}
  {%- assign preview_image = product.featured_media.preview_image -%}
  {%- assign img_url = preview_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

  {% unless preview_image == blank %}
    {% include 'image-style', image: preview_image, height: max_height, wrapper_id: wrapper_id, img_id: img_id %}
  {% endunless %}

  <div class="product-card__image-with-placeholder-wrapper" data-image-with-placeholder-wrapper>
    <div class="grid-view-item__image-wrapper product-card__image-wrapper js"> 
      <div style="padding-top:100%;">
        <img
              class="grid-view-item__image lazyload"
              alt="{{ preview_image.alt }}"
              data-src="{{ img_url }}"
              data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
              data-aspectratio="{{ preview_image.aspect_ratio }}"
              data-sizes="auto"
              data-image>
      </div>
    </div>
    <div class="placeholder-background placeholder-background--animation" data-image-placeholder></div>
  </div>

  <noscript>
    {% capture image_size %}{{ max_height }}x{{ max_height }}{% endcapture %}
    <img class="grid-view-item__image" src="{{ preview_image | img_url: image_size, scale: 2 }}" alt="{{ preview_image.alt }}" style="max-width: {{ max_height | times: preview_image.aspect_ratio }}px;">
  </noscript>

  <div class="h4 grid-view-item__title product-card__title" aria-hidden="true">{{ product.title }}</div>

  {% include 'product-price-listing', product: product, show_vendor: show_vendor %}

</div>

[Aitechdigital]

So sorry for the late response!

You can apply the code in your message. Let's try that first.

Thank you

[TCK]

Thank you for getting back to me... with that code this is what I end up with.. lots of white space and images duplicated in different sizes....

[Aitechdigital]

Hi Tom!

Still wondering what could be wrong.

Why don't you try to delete that code you applied earlier and let's try something else. Go over to the colour settings and change the background color to Transparent.

If this doesn't work out try to delete the images and upload a better dimension of the images; ideal dimension is 1024× 1024 px.

(Please, if the images in question is attached to another variant, make sure you upload the images again so the variants won't be picture -less.)

I really hope the issue is solved this time.

Thank you

Need an expert? Contact us today; www.fiverr.com/aitechdigital

https://www.fiverr.com/s2/916f4655b0