image_picker pulls from assets instead of files

[batulkr]

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;
}

 

Hope someone can help me with that.

Thanks

[Ninthony]

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.

[batulkr]

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

[Peter_Wilcox]

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]

Set this in within the inline style tag like this 

style="background-image: url('{{ section.settings.one-third-image | img_url: 'master' }}');"