Boundless - Collection List Square change to Rectangle?

Solved
DIAGRM
New Member
2 0 0

The collection's list shows up as a square image container. I would like the image container to match that of the product image container (rectangle), with similar padding. This fits my product imagery better than the square container.

 

What section of the code do I need to change this? I am NOT a coder, but I was able to find the collection-list-grid __item-container within theme.scss.liquid. When I changed the width from 100% to 80%, it gave me the desired look, but now the grid is off center. (line 4565)

 

.collection-list-grid__item-container {
position: relative;
width: 80%;
padding-bottom: 100%;
}

 

I have since reverted back to the original square, but would like to find a way to get this to work.

 

Thanks,

 

The website is www.diagrm-design.com

 

theme.scss.liquid

/*================ Modules | Theme collection list grid item ================*/
.collection-list {
  padding: 0 $gutter-site;

  .collection-list-grid__item {
    margin-bottom: $gutter-site;
    position: relative;
  }

  .collection-list-grid__item-container {
    position: relative;
    width: 100%;
    padding-bottom: 100%;
  }

  .collection-list-grid__inner {
    height: 100%;
  }

  .collection-grid__link {
    position: absolute;
  }

  .collection-list-grid__image {
    position: absolute;
    display: block;
    overflow: hidden;
    height: 100%;
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
  }

  .collection-list-grid__image-wrapper {
    position: relative;
    height: 100%;
    width: 100%;
    padding: 0;
  }

  .collection-list-grid__title-wrapper {
    position: absolute;
    top: $gutter-site * 2;
    left: $gutter-site * 2;
    display: block;

    @include media-query($medium-down) {
      display: none;
    }
  }

  .mobile-view {
    display: none;

    @include media-query($medium-down) {
      display: block;
    }
  }

  .collection-list-grid__title {
    margin-bottom: 0;
  }

  .number-products {
    color: $color-body-text;
  }

  .under-spacing {
    margin-top: $gutter-site;
  }

  .collection-list-grid__placeholder {
    width: 100%;
    height: 100%;
    fill: $color-blankstate;
  }
}

 

 

collection-list.liquid

<style>
  .collection-list-grid__image-wrapper {
    background: {{ section.settings.background_color }};
  }
  .collection-list-grid__image {
    background-position: {{ section.settings.alignment }};
  }
</style>

