'Can't add image via Liquid in Shopify section

I already read the tutorial, documentary and looked for similar questions. I'm following instructions as I understood them, but I'm missing something here. I'm trying to add the possibility to add an image into a section. I can add an image in the backend, but it won't show.

The position the image with the id badges1 should be loaded:

    {%- when 'badges' -%}
            <div class="footer-block__details-content footer-block-badges {{ block.settings.alignment }}">
                  {%- if block.settings.badges1 != blank -%}
                    {{ block.settings.badges1 | img_url: '160x160', scale: 2 | img_tag: block.settings.badges1.alt }}
                  {%- else -%}
                    {{ 'logo' | placeholder_svg_tag: 'placeholder-svg' }}
                  {%- endif -%}
              </div>
    {%- endcase -%}

The Setting:

    {
    "type": "badges",
    "name": "Badges",
    "settings": [
            {
            "type": "image_picker",
            "id": "badges1",
            "label": "Image"
            },
            {
            "type": "image_picker",
            "id": "badges2",
            "label": "Image"
            }
    ]
    }
shopifyliquidshopify-templatenetworkingbrowserserverprocessing


Solution 1:[1]

You are trying to call block in your template code and block is missing in your schema setting. Use this code in your template code:-

 {%- when 'badges' -%}
                    <div class="footer-block__details-content footer-block-badges {{ block.settings.alignment }}">
                          {%- if block.settings.badges1 != blank -%}
                      <img class="if1img" src="{{block.settings.badges1  | img_url: '160x160' }}" alt="{{block.settings.heading1}}" />
                            
                          {%- else -%}
                            {{ 'logo' | placeholder_svg_tag: 'placeholder-svg' }}
                          {%- endif -%}
                       {%- if block.settings.badges2 != blank -%}
                              <img class="if1img" src="{{block.settings.badges2  | img_url: '160x160' }}" alt="{{block.settings.heading2}}" />
                          {%- else -%}
                            {{ 'logo' | placeholder_svg_tag: 'placeholder-svg' }}
                          {%- endif -%}
                      </div>

Solution 2:[2]

The server and the client communicate via a network socket. They pass data in a format that is not understandable for your browser. The way to get the example to run is to launch the server first and the client second (you need to start the Processing environment two times). Now you should be able to draw lines on one side and see them being copied on the other side.

If you want to inspect what the server and client are doing, you can add println statements to the code.

The example code that you are using can be found here on GitHub: https://github.com/processing/processing/tree/master/java/libraries/net/examples

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Freek de Bruijn

Related Questions