0

I want to create an extension which contains an AssetBundle, which provides a simple static CSS file. In that static CSS file, I want to use an image file, which is also part of the extension.

How can I know the image file's URL so I can use it inside the CSS file?

If I register the image file as an asset, it will get a random URL that we cannot predict! So it would be impossible to do something like:

.some-selector { background: url('/assets/?????/image.jpg'); }

So, how can this be done?

For further clarification, here is an example folder structure of such extension:

  • extension/Widget.php - some widget that registers our AssetBundle
  • extension/AssetBundle.php - asset bundle that registers the css
  • extension/assets/css/style.css - the css
  • extension/assets/images/image.jpg - the image we want to use inside style.css
mae
  • 14,947
  • 8
  • 32
  • 47

1 Answers1

1

In this case I would recommend to include also a new css files into the asset definition. In this case the image and css file will be in the assets folder and you can specify relative path, not absolute. e.g. /assets/a4dc56/image.jpg

/assets/a4dc56/style.css with the following content:

.some-selector {
    background: url('image.jpg');
}
Viktar Barysevich
  • 36
  • 1
  • Brilliant. I knew there had to be an obvious solution. I ended up including the image through a relative path as such: `background: url('../images/image.jpg');` – mae Mar 28 '17 at 10:42
  • How about using `AssetManager` just like: `$bundle = AppAsset::register($this);` then: ``? – Ibrahim.H Nov 24 '19 at 11:26