How can I create a logo bar loop or display all logos in one row?

Technical Q&A
1

Hi guys,

I used this amazing code


  ## {{ section.settings.title | escape }}
  {% if section.blocks.size > 0 %}
    
      {% for block in section.blocks %}
        - {% if block.settings.link != blank %}
            
            {% endif %}
            {% if block.settings.image != blank %}
              {{ block.settings.image | img_url: '150x150', scale: 2 | img_tag: block.settings.image.alt, 'logo-bar__image' }}
            {% else %}
              {{ 'logo' | placeholder_svg_tag: 'placeholder-svg' }}
            {% endif %}
            {% if block.settings.link != blank %}
            
            {% endif %}
        
      {% endfor %}
    

  {% endif %}

{% schema %}
  {
    "name": "Logo list",
    "class": "index-section",
    "max_blocks": 20,
    "settings": [
      {
        "type": "text",
        "id": "title",
        "label": "Heading",
        "default": "Logo list"       
      },
	  {
        "type": "select",
        "id": "logo_width",
        "label": "Logo width",
        "default": "75px",
        "options": [
          {
            "label": "Super Extra Small",
            "value": "75px"
          },
          {
            "label": "Extra Small",
            "value": "100px"
          },
          {
            "label": "Small",
            "value": "125px"
          },
          {
            "label": "Medium",
            "value": "150px"
          },
          {
            "label": "Large",
            "value": "175px"
          },
          {
            "label": "Extra Large",              
            "value": "200px"
          }
        ]
      }
    ],
    "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 %}

to create logo bar section, but what i would like to do is to create a loop for those logos to move when client visits. Or at least to make all logos appear in one row, as you can see they started to appear in second row.

logo slider.jpg
logo slider.jpg1290Ă—290 22.2 KB

Cheers

2

Hi @IgorMAXIT

Would you mind sharing your store’s URL so we can provide the correct solution? Let me know!

3

Hi @JHKCreate ,

I’m sorry but the store is not published yet..

Can I provide you with some more information or screenshots?

4

We can adjust this without the need to see it published if you’d like, let me know!

5

Hello,

Thank you, URL: https://urban-diamond-2.myshopify.com/

6

Just sent you a Collaborator access request!

1 Like
7

Accepted :slightly_smiling_face:

8

HI @IgorMAXIT

Code adjusted was the following (display & padding properties):

.logo-bar-section {
    max-width: {{ section.settings.logo_width }};
    display: inline-block;
    margin: 0 27.5px 35px;
    text-align: center;
    display: table-cell;
    padding: 15px;
  }

Should that help answer your query, we always appreciate liking & marking an as answer to let the community find quality solutions faster. Thanks!

9

HI!

I understand the solution, amazing work!

But now changing the size of logos to more than 150px does not work, can both those features work together or i have to pick one?

10

The way I see it, in order for the images to always take the full width it won’t make sense to hardcode a “px” value as this will remain the same on all screens, resulting in the issue you saw at the beginning. Let me know!

11

Hi,

I’m not really sure what to do about it.

The solution is not really what i had in mind, but maybe it’s not possible to do it that way.

The solution you provided does not work well - eg. if i add more logos and make it like 20, they all will be super tiny in order for them to fit all together in one page - we have a situation now on mobile that logos are super super super tiny - they all are trying to fit in one page.

My initial idea was that they all are on a moving loop, only 5-6 logos are visible at the same time (depending on the screen size). I know making this feature responsive is another issue, but at this moment it’s not working really well

mobile version on shop.png
mobile version on shop.png386Ă—355 75.9 KB