Boundless - Collection List Square change to Rectangle?

Solved
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
Highlighted

Success.

Shopify Partner
2000 25 540

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? This is my Paypal too :)
0 Likes
New Member
2 0 0

This worked great. Thanks so much!!

0 Likes