Editable content wrapped within a background div

Tommy De Notarpietro asked on March 21, 2016 16:35

What is a good way to show editable content ( editable text; rich text ) and an editable title ( editable text; text area ) both together wrapped in a div with a background image ( with the css background-image property ) which can be choosen by a content editor in the page tab ( like the editable image web part )?

Or is it better to use a property which can be accessed in the Form tab to achieve this?

editable image text backg

Correct Answer

Brenden Kehren answered on March 21, 2016 17:56

Good point Anton, then Tommy I'd suggest using a custom page type with the fields you require. This would be the best solution and requires no custom code. You can simply place a repeater webpart on the page, add the filtering properties and set a transformation. In the transformation you can add some minor logic to hide/show or set defaults if a field isn't entered.

3 votesVote for this answer Unmark Correct answer

Recent Answers

Anton Grekhovodov answered on March 21, 2016 17:11

Hi Tommy,

The best way to do it is create your own webpart, because if you use a property in the Form tab, you can't add several webparts (or widgets) on the page.

0 votesVote for this answer Mark as a Correct answer

Brenden Kehren answered on March 21, 2016 17:24

There are 2 ways out of the box I've used:

Create a specific zone which is wrapped with your outermost container and place those two webparts within that zone.
Have a single zone and place all your webparts in it. Then order your webparts so you have your title on top and your content below. Then in the Content before property of the title webpart, add your wrapping div opening tag. Then in the content webpart in the Content after property, add the closing div.

Both work well, I don't see a need for creating custom code or a specific webpart for simple layout HTML, just complicates things later when you go to maintain the site or perform an upgrade.

1 votesVote for this answer Mark as a Correct answer

Anton Grekhovodov answered on March 21, 2016 17:49

Brenden,

But how will he manage background-image css property for div? I've developed several websites with responsive design and everytime UI developers want to add image as background for content block (besides the image tag) and clients want to manage it when they populate content for pages.

And if the content zone is single for the page, it's possible to use page type field and manage it on the Form tab and use content before property for zone, otherwise it's weird.

1 votesVote for this answer Mark as a Correct answer