how to change the aspect ratio of product images on debut theme

Solved
saltynips
Excursionist
22 1 2

All my product images are portrait view, however the debut theme seems to be set for images with an aspect ratio of 1:1. Does anyone know how this can be changed? I know it is possible to crop the images through the image editor but this still leaves space on each side of the product image and product title text is still aligned to the 1:1 aspect ratio frame- as show in the below image. 

any help on this would be really appreciated!! 

Untitled-21-01.jpg

0 Likes
Vikas_Chovatiya
Navigator
371 87 110

This is an accepted solution.

Hi, @saltynips 

Thanks for the post.
Please paste below code product-card-grid.liquid file.

{% 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:{% unless preview_image == blank %}{{ 1 | divided_by: preview_image.aspect_ratio | times: 100 }}%{% else %}100%{% endunless %};">
        <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>
If helpful then please Like and Accept Solution.
-Want to modify or custom changes on store Hire me.
- Feel free to contact me on vikaschovatiya02@gmail.com regarding any help
If you are happy and want to donate small Click here (Its my paypal)
saltynips
Excursionist
22 1 2

AMAZING! thats worked perfectly thank you so much!

i just noticed that it still has the space on each side of the image on the product pages, is there a way to change it here the same?

 

Untitled-21-01.jpg

0 Likes
Vikas_Chovatiya
Navigator
371 87 110

Hi, @saltynips 

Please paste below code media.liquid file.

{% comment %}
  Renders a media element for the product gallery.
  Media types include: image, video, external_video and model.
  Accepts:
  - media: {Object} Media Liquid object (required)
  - featured_media: {Object} Media Liquid object (required) - featured media of a given product or variant
  - height: {Number} Maximum height of the gallery (required)
  - image_zoom_size: {String} Size of the zoomed image (e.g., '1024x1024') (required for media type image)
  - enable_image_zoom: {Boolean} Image zoom setting (required for media type image)
  - image_scale:  {String} Image scale (e.g., '2') (required for media type image)

  Usage:
  {%- for media in product.media -%}
    {% include 'media', media: media, featured_media: featured_media, height: height %}
  {%- endfor -%}

  {%- for media in product.media -%}
    {% include 'media', media: media, featured_media: featured_media, height: height,
     enable_image_zoom: enable_image_zoom, image_zoom_size: product_image_zoom_size, image_scale: product_image_scale %}
  {%- endfor -%}
{% endcomment %}

{% capture media_id %}FeaturedMedia-{{ section.id }}-{{ media.id }}{% endcapture %}
{% capture media_class %}product-featured-media{% endcapture %}
{% capture media_wrapper_id %}{{ media_id }}-wrapper{% endcapture %}

{%- comment -%}
  Load different poster image sizes depending on the product layout
{%- endcomment -%}
{% capture image_size %}{{ height }}x{{ height }}{% endcapture %}

<div
    class="product-single__media-wrapper js{% unless featured_media == media %} hide{% endunless %}"
    {% if media.media_type == 'video' or media.media_type == 'external_video' %} data-product-media-type-video data-enable-video-looping="{{ section.settings.enable_video_looping }}"{% endif %}
    {% if media.media_type == 'model' %} data-product-media-type-model{% endif %}
    {% if media.media_type == 'external_video' %} data-video-id="{{ media.external_id }}"{% endif %}
    data-product-single-media-wrapper
    data-media-id="{{ section.id }}-{{ media.id }}"
    tabindex="-1">
  {% case media.media_type %}
    {% when 'image' %}
      {% capture zoom_media_id %}ImageZoom-{{ section.id }}-{{ media.id }}{% endcapture %}
      {%- assign img_url = media | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
      {% include 'image-style', height: height, wrapper_id: media_wrapper_id, img_id: media_id, image: media.preview_image %}
      <div
        id="{{ zoom_media_id }}"
        style="padding-top:{{ 1 | divided_by: media.preview_image.aspect_ratio | times: 100}}%;"
        class="product-single__media{% if product.media.size > 1 %} product-single__media--has-thumbnails{% endif %}{% if enable_image_zoom %} js-zoom-enabled{% endif %}"
        {% if enable_image_zoom %} data-image-zoom-wrapper data-zoom="{{ media | img_url: image_zoom_size, scale: image_scale }}"{% endif %}>
        <img
          class="feature-row__image {{ media_class }} lazyload{% unless featured_media == media %} lazypreload{% endunless %}"
          src="{{ media | img_url: '300x300' }}"
          data-src="{{ img_url }}"
          data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
          data-aspectratio="{{ media.preview_image.aspect_ratio }}"
          data-sizes="auto"
          alt="{{ media.alt | escape }}">
      </div>
    {% when 'external_video' %}
      <div class="product-single__media" style="padding-top: {{ 1 | divided_by: media.aspect_ratio | times: 100 }}%;">
        {{ media | external_video_tag }}
      </div>
    {% when 'video' %}
      <div class="product-single__media product-single__media--video product-single__media--{{ media.id }}" style="padding-top: {{ 1 | divided_by: media.aspect_ratio | times: 100 }}%;">
        {{ media | video_tag: class: 'media-video', image_size: image_size }}
      </div>
    {% when 'model' %}
      <div class="product-single__media" style="padding-top: 100%">
        {{ media | model_viewer_tag: image_size: image_size, reveal: 'interaction', toggleable: true, data-model-id: media.id }}
      </div>
    {% else %}
      <div class="product-single__media" style="padding-top: {{ 1 | divided_by: media.aspect_ratio | times: 100 }}%;">
        {{ media | media_tag: class: 'media-item', image_size: image_size }}
      </div>
  {% endcase %}
</div>

 

If helpful then please Like and Accept Solution.
-Want to modify or custom changes on store Hire me.
- Feel free to contact me on vikaschovatiya02@gmail.com regarding any help
If you are happy and want to donate small Click here (Its my paypal)
0 Likes
saltynips
Excursionist
22 1 2

`you are a wizard! thank you so much for all your help! 

so so appreciated!!

Vikas_Chovatiya
Navigator
371 87 110

HI, 

Thanks for the update Glad to help you :)

If helpful then please Like and Accept Solution.
-Want to modify or custom changes on store Hire me.
- Feel free to contact me on vikaschovatiya02@gmail.com regarding any help
If you are happy and want to donate small Click here (Its my paypal)
0 Likes
Afe
New Member
3 0 0

Hi Vikas, 

This post has helped me as well. Thank you !

Doest the code work with the collection list too, or do i need to change any ?

link to page: studio-retro.dk

As you see "Produkter" shows correct image ratio, according to your earlier mentioned code. But Collections (Kategori) doesnt.

 

Best regards 

Andreas

0 Likes
Vikas_Chovatiya
Navigator
371 87 110

Hi @Afe 

Thanks for the update
I show it it's working properly what is the issue? Please share a screenshot.

If helpful then please Like and Accept Solution.
-Want to modify or custom changes on store Hire me.
- Feel free to contact me on vikaschovatiya02@gmail.com regarding any help
If you are happy and want to donate small Click here (Its my paypal)
0 Likes
Afe
New Member
3 0 0

Afe_0-1594973819025.png

 Hi Vikas, see the snip above. 1st mark is from your code! it works perfectly, and shows the products.

The 2nd mark is the collection list. Its still fixed at ratio 1:1. I think your earlier code, only worked for the products and not the collection list - Does it makes sense ?

Can i make the collection list, to work with your code as well ?

 

Best regards

0 Likes
Vikas_Chovatiya
Navigator
371 87 110

Hi @Afe 

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.collection-grid-item{
    padding-bottom: 150%;
}
If helpful then please Like and Accept Solution.
-Want to modify or custom changes on store Hire me.
- Feel free to contact me on vikaschovatiya02@gmail.com regarding any help
If you are happy and want to donate small Click here (Its my paypal)
0 Likes