This article is a gentle introduction on IBM Web Content Manager 8.5. More information can be found on the IBM Web Content Manager product page.
** UPDATE ** There is a newly released Redbook on creating websites with WCM found here http://www.redbooks.ibm.com/redpieces/pdfs/sg248313.pdf.
We’ll create a simple YouTube video player. This could benefit someone in corporate communications that posts videos from a social media channel to the corporate internet. The video is already on YouTube, and we just need a way to display it on the intranet. The user in this scenario is non-technical, so we want an easy-to-approach solution that focuses on the content rather than the code that actually plays the video. To that end, we’ll use Web Content Manager (WCM) authoring and presentation templates to separate the business user from the developer as well as the content from how it gets displayed on a web page. By completing this tutorial, you’ll have:
- An easy way to add videos to web pages and edit details such as the title or description
- Separation of duties between authors and site designers
- Re-usability and flexibility of web elements (e.g. a video player)
We start by creating a WCM library. This is where all the separate artifacts will be stored.
Next we’ll create a site area, which is where content items are located. As part of the site area creation, I’ve also added the ibm.portal.toolbar.NewContent keyword. This causes the site area to be listed in the toolbar when editing pages. More on this topic later.
Next, we’ll create the authoring template. The authoring template allows the user to input and store content. As you’ll see, the authoring template is composed of elements (e.g. text field, link, image, etc). This means that the content author is merely entering information into a form. He or she isn’t concerned or even aware how this information will be displayed. That’s the job of the presentation template.
Start by selecting the New -> Authoring Template -> Content Template option in Library Explorer. Provide a name, “Add YouTube Video” for example. Select the Manage Elements button. This is where you’ll add the fields an author fills out to create content. Add each element based on the element type, name, and display title seen in the screenshot.
The subtle point here is that we’re making it so that the content author doesn’t need to know how the YouTube video gets displayed on a page, he or she just needs to provide the relevant details about the video.
Next, we’re going to create some defaults to lessen the amount of information the author provides. This is available on the Default Content tab of the template.
Great. Now you have a way of saving some information about a YouTube video. Next, we’ll see how a developer references that information to build the player. On every YouTube video’s page, you’ll see a link to share the video. One option is to embed the video in your site. We’ll take this bit of code and store it in WCM as a component.
Copy the embed code. Create a component from the New -> Component -> HTML option in Library Explorer. Paste the copied code into the HTML Element field. We’ll need to modify this though. The component shouldn’t use the existing width, height, and source URL attributes that you pasted, it should use the attributes that the content author inputs into WCM. To do that, we’ll simply swap the existing values with references to the content’s respective fields.
Select the 560 text between the quotes of the width attribute. Click Insert Tag to reference an element from content.
<iframe width="[Element type="content" context="current" key="width"]" height="[Element type="content" context="current" key="height"]" src="//www.youtube.com/embed/[Element type="content" context="current" key="videoid"]" frameborder="[Element type="content" context="current" key="border"]" allowfullscreen></iframe>
What we’ve done is create a snippet of markup that can be added to our website. When the markup is added to the web page, it will insert the discrete values from our width, height, and videoid into the right location. The result is markup (code) based on a particular piece of content. Save and close the component.
Next, you’ll create the presentation template. This is what displays the content, which might be a bit confusing because the component is also responsible for display. Correct, but think of components as the various pieces that make up a presentation. We want to promote as much re-usability across our site as possible. In this manner, I could have two presentation templates to show the video. Perhaps one is just the video and the second additionally shows the video’s title and description. In both presentations, I still want to play the video, which is the job of the component. Thus we create the player as a component and reference it in different presentations templates.
Select New -> Presentation Template. We’ll reference the component that was just created.
<!-- above is the component reference --> <br> <h1> <!-- the title will go here --> </h1> <h5> <!-- the description will go here --> </h5>
Use the Insert Tag button and reference the title and description properties of the content similar to the screenshot. These properties are different than the elements we referenced before. The title and description are properties that every piece of content has. So we’re just re-using something that every piece of content can have. Also notice that this is an EditableProperty, which means that a user will be able to edit the content in-line.
And revisit the authoring template to set the default presentation template to the one you just created. The result is that any content created from the authoring template will automatically use this presentation.
Finally, we’ll create a piece of content that describes the YouTube video. We can do that in two ways. One way is within Library Explorer by using the New -> Content -> Video Library / Add YouTube Video option. Fill in details related to the video on YouTube. Some of the details like width and height are using the defaults you set earlier.
You’ll also need to assign a workflow, which is the process content goes through after saving. For the sake of simplicity, we’ll reference an Express Workflow that exists by default (inside the “Web Content” library). This will publish the content immediately. You could however create a workflow that sends the content to an approver before being published.
This brings up a second way to author content. We can drag and drop this item to web pages multiple times, which creates a copy of the content item. Think of this as a placeholder that after being added to the page you then edit and update to reflect the intended video and details.
Viola! Above we see the content on our page. It includes our video player and the corresponding title and description. The blue boxes are the Editable Properties we included in our presentation template. This allows the user to easily edit the text in the blue boxes directly from the page. So we move from <today’s process> to drag-and-drop, click, edit, and save.
And even though this is a basic example, it highlights the tenants of good content management – focus on ease of use and cleanly separate site content from site design.