Content Templates

You can structure your website’s content into pre-defined sets of blocks so content authors can edit content without knowing advanced HTML concepts.

Instead of only providing you with a single rich text editor per page, Live Editor gives you the opportunity to break each page down into several blocks of content.

These blocks of content can be simple elements like text, images, videos, audio, and files. Or you can create your own content templates to mix and match these elements together as one unit.

Live Editor ships with a set of base content templates based on the individual content elements available:

• Audio
• Date
• File
• Image
• Link
• Text
• Video

You can also create your own custom content templates to mix and match one or more of these different elements.

Base content templates

When you open a new Live Editor account, your new site will come with a set of base content templates. It’s possible that you could create an entire website based on these base content templates, and that may be all that you need.

Following is the list of base content templates.

Text content templates

Text

Live Editor’s rich text editor allows content authors to create blocks of text and format them with WYSIWYG tools.

Based on the text block object.

Date content templates

Date

Date and time can be recorded and formatted in a myriad of different ways.

Based on the date block object.

Media content templates

Image

Allows content authors to upload, format, and reference standalone images.

Based on the image block object.

Video

Allows content authors to upload and embed videos. Also includes the ability to reference videos uploaded to YouTube and Vimeo.

Based on the video block object.

Audio

Allows content authors to upload and embed audio files.

Based on the audio block object.

File

Allows content authors to upload and embed and/or link to files for download.

Based on the file block object.

Custom content templates

Custom content templates allow you to group together any of the base content elements and define how it all should be displayed in different scenarios.

Consider an About Us page that lists your company’s key staff members. You’ll typically want to list the same type of information for each staff member (name, photo, job title, department, short bio, etc.), and you’ll typically want for the HTML to be the same for each staff member’s listing.

Rather than training content authors on how to structure the HTML for each listing and teaching them how to edit each photo to fit within a certain set of dimensions, you can create a custom content template that asks for the data and then formats it within pre-defined HTML markup for them automatically.

What’s more, you can use displays to provide content authors with options on how they want to display each piece of content in different scenarios. For example, perhaps you only want to show the staff member’s name, job title, and a thumbnail of their headshot on a listing page, but then you want to link it to a full bio that lists the rest of the information.

This is entirely possible with custom content templates, and the content author will only need to maintain one content item to update multiple pages.

Generating a new custom content template

Using Live Editor CLI, run the liveeditor generate content_template command to generate a new content template with the data that we need:

liveeditor generate content_template staff name:text photo:image job_title:text department:text bio:text

This command will generate the skeleton of a new content template titled “Staff” with 5 blocks:

1. Name: text
2. Hire Date: date
3. Photo: image
4. Job Title: text
5. Department: text
6. Bio: text

You could also run the command without all of the blocks if you want to define those later:

liveeditor generate content_template staff

If you look at your theme’s folder structure, you’ll see some new files and folders:

• ...
• content_templates
  • staff
    • default_display.liquid
  • content_templates.json
• ...

In most cases, this skeleton is just a start for configuring the content template. Read on for more details about the available options.

Content template theme file and directory structure

Within the content_templates folder of your theme are 2 types of files.

content_templates.json config file

Within the root content_templates folder is a JSON config file named content_templates.json.

This file allows you to configure your theme’s content templates, their blocks, and displays.

Here is a sample content_templates.json file containing our example staff content template, its blocks, and its displays:

      {
        "content_templates": [
          {
            "title": "Staff",
            "description": "Staff member's details and biography.",
            "icon_title": "user",
            "blocks": [
              {
                "title": "Name",
                "data_type": "text",
                "required": true,
                "inline": true,
                "var_name": "full_name"
              },
              {
                "title": "Hire Date",
                "data_type": "date"
              },
              {
                "title": "Photo",
                "data_type": "image"
              },
              {
                "title": "Job Title",
                "data_type": "text",
                "required": true,
                "inline": true
              },
              {
                "title": "Department",
                "data_type": "text",
                "required": true,
                "inline": true
              },
              {
                "title": "Bio",
                "data_type": "text",
                "required": true
              },
              {
                "title": "Full Bio Link",
                "data_type": "link"
              }
            ],
            "displays": [
              {
                "title": "Default",
                "description": "Full biography with all details.",
                "default": true
              },
              {
                "title": "List",
                "description": "Displays limited details about each staff member. For use on a screen listing multiple staff members."
              },
              {
                "title": "Featured"
                "description": "For use on a page that lists at least one "featured" staff member."
              }
            ]
          }
        ]
      }

