Changing The Size Of 'Logo List' Images In Impulse Theme

[sukalde]

Hi all,

I would love to get some help in changing the size of the images shown in the ‘Logo list’ in Impulse theme, I would like them smaller

Heres the code

{%- style -%}
.logo-bar--{{ section.id }} {
  opacity: {{ section.settings.logo_opacity | divided_by: 100.0 }};
}
{%- endstyle -%}

{%- if section.settings.divider -%}{%- endif -%}

  {%- if section.settings.title != blank -%}
    

      ## {{ section.settings.title | escape }}
    

  {%- endif -%}

  {%- if section.blocks.size > 0 -%}
    
      {%- for block in section.blocks -%}
        

          {%- if block.settings.link != blank -%}
            
          {%- endif -%}
          {%- if block.settings.image != blank -%}
            {%- assign img_url = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
            
          {%- else -%}
            {{ 'logo' | placeholder_svg_tag: 'placeholder-svg' }}
          {%- endif -%}
          {%- if block.settings.link != blank -%}
            
          {%- endif -%}
        

      {%- endfor -%}
    

  {%- endif -%}

{%- if section.settings.divider -%}
{%- endif -%}

{% schema %}
{
  "name": "t:sections.logo-list.name",
  "class": "index-section",
  "max_blocks": 12,
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "t:sections.logo-list.settings.title.label"
    },
    {
      "type": "range",
      "id": "logo_opacity",
      "label": "t:sections.logo-list.settings.logo_opacity.label",
      "default": 76,
      "min": 0,
      "max": 100,
      "step": 2,
      "unit": "%"
    },
    {
      "type": "checkbox",
      "id": "divider",
      "label": "t:sections.logo-list.settings.divider.label",
      "default": false
    }
  ],
  "blocks": [
    {
      "type": "logo_image",
      "name": "t:sections.logo-list.blocks.logo.name",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "t:sections.logo-list.blocks.logo.settings.image.label"
        },
        {
          "type": "url",
          "id": "link",
          "label": "t:sections.logo-list.blocks.logo.settings.link.label",
          "info": "t:sections.logo-list.blocks.logo.settings.link.info"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "t:sections.logo-list.presets.logo_list.name",
      "blocks": [
        {
          "type": "logo_image"
        },
        {
          "type": "logo_image"
        },
        {
          "type": "logo_image"
        },
        {
          "type": "logo_image"
        }
      ]
    }
  ]
}
{% endschema %}

Is there a way to make all the rows fit?

My current theme´s logo bar works as a slider, see bellow the swipe button, can i do that with coding in impulse?

if so, instead of making them smaller, I would just like to include a swipe button

[Ahsan_ANC]

You can copy the code of the section from your current theme and add it as a new section in your new theme.

[sukalde]

Hi there, thanks for the reply. I tried doing that but this is how it looks:

Here´s a preview link of the home page with my theme´s logo list

https://58ryt8xq8m0aqnha-3609919561.shopifypreview.com

Can i convert that section to a slider?

[Ahsan_ANC]

Did you try to find the slider option in the customizer?

[sukalde]

How can I do that?

I added my old theme´s brand code to my impulse theme, the section is showing up in my customizer

this is my old theme´s brand code:

{% if section.settings.display_brands_slider %}

{% endif %}
{% schema %}
  {
    "name": "Brands Block",
    "class": "index-section",
	"max_blocks": 10,
    "settings": [
	  {
        "type": "checkbox",
        "id": "display_brands_slider",
        "label": "Display Brands Slider?",
        "default": true
      }
	],
	"blocks": [
      {
        "type": "image",
        "name": "Image",
        "settings": [
          {
            "type": "image_picker",
            "id": "image",
            "label": "Image"
          },
          {
            "type": "text",
            "id": "title",
            "label": "Your Brands",
            "default": "Loremous"
          },
		  {
            "type": "url",
            "id": "link",
            "label": "Link",
            "info": "Optional"
          }
		]
	  }
	],
    "presets": [
      {
        "name": "Brands Block",
        "category": "Images"
      }
    ]
  }
{% endschema %}
{% javascript %}
function process_slick_event(evt) {
      var carousel = $('[data-owl]');
      if (carousel.length) {
         carousel.each(function(index, el) {
            $(this).owlCarousel($(this).data('owl'));
         });
	  }
}    
$(document)
 .on( 'shopify:section:load', process_slick_event )
 .on( 'shopify:section:unload', process_slick_event )
;
{% endjavascript %}

Maybe my new theme is missing a snippet or asset to make it work? I am not sure