So your client wants to be able to insert more than just formatted text and images in his Publishing HTML field control? So he wants to insert those fancy looking boxes that your graphics designer made? Ah, but they are variable height and require several background images so we are talking about inserting a bit of “complex” html. How can we provide a user friendly interface with as little customisation as possible? I personally like the out-of-the-box Reusable Content functionality provided by MOSS 2007. I will demonstrate how it can be used to solve our problem.
Let’s take the following box for example:
Because of the vertical scaling requirements, the box needs to be split into three logical sections: header, content, footer. The html for the box shown is as follows:
Back to SharePoint - when you create a site collection using the Publishing Site Site Definition, you should have a list called Reusable Content in your root web. You can navigate to it using Site Content and Structure. We will create an item in this list that will be a “template” for our box.
Insert a new item into the Reusable Content list. Ensure you have Automatic Update turned OFF. Use the Edit HTML Source on the html editor to paste in the following html:
Now that we have our box html template in place, let’s go to our page that needs to have an instance of the box appear on it. Go to edit mode and locate your Publishing Html Field Control. Click the toolbar button Open a new window to Insert Reusable Content.
Select the item that we created earlier and press OK. If everything went well, an instance of the box with text placeholders has been inserted into your Publishing HTML Field control.
All there is left to do is to place the cursor in the text placeholders and replace it with the actual content.
On a final note, be aware of the risk involved when content editors play around with div elements. I have seen situations where content editors got “creative” and partially deleted boxes, leaving orphaned div opening tags and turning the layout of your page into scrambled eggs.
Let’s take the following box for example:
Because of the vertical scaling requirements, the box needs to be split into three logical sections: header, content, footer. The html for the box shown is as follows:
<div class="box"> <div class="box-header">This is the header</div> <div class="box-content">Lorem ipsum ...</div> <div class="box-footer"> </div> </div>The styling of the box, including the background images is done via CSS. The header and footer are fixed height, whereas the content area is variable height and has a background image that repeats in the vertical direction.
Back to SharePoint - when you create a site collection using the Publishing Site Site Definition, you should have a list called Reusable Content in your root web. You can navigate to it using Site Content and Structure. We will create an item in this list that will be a “template” for our box.
Insert a new item into the Reusable Content list. Ensure you have Automatic Update turned OFF. Use the Edit HTML Source on the html editor to paste in the following html:
<div class="box"> <div class="box-header">[HEADER] </div> <div class="box-content">[CONTENT]<div> <div class="box-footer"> </div> </div>The rest of the fields are for you to fill in. Save the item and then approve it (the Reusable Content list has content approval turned on by default).
Now that we have our box html template in place, let’s go to our page that needs to have an instance of the box appear on it. Go to edit mode and locate your Publishing Html Field Control. Click the toolbar button Open a new window to Insert Reusable Content.
Select the item that we created earlier and press OK. If everything went well, an instance of the box with text placeholders has been inserted into your Publishing HTML Field control.
All there is left to do is to place the cursor in the text placeholders and replace it with the actual content.
On a final note, be aware of the risk involved when content editors play around with div elements. I have seen situations where content editors got “creative” and partially deleted boxes, leaving orphaned div opening tags and turning the layout of your page into scrambled eggs.
Comments
Post a Comment