<div class="collection-list collection-list--{{ section.id }}">

  {% if section.settings.title != blank %}
    <div class="section-title text-center">
      <h2>{{ section.settings.title | escape }}</h2>
    </div>
  {% endif %}

  <div class="grid grid--uniform collection-grid">

    {% for block in section.blocks limit: section.blocks.size %}

      {% case section.blocks.size %}
        {% when 1 %}
          {%- assign grid_item_width = 'one-whole' -%}
        {% when 2 %}
          {%- assign grid_item_width = 'medium-up--one-half' -%}
        {% when 3 %}
          {%- assign grid_item_width = 'small--one-half medium-up--one-third' -%}
        {% when 4 %}
          {%- assign grid_item_width = 'small--one-half medium-up--one-quarter' -%}
        {% when 5 %}
          {%- assign grid_item_width = 'small--one-half medium-up--one-fifth' -%}
        {% when 6 %}
          {%- assign grid_item_width = 'small--one-half medium-up--one-third' -%}
        {% else %}
          {%- assign grid_item_width = 'small--one-half medium-up--one-quarter' -%}
      {% endcase %}

      {%- assign collection = collections[block.settings.collection] -%}

      {% if collection == empty %}
        {% comment %}add default state for collection block in storefront editor{% endcomment %}
        {% capture collection_title %}{{ 'homepage.onboarding.collection_title' | t }}{% endcapture %}
      {% else %}
        {% capture collection_title %}{{ collection.title | escape }}{% endcapture %}
      {% endif %}

      {% if collection.image %}
        {% assign no_collection_image = false %}
        {%- assign collection_image = collection.image -%}
      {% elsif collection.products.first and collection.products.first.images != empty %}
        {%- assign collection_image = collection.products.first.featured_image -%}
      {% else %}
        {%- assign collection_image = blank -%}
      {% endif %}

      <div class="grid__item {{ grid_item_width }}" {{ block.shopify_attributes }}>
        <div class="collection-list-grid__item">
          <div class="collection-list-grid__item-container">
            <a href="{{ collection.url }}" class="collection-grid__link">
              <div class="collection-list-grid__inner">
                <div class="collection-list-grid__image-wrapper">
                  {% unless collection_image == blank %}
                    <noscript>
                      <div class="collection-list-grid__image" style="background-image: url({{ collection_image | img_url: '1024x1024' }})">
                        {% if section.settings.show_text_over_image %}
                          <div class="collection-list-grid__title-wrapper">
                            <h2 class="product-item__title collection-list-grid__title">
                              {{ collection_title }} <span class="link--action">&rarr;</span>
                            </h2>
                            {% if section.settings.show_number_products %}
                              <p class="number-products">{{ 'collections.general.number_products' | t: count: collection.products.size }}</p>
                            {% endif %}
                          </div>
                        {% endif %}
                      </div>
                    </noscript>
                    <div class="collection-list-grid__image lazyload"
                      style="background-image: url({{ collection_image | img_url: '300x300' }})"
                      data-bgset="{% include 'bgset', image: collection_image %}"
                      data-sizes="auto"
                      data-parent-fit="cover">
                      {% if section.settings.show_text_over_image %}
                        <div class="collection-list-grid__title-wrapper">
                          <h2 class="product-item__title collection-list-grid__title">
                            {{ collection_title }} <span class="link--action">&rarr;</span>
                          </h2>
                          {% if section.settings.show_number_products %}
                            <p class="number-products">{{ 'collections.general.number_products' | t: count: collection.products.size }}</p>
                          {% endif %}
                        </div>
                      {% endif %}
                    </div>
                  {% else %}
                    {% if collection == empty %}
                      {% capture current %}{% cycle 1, 2, 3 %}{% endcapture %}
                      {{ 'collection-' | append: current | placeholder_svg_tag: 'placeholder-svg collection-list-grid__placeholder' }}
                      {% if section.settings.show_text_over_image %}
                        <div class="collection-list-grid__title-wrapper">
                          <h2 class="product-item__title collection-list-grid__title">
                            {{ collection_title }} <span class="link--action">&rarr;</span>
                          </h2>
                          {% if section.settings.show_number_products %}
                            <p class="number-products">{{ 'collections.general.number_products' | t: count: collection.products.size }}</p>
                          {% endif %}
                        </div>
                      {% endif %}
                    {% else %}
                      <div class="collection-list-grid__image" style="background-image: url({{ collection_image | img_url: '1024x1024' }})">
                        {% if section.settings.show_text_over_image %}
                          <div class="collection-list-grid__title-wrapper">
                            <h2 class="product-item__title collection-list-grid__title">
                              {{ collection_title }} <span class="link--action">&rarr;</span>
                            </h2>
                            {% if section.settings.show_number_products %}
                              <p class="number-products">{{ 'collections.general.number_products' | t: count: collection.products.size }}</p>
                            {% endif %}
                          </div>
                        {% endif %}
                      </div>
                    {% endif %}
                  {% endunless %}
                </div>
              </div>
            </a>
          </div>
          {% unless section.settings.show_text_over_image %}
            <div class="collection-list-grid__title-wrapper-under under-spacing">
              <h2 class="product-item__title collection-list-grid__title">
                {{ collection_title }} <span class="link--action">&rarr;</span>
              </h2>
              {% if section.settings.show_number_products %}
                <p class="number-products">{{ 'collections.general.number_products' | t: count: collection.products.size }}</p>
              {% endif %}
            </div>
          {% else %}
            <div class="collection-list-grid__title-wrapper-under under-spacing mobile-view">
              <h2 class="product-item__title collection-list-grid__title">
                {{ collection_title }} <span class="link--action">&rarr;</span>
              </h2>
              {% if section.settings.show_number_products %}
                <p class="number-products">{{ 'collections.general.number_products' | t: count: collection.products.size }}</p>
              {% endif %}
            </div>
          {% endunless %}
        </div>
      </div>
    {% endfor %}

  </div>
