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, consider the following Blog-Post content type. The site’s home page displays a list of Blog-Post items. When a blog post is clicked on the home page, the Details page shows details about that blog post.

Description of content-type-and-layouts.png follows
Description of the illustration content-type-and-layouts.png

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 Content and Experience, choose Developer > Components > Create > Create Content Layout.

  • In an OCE Toolkit project, use the cec create-contentlayout command.

Content and Experience 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.js

    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 and Experience server. Most of the assets are stored in the Oracle Content and Experience 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.js and used in layout.html.

The simplest way to generate an absolute URL is to use the built-in requirejs file. Define 'require' as the dependency and use require.toURL() to generate the URL, as the following code shows:

], function (require, $, Mustache, templateHtml, css) {
    'use strict';

   var imageURL = req.toUrl('./images/background.jpg');

The following topics describe how to develop content layouts:

Related Topics

For information about how to manage content layouts, see Manage Custom Components and Layouts.

For information about using digital assets and other content items in a site, see Use Assets and Manage Digital Assets in Collaborating on Documents with Oracle Content and Experience.