Develop Content Layouts

Content layouts help users view the data in content items through content list or content placeholder components used in sites pages. You can create multiple content layouts for a content type to create different views or to represent different parts of a content item.

For example, a Blog-Post content type may want different content layouts depending on how and where the Blog-Bost content is to be used. The site’s home page may display a list of Blog-Post items, but when a blog post is clicked on the home page, the Details page may show details about that blog post.

The Home page has a content list configured to list items of the Blog-Post content type, using the Blog-Post-Summary content layout as an item view.

The Details page uses the Blog-Post-Header content layout in a content placeholder to show a header image and title. The two-column section layout encloses two content placeholders, in 70 percent and 30 percent widths, using the Blog-Post-Content and Blog-Post-Author content layouts. As you can see, four different content layouts are used to visualize the same content Type.

You can create a content layout in either of two ways:

In Oracle Content Management choose Developer > View all Components > Create > Create Content Layout.
In an Content Toolkit project, use the cec create-contentlayout command.

Oracle Content Management creates a default content layout for the content type. To modify the default content layout, you can edit the following files:

assets/layout.html

Edit this file to change the HTML view.
assets/design.css

Edit this file to style the content layout.
assets/render.mjs

Edit this file to change the data used in layout.html or to add dynamic behavior to the content layout.

Content layout components render a content item from the Oracle Content Management server. Most of the assets are stored in the Oracle Content Management server. Sometimes you may want to use a static asset that is locally available in the content layout itself, such as a background image for styling purposes. For example, in the content layout that follows, the absolute URL to images/background.jpg can be generated in render.mjs and used in layout.html.

For render.mjs, the simplest way to generate the absolute URL is to use the built-in import.meta.url value to generate the URL, as the following code shows:

const assetsFolder = import.meta.url.replace('/render.mjs', '');
const imageURL = `${assetsFolder}/images/background.jpg`;

The following topics describe how to develop content layouts: