For loop on blocks does grabs only one out of 3 images

Highlighted
New Member
1 0 0

Hello everyone,

I'm pretty fresh in this community. I'm trying to develop a custom section for my friend. The problem is that I used for loop to iterate through blocks. I wanted to assign URLs from image_picker into variables and put them into HTML. Somehow fro loop grabs only one image, the rest stays empty. does anyone know what am I doing wrong?  

{% for block in section.blocks %}
    {% assign horse_img = block.settings.horse %}
	{% assign prod_btl = block.settings.productBottle %}
    {% assign prod_name = block.settings.productName %} 
{% endfor %}
<div class="section">
    <div class="col1">
      <div data-w-id="df97a982-6b5a-1993-68f5-bbd4bee59759" class="product-circle prod1">
        <div class="dotted-stroke">
          <div class="col1">
            <img id="productBottle" src="{{prod_btl | img_url: 'master' }}" loading="lazy" sizes="270px" style="-webkit-transform:translate3d(-5PX, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(-1DEG) skew(0, 0);-moz-transform:translate3d(-5PX, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(-1DEG) skew(0, 0);-ms-transform:translate3d(-5PX, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(-1DEG) skew(0, 0);transform:translate3d(-5PX, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(-1DEG) skew(0, 0)" alt="" class="image"></div>
          <div class="col2 inside">
            <img id="productName" src="{{prod_name | img_url: 'master' }}" loading="lazy" width="150" alt="" class="product-name">
            <a href="#" class="btn w-button">Read more</a></div>
        </div>
      </div>
    </div>
    <div class="col2">
     
<!--       <div class="horse-image prod1" style="background-image: url( {{horse_img | img_url: '1024x' }} );">
      -->
 		
		
      <div class="horse-image prod1" style="background-image: url( {% if horse_img != blank %} {{horse_img | img_url: '1024x' }} {% else %} image-bar__overlay {% endif %}  );">

        
        <div class="dotted-stroke col2"></div>
      </div>
    </div>
  </div>


{% schema %}
  {
    "name": "PoN custom circle",
    

	"blocks": 	[
				{	"type": "image",
					"name": "Etykieta produktu",
					"settings": [{"type": "image_picker",
									"id": "productBottle",
									"label": "Etykieta produktu"
								}]
				},
				{	"type": "image2",
					"name": "Nazwa produktu",
					"settings": [{"type": "image_picker",
									"id": "productName",
									"label": "nazwa produktu"
								}]
				},
				{	"type": "image3",
					"name": "Zdjęcie konia",
					"settings": [{"type": "image_picker",
									"id": "horse",
									"label": "Zdjęcie konia"
								}]
				}
				],
	"presets":  [
				{
					"category": "PoN custom design",
					"name": "sekcja z kolkami",
					"blocks": [
						{"type": "image"
						},
						{"type": "image3"
						},
						{"type": "image2"
						}
							]
				}
				]
  }
{% endschema %}

 

 

0 Likes
Highlighted
Pathfinder
117 23 35

@Adameil You need to write your HTML within for loop, something like this

{% for block in section.blocks %}
  {% assign horse_img = block.settings.horse %}
  {% assign prod_btl = block.settings.productBottle %}
  {% assign prod_name = block.settings.productName %} 

  <div class="section">
    <div class="col1">
      <div data-w-id="df97a982-6b5a-1993-68f5-bbd4bee59759" class="product-circle prod1">
        <div class="dotted-stroke">
          <div class="col1">
            <img id="productBottle" src="{{prod_btl | img_url: 'master' }}" loading="lazy" sizes="270px" style="-webkit-transform:translate3d(-5PX, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(-1DEG) skew(0, 0);-moz-transform:translate3d(-5PX, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(-1DEG) skew(0, 0);-ms-transform:translate3d(-5PX, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(-1DEG) skew(0, 0);transform:translate3d(-5PX, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(-1DEG) skew(0, 0)" alt="" class="image"></div>
          <div class="col2 inside">
            <img id="productName" src="{{prod_name | img_url: 'master' }}" loading="lazy" width="150" alt="" class="product-name">
            <a href="#" class="btn w-button">Read more</a></div>
        </div>
      </div>
    </div>
    <div class="col2">
     
<!--       <div class="horse-image prod1" style="background-image: url( {{horse_img | img_url: '1024x' }} );">
      -->
    
    
      <div class="horse-image prod1" style="background-image: url( {% if horse_img != blank %} {{horse_img | img_url: '1024x' }} {% else %} image-bar__overlay {% endif %}  );">

        
        <div class="dotted-stroke col2"></div>
      </div>
    </div>
  </div>
{% endfor %}



{% schema %}
  {
    "name": "PoN custom circle",
    

  "blocks":   [
        { "type": "image",
          "name": "Etykieta produktu",
          "settings": [{"type": "image_picker",
                  "id": "productBottle",
                  "label": "Etykieta produktu"
                }]
        },
        { "type": "image2",
          "name": "Nazwa produktu",
          "settings": [{"type": "image_picker",
                  "id": "productName",
                  "label": "nazwa produktu"
                }]
        },
        { "type": "image3",
          "name": "Zdjęcie konia",
          "settings": [{"type": "image_picker",
                  "id": "horse",
                  "label": "Zdjęcie konia"
                }]
        }
        ],
  "presets":  [
        {
          "category": "PoN custom design",
          "name": "sekcja z kolkami",
          "blocks": [
            {"type": "image"
            },
            {"type": "image3"
            },
            {"type": "image2"
            }
              ]
        }
        ]
  }
{% endschema %}
- Was my reply helpful? Click Like and Accept as Solution
- Want to implement a custom solution? Feel free to contact me at waqas4346@gmail.com
0 Likes