Background image content folder

Hi all -

I’m trying to get a customer background image to show that is relative to the path of the content folder and not the assets folder. At the moment I’m using:

       <div class="img" style="background-image: url('<?php echo $story->image()->url() ?>'); background-size: cover; background-repeat: no-repeat; background-position: center; "></div>

I’m using a simple image field in my blueprint:

        label: external image
        type: image

But when I do this the image is uploading to the content directory (in this case the ‘stories’ folder) and I can’t even hardcode this because the name obviously changes sometimes depending on ordering (like 4-content etc).

Is there a way that the file is either uploaded to the assets folder or that I can retrieve the path of the base content folder?


If you upload images to the /content folder, you can fetch them via the site object:

if($image = $site->image()) {
  echo $image->url();

You can’t upload images to the assets folder via the Panel, unless you create your own upload field or panel widget.

Thanks - is there a way we can use the crop feature if just retrieving the image url?


The crop function returns a file object so you can use the url() method on it: echo $page->image()->crop(300, 200)->url();

Yes, of course, if you have the image, you can crop it.

if($image = $site->image()) {
  echo $image->crop(300)->url();

Don’t use code like this below though (you will get an error if the image does not exist):

$page->image()->crop(300, 200)->url();

Awesome, thanks! So nifty!

As I said, don’t use it like that without checking if the image exists!

Yup, all added with a conditional and working well. :slight_smile: