Html Editor: a background-image is not visible

Claudio Morandi

Vote:

Hello

If I add an image using the correct button of the editor, the image comes out from media folder with this url: "/EPiServer/CMS/Content/globalassets/it/picture.jpg,,72?epieditmode=False".

Visiting that page from a browser not logged into episerver, the url of the image is different as it's like "/globalassets/picture.jpg", so it has been converted into a public url.

The problem comes when I need to write manually the html code of that content. Entering in the html code of the editor, I have to add a div tag with this inline style:

, but in this case, looking the page from a different browser (not logged in), the image is not visible as the url hasn't been converted into the correct one. That url is visible only for a logged administrator

Does anyone know what I could do?

#141358

Nov 12, 2015 17:43

Joshua Folkerts

Vote:

What you need is this. <div style="background-image: url(@Url.ContentUrl(Model.ImageContentReferenceHere))"/>

#141400

Nov 13, 2015 18:48

Claudio Morandi

Vote:

thank you Joshua but can I put code into the HTML Editor? :)

#141600

Nov 16, 2015 14:48

Erik Nordin Wahlberg

Vote:

Claudio, can't you just use the public url to the image? If not I guess you have to do your own parsing of the content and replace that URL.

#141604

Nov 16, 2015 14:59

Claudio Morandi

Vote:

hello Erik

Yes actually I must use the public url, written manually. It means the client can't choose it easily from the image button. Because sing the image button, it will put the private url of the image and not the pulic one. So The background would be visible only to cms administrators

#141605

Nov 16, 2015 15:03

Erik Nordin Wahlberg

Vote:

I know, when using a background-image I would probably solve it in another way than an XhtmlString.

#141606

Nov 16, 2015 15:20

Joshua Folkerts

Vote:

Sorry about that Claudio, The url should get re-written when you are not logged in. so when your logged in, you will see the "/EPiServer/CMS/Content/globalassets/it/picture.jpg,,72?epieditmode=False" but when your logged out, you will see "/globalassets/it/picutre.jpg". Just to clarify and cover all basis, when you logout, the image background disappears? or still has the wrong url?

#141607

Edited, Nov 16, 2015 15:22

Joshua Folkerts

Vote:

Another way you could do it is add a background propety to the pagetype of blocktype and then add the div yourself with the following code from the previous example. I think this approach is much easier for th editor and then the html is controlled by you

#141608

Nov 16, 2015 15:25