Link to uploaded images in custom code

I’d like to create a pseudo element (:after) with a background image.

  • I’ve successfully created the pseudo element with custom code, no problem.
  • However, I don’t know how to find the relative url for an image I’ve uploaded to the Asset Manager.

.licensing-a:after {
content: “”;
background: url(products.png);
opacity: 0.2;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}

Like I said, the pseudo element is working just fine but I don’t know how to link to the image. Thanks!

I can see a problem here. If your image is only linked by the CSS with custom code, chances are it’s not going to be published or exported. A workaround would be to create a page only for displaying the image so it’s part of the published datas. Do that, then analyse the url of the image once published, from there you can deduct the relative path to your image… don’t you?

2 Likes

When images are uploaded they are uploaded to a CDNso they are not relative. In the exporting process we make them relative. Try to add the image to the asset manager and then copy the URL in the image settings (an icon next to the filename). And try to use that.

When duplicating sites we clean up unused images from the asset manager. I’m not sure if it would clean up that image so you’d have to test it. If you’re not planning on duplicating the site then don’t worry about this.

That means all the images of the asset manager are published event if they’re not in any page? Or is the custom code being read to include possible images too?

That’s good to know.

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.