Image_picker pulls from assets instead of files

Technical Q&A
1

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
Ekran Alıntısı.PNG710×188 5.55 KB

Hope someone can help me with that.

Thanks

2

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.

3

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

4

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.

5

Set this in within the inline style tag like this
style=“background-image: url(‘{{ section.settings.one-third-image | img_url: ‘master’ }}’);”