</div>



{% schema %}
{
  "name": {
    "de": "Kategorien-Liste",
    "en": "Collection list",
    "es": "Lista de colecciones",
    "fr": "Liste des collections",
    "it": "Elenco delle collezioni",
    "ja": "コレクションリスト",
    "pt-BR": "Lista de coleções"
  },
  "class": "index-section",
  "max_blocks": 12,
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": {
        "de": "Titel",
        "en": "Heading",
        "es": "Título",
        "fr": "Titre",
        "it": "Heading",
        "ja": "見出し",
        "pt-BR": "Título"
      },
      "default": {
        "de": "Kategorien-Liste",
        "en": "Collection list",
        "es": "Lista de colecciones",
        "fr": "Liste des collections",
        "it": "Elenco delle collezioni",
        "ja": "コレクションリスト",
        "pt-BR": "Lista de coleções"
      }
    },
    {
      "type": "checkbox",
      "id": "show_text_over_image",
      "label": {
        "de": "Text über Bild",
        "en": "Text over image",
        "es": "Texto sobre imagen",
        "fr": "Texte sur image",
        "it": "Testo sull'immagine",
        "ja": "画像上のテキスト",
        "pt-BR": "Texto sobre imagem"
      },
      "default": false
    },
    {
      "type": "checkbox",
      "id": "show_number_products",
      "label": {
        "de": "Anzahl an Produkten anzeigen",
        "en": "Show number of products",
        "es": "Mostrar cantidad de productos",
        "fr": "Afficher le nombre d'articles",
        "it": "Mostra numero di prodotti",
        "ja": "商品数を表示する",
        "pt-BR": "Exibir o número de produtos"
      },
      "default": true
    },
    {
      "type": "select",
      "id": "alignment",
      "label": {
        "de": "Fotoausrichtung",
        "en": "Image alignment",
        "es": "Alineación de imagen",
        "fr": "Alignement de l'image",
        "it": "Allineamento immagine",
        "ja": "画像アラインメント",
        "pt-BR": "Alinhamento da imagem"
      },
      "default": "center center",
      "options": [
        {
          "label": {
            "de": "Oben links",
            "en": "Top left",
            "es": "Superior izquierda",
            "fr": "En haut à gauche",
            "it": "In alto a sinistra",
            "ja": "左上",
            "pt-BR": "Superior esquerdo"
          },
          "value": "top left"
        },
        {
          "label": {
            "de": "Oben Mitte",
            "en": "Top center",
            "es": "Superior al centro",
            "fr": "En haut au centre",
            "it": "In alto al centro",
            "ja": "中央上",
            "pt-BR": "Superior centro"
          },
          "value": "top center"
        },
        {
          "label": {
            "de": "Oben rechts",
            "en": "Top right",
            "es": "Superior derecha",
            "fr": "En haut à droite",
            "it": "In alto a destra",
            "ja": "右上",
            "pt-BR": "Superior direito"
          },
          "value": "top right"
        },
        {
          "label": {
            "de": "Mitte links",
            "en": "Middle left",
            "es": "Al medio a la izquierda",
            "fr": "Au milieu à gauche",
            "it": "In mezzo a sinistra",
            "ja": "中央左",
            "pt-BR": "Meio esquerdo"
          },
          "value": "center left"
        },
        {
          "label": {
            "de": "Mitte mittig",
            "en": "Middle center",
            "es": "Al medio al centro",
            "fr": "Centrée au milieu",
            "it": "In mezzo al centro",
            "ja": "中央中",
            "pt-BR": "Meio centro"
          },
          "value": "center center"
        },
        {
          "label": {
            "de": "Mitte rechts",
            "en": "Middle right",
            "es": "Al medio a la derecha",
            "fr": "Au milieu à droite",
            "it": "In centro a destra",
            "ja": "中央右",
            "pt-BR": "Meio direito"
          },
          "value": "center right"
        },
        {
          "label": {
            "de": "Unten links",
            "en": "Bottom left",
            "es": "Inferior izquierda",
            "fr": "En bas à gauche",
            "it": "In basso a sinistra",
            "ja": "左下",
            "pt-BR": "Inferior esquerdo"
          },
          "value": "bottom left"
        },
        {
          "label": {
            "de": "Unten mittig",
            "en": "Bottom center",
            "es": "Inferior al centro",
            "fr": "En bas au centre",
            "it": "In basso al centro",
            "ja": "中央下",
            "pt-BR": "Inferior centro"
          },
          "value": "bottom center"
        },
        {
          "label": {
            "de": "Unten rechts",
            "en": "Bottom right",
            "es": "Inferior derecha",
            "fr": "En bas à droite",
            "it": "In basso a destra",
            "ja": "右下",
            "pt-BR": "Inferior direito"
          },
          "value": "bottom right"
        }
      ]
    },
    {
      "type": "color",
      "id": "background_color",
      "label": {
        "de": "Hintergrundfarbe",
        "en": "Background color",
        "es": "Color de fondo",
        "fr": "Couleur de fond",
        "it": "Colore sfondo",
        "ja": "背景の色",
        "pt-BR": "Cor do fundo"
      },
      "default": "#f9f9f9"
    }
  ],
  "blocks": [
    {
      "type": "collection",
      "name": {
        "de": "Kategorie",
        "en": "Collection",
        "es": "Colección",
        "fr": "Collection",
        "it": "Collezione",
        "ja": "コレクション",
        "pt-BR": "Coleção"
      },
      "settings": [
        {
          "type": "collection",
          "id": "collection",
          "label": {
            "de": "Kategorie",
            "en": "Collection",
            "es": "Colección",
            "fr": "Collection",
            "it": "Collezione",
            "ja": "コレクション",
            "pt-BR": "Coleção"
          }
        }
      ]
    }
  ],
  "presets": [
    {
      "name": {
        "de": "Kategorien-Liste",
        "en": "Collection list",
        "es": "Lista de colecciones",
        "fr": "Liste des collections",
        "it": "Elenco delle collezioni",
        "ja": "コレクションリスト",
        "pt-BR": "Lista de coleções"
      },
      "category": {
        "de": "Kategorie",
        "en": "Collection",
        "es": "Colección",
        "fr": "Collection",
        "it": "Collezione",
        "ja": "コレクション",
        "pt-BR": "Coleção"
      },
      "blocks": [
        {
          "type": "collection"
        },
        {
          "type": "collection"
        },
        {
          "type": "collection"
        }
      ]
    }
  ]
}
{% endschema %}
0 Likes
tim
Shopify Expert
2937 141 982

This is an accepted solution.

Hi there, 

If you like to change the aspect ratio of your collection list images, i'd suggest adding the following code to the bottom of your stylesheet:

.template-index .collection-list-grid__item {
    margin: 15px;       /* match padding */
}
.template-index .collection-list-grid__item-container {
    padding-bottom: 150%;       /* desired height/width ratio */
}
Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
0 Likes
DIAGRM
New Member
2 0 0

This worked great. Thanks so much!!

0 Likes
recphilly
New Member
3 0 0

Looking to do the same for our product images on a collection page. Where exactly should


@tim wrote:

Hi there, 

If you like to change the aspect ratio of your collection list images, i'd suggest adding the following code to the bottom of your stylesheet:

.template-index .collection-list-grid__item {
    margin: 15px;       /* match padding */
}
.template-index .collection-list-grid__item-container {
    padding-bottom: 150%;       /* desired height/width ratio */
}


this addition to coding be inputted?

0 Likes
samchallen
New Member
1 0 0

Im trying to create a new section that I can change the product image sizes for a single section, not each section is this possible

0 Likes