Using CMSEditableImage to set a background image

Tim G. asked on June 19, 2018 10:46

I'v created a web part which contains a CMSEditableImage region but instead of rendering this to the page as an <img /> I'd like to use this to populate a background image style on the parent div. E.g I have something like the following:

<div id="imageWrapper" style="background-image: url('CMSEditableImage path should go here')">
<cms:CMSEditableImage ID="wpImageTextBlockImage01" runat="server"  />
</div>

How can I achieve this? I don't want to introduce a document type property for this as these webparts may be used multiple times on each adhoc page template. This also needs to stay easy for the user to edit through the CMS.

Is it possible to get the path on pre-render or init, replace the imageWrapper inline style and make the CMSEditbleImage visibility false?

The webpart is a .ascx template. Any help much appreciated - I couldn't find an answer elsewhere on the forums.

cmseditableimage backgrou

Recent Answers

Peter Mogilnitski answered on June 19, 2018 11:34

You can put your div in Content Before and Content After.

0 votesVote for this answer Mark as a Correct answer

Tim G. answered on June 19, 2018 11:37

Can you expand on this with the full example of content before below? How do you get the Image filepath to populate this?

0 votesVote for this answer Mark as a Correct answer

Peter Mogilnitski answered on June 19, 2018 14:47 (last edited on June 19, 2018 15:06)

Sorry I guess I didn't catch it the first time. You want Editable image turn into background. You keep content before and content after. but need to add client side script with jQuery: take out from src from img and put it as background for div.

0 votesVote for this answer Mark as a Correct answer

Tim G. answered on June 19, 2018 16:14

Thanks for the answer but I was hoping there was a cleaner way of doing this without having to resort to a jQuery workaround. I'd already implemented a similar solution as a placeholder solution so I can continue development but surely this isn't an edge case request - it seems like a fairly obvious thing to want to do.

Any other suggestions?

0 votesVote for this answer Mark as a Correct answer

Brenden Kehren answered on June 19, 2018 17:27

Why create a custom webpart for this? Use a custom page type and place a repeater on the page selecting only 1 page directly below the parent and display your <div> with your background image url they select when they add the page type.

Over-engineering/complicating it doesn't make for easy maintenance later on.

0 votesVote for this answer Mark as a Correct answer

Tim G. answered on June 19, 2018 17:47

Brendan - I don't think your solution would work. What I want to create are re-usuable content areas which are used across a variety of pages. This webpart is just one 'layout block' which gets combined with others when creating the pages to be edited.

Is there really no way to do this?

1 votesVote for this answer Mark as a Correct answer

Brenden Kehren answered on June 19, 2018 17:57

An editable image/text webpart does NOT have resuable content at all; it is bound to the page the editable image/text webpart is placed on. The webpart is reusable but the content itself is not. Plus the editable image/text webparts have wrapping containers which cause problems when you simply want only the URL. If you really want to make your own control then I suggest cloning the ...\CMS\CMSModules\PortalEngine\Controls\Editable\EditableImage.ascx.cs control and making your own to do what you want.

On another note, we use the repeater/universal viewer and custom page type option all the time without issue. It allows the editor to place content in the content tree, have it show on the page in the order they have it in the content tree and rearrange them as they wish.

0 votesVote for this answer Mark as a Correct answer