image_picker pulls from assets instead of files

batulkr
Excursionist
43 1 2

Hey guys,

 

I am trying to pull pics thorugh image picker, displaying as background image. I have put the code below to pull the pics from "files", but no matter what filter I use(img_url, file_img_url), it keeps trying to pull from assets which lead to have a no image there. I put the code below for you to understand: 

 

 

{
              "id": "one-third-image",
              "type": "image_picker",
              "label": "Select Image"
}
  .AboutUs__one-third-image {
  background: url('{{ section.settings.one-third-image | img_url }}');
    max-width: 920px;
    display: block;
}

 

 Ekran Alıntısı.PNG

Hope someone can help me with that.

 

Thanks

Replies 4 (4)

Ninthony
Shopify Partner
2329 350 1023

I think it's probably because you're not providing it any parameters. Try giving it like this:

.AboutUs__one-third-image {
  background: url('{{ section.settings.one-third-image | img_url: "master" }}');
    max-width: 920px;
    display: block;
}

 

That'll output whatever the image's intrinsic dimensions are. You can provide it a size though:

.AboutUs__one-third-image {
  background: url('{{ section.settings.one-third-image | img_url: "1920x" }}');
    max-width: 920px;
    display: block;
}

 

That would give you a 1920px wide version of whatever image you're referrencing.

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
batulkr
Excursionist
43 1 2

I tried it out with giving parameters as well but no hope...

Peter_Wilcox
Shopify Partner
2 0 0

I'm trying to figure this out now too. Did you ever find the solution? I've been looking everywhere. Who would have thought just trying to display a background image using img_picker in a block would be so tricky.

marctroj
Shopify Partner
1 0 0
Set this in within the inline style tag like this 
style="background-image: url('{{ section.settings.one-third-image | img_url: 'master' }}');"