ADDING A IMAGE BLOCK TO IMAGE BANNER SECTION

[userp01]

 Hi everyone, can someone help me on the code? I want to add a custom block an image block to the Image Banner Section since currently it only has heading, subheading and button, I want to add an image block so that I can put the logo of the shop inside the image banner. 

[ZainAli · Accepted solution]

Hi,

Hope you are doing well.

You can add the image block in the Image Banner section by editing the code. To do that you need to go to the Themes section of your store and then click the Edit Code option of your theme and find the image-banner.liquid file.

Themes >  Edit Code  > image-banner.liquid

Now paste the code given below at the start of block settings as shown in the image.

    {
      "type": "image",
      "name": "Image",
      "limit": 1,
      "settings": [
        {
          "type": "image_picker",
          "id": "logo_image",
          "label": "Logo Image"
        }
      ]
    },

(See the image for code placement)

After adding block settings now you need to add the code to display the image. The code given below will help with that.
Paste this code in the for loop inside the case statement.

{%- when 'image' -%}
  <div class="image_container">
    {% if block.settings.logo_image != blank %}
      <img 
        class="image"
        src="{{ block.settings.logo_image | image_url }}" 
        loading="lazy" 
        height="{{ block.settings.logo_image.height }}" 
        width="{{ block.settings.logo_image.width }}"
      />
    {% else %}
      {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
    {% endif %}
  </div>

(See the image for code placement)

After that add some style on top of the file to make the image look decent.

  .image_container{
    height: 100px;
    width: 100px;
    margin: 0 auto;
  }
  .image_container .image{
    height: 100%;
    width: 100%;
    object-fit: cover;
  }

(See the image for code placement)

Now save the file and reload your theme customizer and see that your image block has been added.

Hopefully, it helps.

Regards,

Zain Ali.

[userp01]

THANK YOU VERY MUCH FOR THIS! 

[joolygoosh]

Hey there,

I tried out this solution and it worked great - the only thing is that the image does not scale when you move between mobile and desktop, so it looks great on mobile but tiny on desktop. Do you know a way to make the image scale up with moving to desktop?

[Studiotwelve]

Did you manage to get this to scale?

[myronmapmaker86]

How can I do this in Ride theme?

[nleav001]

Hello, 

How do I center the image block? It keeps showing up to the left side of the image banner.

Here is the URL

https://teeballers.com/pages/austin-hawks-volleyball

I know I can adjust the alignment in the customizer, but I am looking for the code

[Studiotwelve]

Did you manage to centre this image block? I’m unable to as well.

[ccxitlxn]

Thank you so much for this! If I want the image to be bigger, do I adjust the latter of the code to suit?