Logo-Bar Image Size

Tourist
10 0 1

Hi,

 

I'm using the Debut theme, and I am trying to increase the size of the images on the "Logo-Bar" section (not my actual logo), and I'm not sure how to do it.  Here is the code :

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

  {% if section.blocks.size > 0 %}
    <div class="logo-bar{% if section.settings.title_enable %} logo-bar--large{% endif %}">
      {% for block in section.blocks %}
        <div class="logo-bar__item{% if section.settings.title_enable %} logo-bar__item--large{% endif %}" {{ block.shopify_attributes }}>
          {% if block.settings.link != blank %}
            <a href="{{ block.settings.link }}" class="logo-bar__link">
          {% endif %}
          {% if block.settings.image != blank %}
            {{ block.settings.image | img_url: '160x160', scale: 2 | img_tag: section.settings.image.alt, 'logo-bar__image' }}
          {% else %}
            {{ 'logo' | placeholder_svg_tag: 'placeholder-svg' }}
          {% endif %}
          {% if block.settings.link != blank %}
            </a>
          {% endif %}
        </div>
      {% endfor %}
    </div>
  {% endif %}

  {% if section.blocks.size == 0 %}
    {% include 'no-blocks' %}
  {% endif %}
</div>

{% schema %}
  {
    "name": "Logo list",
    "class": "index-section",
    "max_blocks": 20,
    "settings": [
      {
        "type": "text",
        "id": "title",
        "label": "Heading",
        "default": "Logo list"
      }
    ],
    "blocks": [
      {
        "type": "logo_image",
        "name": "Logo",
        "settings": [
          {
            "type": "image_picker",
            "id": "image",
            "label": "Image"
          },
          {
            "type": "url",
            "id": "link",
            "label": "Link",
            "info": "Optional"
          }
        ]
      }
    ],
    "presets": [
      {
        "name": "Logo list",
        "category": "Image",
        "blocks": [
          {
            "type": "logo_image"
          },
          {
            "type": "logo_image"
          },
          {
            "type": "logo_image"
          },
          {
            "type": "logo_image"
          }
        ]
      }
    ]
  }
{% endschema %}
 

Appreciate the help!

0 Likes
Explorer
57 0 18

You can probably fix this with a simple CSS rule or b changing one of these two parameters " '160x160', scale: 2 "
But I could offer you more help if you share your password for access to your shop page (NOT your account password).

Adele
0 Likes
Tourist
10 0 1

Sure, the password is "autawl"

 

I tried adjusting those numbers, but I didn't see any change.

 

Thanks!


Greg

0 Likes
Tourist
10 0 1

I actually found that there was a max width set in theme.scss.liquid.  Once I fixed that it worked great.

0 Likes
Tourist
16 0 0

hello. Have you found any solution? I need to do the same please

0 Likes
Shopify Partner
1 0 0

you might want to take a look at this documentation :

https://help.shopify.com/en/themes/liquid/filters/url-filters

0 Likes
Tourist
3 0 1

For those looking for a solution, here you go:

1) Go in your theme.scss.liquid.

2) Search for " .logo-bar__item ".

3) There, change the " max-width " to resize your logos.

 

I'm using Debut theme and it worked just fine! 

 

 

0 Likes
Tourist
6 0 0

Hi Greg,

 

May I ask where did you found the size limitation in theme.scss.liquid? 

Trying to enlarge the logo list images sizes, but nothing works... :/

 

Thanks in advance!

0 Likes