# Creating a Content View

# Introduction

Welcome to a new tutorial in the Modyo training series. This tutorial will focus on Modyo Channels where you'll create a custom view to display posts created in Modyo Content.

The link between Content and Channels is one of the most important features when it comes to having dynamic and easy-to-manage sites. In the Content Creation Tutorial, you created the Space Bank, the Content Type Benefits, and the Entries. You will now use the Benefits content type, adding the necessary fields to generate the Benefits entries, following Figma's design.

In this tutorial we will continue to use the fictional brand “Dynamic Bank”, but now we focus on creating, previewing, and publishing a Benefits entry for the fictional brand “Dynamic Cine”.

View Figma design

# Prerequisites

Completed the tutorials:

Familiar with:

  • HTML
  • CSS
  • JS
  • Modyo's platform

# Step 1: Add fields to the Benefits type

  1. In the platform, select Content and click Spaces.
  2. Click your Space and select Types.
  3. Click on the Bank type.
  4. In the content type screen, add the following fields:
Field Name
Multiline text Short description
Asset Logo
Multiline text Description
Multiline text Commercial terms
Multiline text Validity
Locations Location

# Step 2: Create entry with new fields

After you have the type with the new fields, the next step is to publish content of this type. To create a new entry called Dynamic Cine, follow these steps:

  1. In the side menu, select Entries.
  2. Click + New Entry.
  3. Select the Benefits type.
  4. Fill in the Dynamic Cine name and dynamic-cine identifier.
  5. Click Create.
  6. On the Input fields screen, fill in the following values:
Field
Short description 40% off tickets on Fridays.
Logo
Description Enjoy 40% off every Friday on your tickets in Dynamic Cine, this offer is exclusive to Dynamic Bank clients paying with their credit or debit cards.
Commercial terms Valid for Dynamic Bank clients that pay with their credit or debit cards in tickets for every Friday with a maximum of 8 tickets per client.
Validity January 1st to December 31st, 2021
Location Santiago, Chile
  1. Click Save.

# Step 3: Create Benefits Content View

After creating the entry with its content, you now need to create a Content View within your site to generate dynamic pages connected to Content.

To create a Content View, follow these steps:

  1. In the side menu, select Channels, click Sites.
  2. Select your site and click Templates.
  3. Inside Content Views, click +.
  1. In the modal, type Benefit as the Path, select the Space Bank, and Type Benefits.

To follow the Figma layout, paste the following HTML replacing the code that comes from the example:

<div class="mb-5 mb-md-0 pb-5 pb-md-0" id="hero">
  <div class="bg-dark mb-5 mb-md-0 pt-5 pb-0 py-md-5">
    <div class="pattern_hero"></div>
    <div class="d-flex mb-0 my-md-5 hero_img">
      <div class="row w-100 justify-content-end no-gutters">
        <div
          class="col-10 col-md-7 wow slideInRight hero_img rounded-left"
          style="background-image: url({{ entry.fields['Cover'].url }})"
        ></div>
      </div>
    </div>
    <div class="hero_txt">
      <div class="container">
        <div class="row">
          <div
            class="ml-3 ml-md-0 bg-info p-5 col-10 col-md-6 rounded text-white wow slideInLeft"
          >
            <span
              class="h6 badge_category bg-white text-primary d-inline-block text-uppercase px-3 py-1 rounded-sm"
              >{{ entry.meta.category}}</span
            >
            <h1 class="h2 font-weight-bold mb-2">{{ entry.meta.title }}</h1>
            <h3 class="h6 font-weight-bold mb-0">
              {{ entry.fields['Short description'] }}
            </h3>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="container my-5 py-5">
  <div class="row justify-content-between">
    <div class="col-12 col-md-6">
      <div class="col-7 d-flex-inline shadow-sm rounded px-5 py-4 mb-5">
        <img
          src="{{ entry.fields['Logo'].url }}"
          alt="{{ entry.meta.title }}"
          class="w-100 my-2"
        />
      </div>
      <div class="mb-4">
        <h5 class="text-dark">Description</h5>
        <p class="text-muted">{{ entry.fields.Description }}</p>
      </div>
      <div class="mb-4">
        <h5 class="text-dark">Validity</h5>
        <p class="text-muted">{{ entry.fields.Validity }}</p>
      </div>
    </div>
    <div class="col-12 col-md-5">
      <div class="mb-4">
        <h5 class="text-dark">Where</h5>
        {{entry.fields['Location'] | static_map: '800x400', 15, 'roadmap',
        'https://cloud.modyocdn.com/uploads/5fc8b46c-1f64-404c-86a0-3db703f76398/original/pin_dynamic.png'}}
      </div>
      <div class="mb-4">
        <h5 class="text-dark">Commercial terms</h5>
        <p class="text-muted">{{ entry.fields['Commercial terms'] }}</p>
      </div>
    </div>
  </div>
</div>
<div class="bg-light py-5" id="benefits">
  <div class="container py-5">
    <h3 class="text-dark text-center">Related benefits</h3>
    {% assign relateds = spaces['bank'].types['benefits'].entries | paginated: 5
    | by_lang: 'en' %}
    <div class="py-5" id="productos">
      <div class="row">
        {% assign count = 0 %} {% for related in relateds %} {% if related.slug
        != entry.slug and 4 > count %} {% assign count = count | plus: 1 %}
        <div class="col-12 col-md-6 col-lg-3 mb-4 pb-2 d-flex">
          <a class="card shadow-sm w-100 bg-white text-decoration-none rounded overflow-hidden" href="{{ related.meta.url }}">
            <figure class="m-0">
              <span
                class="badge_category bg-white text-primary d-inline-block text-uppercase px-3 py-1 rounded-sm small"
                >{{ related.meta.category}}</span
              >
              <img
                aria-hidden="true"
                src="{{ related.fields['Cover'].url }}"
                alt="{{ related.meta.title }}"
                class="w-100"
              />
            </figure>
            <figcaption class="pt-4 px-4 pb-2">
              <h4 class="h6 text-dark">{{ related.meta.title }}</h4>
              <p class="text-muted">{{ related.fields.Excerpt }}</p>
            </figcaption>
          </a>
        </div>
        {% endif %} {% endfor %}
      </div>
    </div>
  </div>
</div>
<style>
  .hero_img {
    height: 350px;
  }
  #hero .badge_category {
    position: absolute;
    top: 0;
    transform: translateY(-50%);
  }
</style>

This Content View is now connected to the Dynamic Bank Space. With it you can access the Entry data from your Site using Liquid.

# Step 4: Preview Entry in Content

Now that we have our Space and Type associated with a Site, you can turn on Site Preview Mode. To access preview mode click on the “eye” icon in the top action bar:

Within the modal click on Preview on site and select the site Bank:

When you select it, a new tab will open the preview of the Entry on the Site to view the latest changes.

# Conclusion

Congratulations! You have finished the third course of the Modyo tutorials series.

In this tutorial, you completed one of Modyo's main tools when it comes to maintaining your digital channels, adding a middle layer to view the work that went into Modyo Content, and generated a Dynamic Page connected to your Site in Modyo Channels.