As you can see, there are 3 types of data represented here: (1) a top-level content template with a (2) collection of blocks and a (3) collection of displays.

Content template config options

A content template can be configured with these options:

Block config options

A block listing within the blocks array can contain these options:

Display config options

A display listing within the displays array can contain these options:

Marking up displays using Liquid

Now that you have the content template configured using content_templates.json, you can write the front end code using Liquid markup.

When creating content templates, there will be a subfolder within the content_templates folder for each content template. Within these subfolders, you store .liquid files for defining how data within the content editor and final website should be displayed.

With our example “Staff” content template, there should be a folder at content_templates/staff that contains these Liquid templates. We will be working with a couple displays:

1. Default will represent a full staff record and will appear on its own page.
2. List will represent part of the staff record, intended to be displayed on a list page with multiple staff members, with links to separate pages for each staff member.

So our folder tree should look like this:

• ...
• content_templates
  • staff
    • default_display.liquid
    • list_display.liquid
  • content_templates.json
• ...

When working with these files, we can use all that Live Editor has to offer with its implementation of Liquid.

Also, we have access to each block represented for the content template in content_templates.json. Using our example content_templates.json file, we have these variables at our disposal within each .liquid file:

• full_name
• hire_date
• photo
• job_title
• department
• bio
• full_bio_link

Using that, we can code up a list_display.liquid template fairly easily, using Liquid markup however we want:

      <div class="staff-list">
        <div class="staff-list-photo">
          {% if photo %}
            <img
              src="{{ photo.url | media_size: '200x300' }}"
              alt="{{ full_name }}"
            >
          {% comment %}
            Default to a "blank" photo if there is no photo uploaded.
          {% endcomment %}
          {% else %}
            <img src="{{ 'images/staff-list-blank-photo.png' | asset_url }}" alt="">
          {% endif %}
        </div>
      
        <h2 class="staff-list-name">
          <a href="{{ bio_page.path }}" class="staff-list-link">
            {{ full_name }}
          </a>
        </h2>
      
        <p class="staff-list-job-title">
          {{ job_title }}
        </p>
      </div>

The same goes for default_display.liquid:

      <div class="staff-default">
        <div class="staff-default-photo">
          {% if photo %}
            <img
              src="{{ photo.url | media_size: '600x900' }}"
              alt="{{ full_name }}"
            >
          {% comment %}
            Default to a "blank" photo if there is no photo uploaded.
          {% endcomment %}
          {% else %}
            <img src="{{ 'images/staff-default-blank-photo.png' | asset_url }}" alt="">
          {% endif %}
        </div>
      
        <div class="staff-default-description">
          <h2 class="staff-default-name">
            <a href="{{ full_bio_link.path }}" class="staff-default-link">
              {{ full_name }}
            </a>
          </h2>
      
          <p class="staff-default-job-title">
            {{ job_title }}
          </p>
      
          <p class="staff-default-department">
            {{ department }}
          </p>
      
          {% if hire_date %}
            {% assign current_year = now | date: '%Y' %}
            {% assign year = hire_date | date: '%Y' %}
            {% assign num_years = current_year | minus: year %}
      
            <p class="staff-hire-date">
              {% if num_years == 0 %}
                Rookie
              {% else %}
                On board for
                {{ num_years }}
                {{ num_years | pluralize: 'year', 'years' }}
              {% endif %}
            </p>
          {% endif %}
      
          <div class="staff-default-bio">
            {{ bio }}
          </div>
        </div>
      </div>

The main point of showing these 2 examples is to demonstrate that you can include as little or as much data from the content template into each display, and you can mark up each display differently if needed.

For more information about using the Liquid templating language in Live Editor, refer to the Liquid Reference.

Next steps

Learn some helpful rules of thumb for authoring your code so that it works well with Live Editor’s flagship Inline Editor feature in the Designing for the Inline Editor guide.

Or learn everything that you need to know about Live Editor’s implementation of Liquid in the Liquid Reference.