Image uploaded using image_picker not displaying

Highlighted
New Member
7 0 0

Hi for some reason, the image I uplaoded using image picker (I created a section block and put image picker) is not displaying and only showing a no image icon

 

https://kingvlad.myshopify.com/pages/macbook-pro

 

heres my block section code

<div id="products">
  <div class="macbook">
        <img src="{{ section.settings.sampleid | img_url: '200x200' }}" />
    test - {{ product.title }}
  </div>
 
</div>
 
{% schema %}
{
  "name": "image",
"max_blocks": 3,
 
  "blocks": [
    {
      "type": "image",
      "name": "Product Image",
      "settings": [
        {
        "id": "product",
        "type": "image_picker",
        "label": "Product Image"
        },
{
"type": "product",
        "id": "sampleid",
        "label": "Product"
}
      ]
    }
  ]
}
 
{% endschema %}
 
{% stylesheet %}
{% endstylesheet %}
 
{% javascript %}
{% endjavascript %}

heres my template code for the page I created

<div class="page-width">
<div class="grid">
<div class="grid__item medium-up--five-sixths medium-up--push-one-twelfth">
<div class="section-header text-center">
<h1>{{ page.title }}</h1>
</div>

<div class="rte">
{{ page.content }}
</div>
</div>
</div>
</div>


{% section 'block-sample' %}

and no, im not asking someone for help WITH payment, Im asking here to learn. 

0 Likes
Shopify Expert
10007 116 1822

@Kingvlad wrote:

and no, im not asking someone for help WITH payment, Im asking here to learn. 


I really do hope that you've not asked other questions here and forum members have tried to solicit work from you instead of helping. This is not what the forums are all about so if you've had this happen I'm sorry. Happy to look into those previous posts.

 

<img src="{{ section.settings.sampleid | img_url: '200x200' }}" />

In the code above it doesn't look like you're referencing that image. "sampleid" is not the image picker.
I can tell you exactly what to do here, but giving you a little nudge first to see if the above helps you figure it out. Reply back if you're still stuck.

 

 

 

 

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
Highlighted
Shopify Partner
18 2 2

 

Hi I have the following code in the textblocks.liquid file

 {% case block.type %}

                {% when 'hero' %}
                    {% include 'snippet_hero-banner' %}

                {% when 'program' %}
                    {% include 'snippet_module-program' %}
 {% endcase %}

 

Where the scheme in the same file is something like this

 

{% schema %}
{
      "blocks": [
        {
          "type": "hero",
          "name": "Hero Banner",
          "settings": [
            {
              "id": "bannerImage",
              "type": "image_picker",
              "label": "Banner Image"
            }
          ]
        }, 
....

Inside my snippet_hero-banner file I have something like 

 
<div>
    <img src={{}}/>
</div>
 

 

I am not sure how I can reference the image that I select from the image picker on the Shopify UI.

 

Can you please point me to some documentation and give me advice on how I can "pass props" in Shopify?

 

Thanks!

 

 
0 Likes
Highlighted
Shopify Partner
18 2 2

I see I need to reference it like this as I am using blocks!

   <img src="{{ block.settings.bannerImage | img_url: 'large' }}" alt="Team photo">
0 Likes
Highlighted
Explorer
81 8 11

here is i am adding my complete working solution for into section with text and image 

 

<div class="productListHome velaProducts" style="background-color: {{section.settings.color_bg }};
                                     {% if section.settings.padding_block !=blank %}padding:{{section.settings.padding_block}}; {% endif %}">
    <div class="container{% if section.settings.full_with %}-full{% endif %}">
        {%- if section.settings.title != blank -%}
            <h3 class="velaHomeTitle velaTitle text-center pd-list">
                {{ section.settings.title }}
            </h3>
        {%- endif -%}

        {%- if section.settings.sub-title != blank -%}
        <p class=" text-center pd-list-stlt">
            {{ section.settings.sub-title }}
        </p>
        {%- endif -%}

        {%- if section.settings.sub-title != blank -%}
        <img src="{{section.settings.why-img |  img_url: 'master'}}" alt="">
        {%- endif -%}
    </div>
</div>

{% schema %}
    {
        "name": "why intro",
        "class": "why-intro",
        "settings":[
            
            {
                "type": "checkbox",
                "id": "full_with",
                "label": "Enabel Full Width?"
            },           
            {
                "type": "text",
                "id": "title",
                "label": "Heading",
                "placeholder": "Heading"
            },
            {
                "type": "text",
                "id": "sub-title",
                "label": "Sub Heading",
                "placeholder": "Sub Heading"
            },
            {
                "type": "image_picker",
                "id": "why-img",
                "label": "why images"

            }
             
        ],
        "presets": [
            {
                "name": "Why intro ",
                "category": "CTA"
                 
            }
        ]
    }
{% endschema %}
0 Likes