CODEWITHSUNDEEP
shopifyliquid
yungmang404
yungmang404

Reputation: 1

Can't add images to background url in liquid (shopify dev)

So I'm building a site for a client and it's my first time using liquid. The reqs don't deviate too much from the Dawn theme so I'm just editing that to suit her needs. Basically where I am stuck right now is getting dynamically setting multiple background-image for a div by iterating through a list of images. I have a meta object "campaign images" that is a list of images and a metafield under collections that references it called simply "images" (collection.metafields.custom.images). My code looks like this:

{% assign images = collection.metafields.custom.images.value %}

...

.homebg {
    height: 3000px;
    background:
      {% for file_link in images.campaign_images.value %}
      url("
        {{ file_link | image_url }}
        ")
        {% unless forloop.last %}
          ,
          {% endunless %} 
      {% endfor %}
    no-repeat center center;
    background-size: cover;
  }

It doesn't output anything.

I've tried accessing the meta object directly but to no avail (I just get the no-image url). What I am expecting in terms of output is something like:

.homebg {
    height: 3000px;
    background: url("image1.png"), url("image2.png"), url("image3.png") no-repeat center center;
    background-size: cover;
  }

Upvotes: 0

Views: 683

Answers (1)

Kanaiyalal Badal
Kanaiyalal Badal

Reputation: 59

You can check this solution it's working fine.

{% assign images = collection.metafields.custom.images.value %}

{% if array_of_image_objects %}
 {% for img in images %}
  <img src="{{ img | image_url }}">
 {% endfor %}
{% endif %}

I think we can't pass multiple images in background images using CSS. Also your for loop is wrong that's why doesn't get image URL.You can check solution below based on your code.

{% assign images = collection.metafields.custom.images.value %}

...

.homebg {
    height: 3000px;
    background:
      {% for file_link in images %}
      url("
        {{ file_link | image_url }}
        ")
        {% unless forloop.last %}
          ,
          {% endunless %} 
      {% endfor %}
    no-repeat center center;
    background-size: cover;
  }

Upvotes: 0

Related Questions