Skip to content

Adding HTML Attributes & Creating Templates

First, let’s take our page template and decide what makes sense to be a container or a block.

You do have some leeway here when dealing with more complicated layouts, but with such a simple example there are very obvious pieces:

  1. The top header/menu
  2. The two-column layout below, containing:
    • The article area on the left
    • And the right column that contains a contact form and article preview cards

Let’s break these out from the HTML, inside-out. First, the contact form.

Form Template

The sample HTML’s form HTML is:

<div class="mb-5">
  <form>
    <h4>Contact Us</h4>
    <dl>
        <dt>
          <label for="name">Name</label>
        </dt>
        <dd class="form-group">
          <input type="text" class="form-control" id="name" name="name" required placeholder="Please enter your name" />
        </dd>

        <dt>
          <label for="email">Email</label>
        </dt>
        <dd class="form-group">
          <input type="email" class="form-control" id="email" name="email" required placeholder="Please enter your email address" />
        </dd>

        <dt>
          <label for="reason">Why are you reaching out today?</label>
        </dt>
        <dd class="form-group">
          <select id="reason" class="custom-select" name="reason" required>
            <option disabled selected>Please choose&hellip;</option>
            <option value="ArticleFeedback">Feedback on an article</option>
            <option value="BizDev">Business development idea</option>
            <option value="General">General contact request</option>
          </select>
        </dd>

        <dt>
          <label for="comments">Additional comments?</label>
        </dt>
        <dd class="form-group">
          <textarea class="form-control" id="comments" name="comments" rows="4" cols="30" placeholder="Any additional comments? (optional)"></textarea>
        </dd>
    </dl>
    <div class="form-messages"></div>
    <button class="btn btn-primary" type="submit">Submit</button>
  </form>
</div>

Looking at this, the attributes we have to add are very simple. For more details on how Phosis handles serverside form validation and submission, you can refer to the detailed form documentation.

Form

In the <form> tag, let’s add:

data-phosis-form

Resulting in:

<form data-phosis-form>

Message container

We have a spot where we want any error or success messages to appear when the form is submitted, so let’s set that up by tagging it with the attribute

data-phosis-form-message

like so:

<div class="form-messages" data-phosis-form-message></div>

Result

Our final HTML code for the form is very similar to how it was when we started, just with two attributes added:

<div class="mb-5">
  <form data-phosis-form>
    <h4>Contact Us</h4>
    <dl>
        <dt>
          <label for="name">Name</label>
        </dt>
        <dd class="form-group">
          <input type="text" class="form-control" id="name" name="name" required placeholder="Please enter your name" />
        </dd>

        <dt>
          <label for="email">Email</label>
        </dt>
        <dd class="form-group">
          <input type="email" class="form-control" id="email" name="email" required placeholder="Please enter your email address" />
        </dd>

        <dt>
          <label for="reason">Why are you reaching out today?</label>
        </dt>
        <dd class="form-group">
          <select id="reason" class="custom-select" name="reason" required>
            <option disabled>Please choose&hellip;</option>
            <option value="ArticleFeedback">Feedback on an article</option>
            <option value="BizDev">Business development idea</option>
            <option value="General">General contact request</option>
          </select>
        </dd>

        <dt>
          <label for="comments">Additional comments?</label>
        </dt>
        <dd class="form-group">
          <textarea class="form-control" id="comments" name="comments" rows="4" cols="30" placeholder="Any additional comments? (optional)"></textarea>
        </dd>
    </dl>
    <div class="form-messages" data-phosis-form-message></div>
    <button class="btn btn-primary" type="submit">Submit</button>
  </form>
</div>

Let’s get it added to your site:

  1. First, go to your site’s Templates & Containers page and add a new template. If this is your first template or container, you’ll have a big button in the center to create one, otherwise there is a button at the bottom of the list.
  2. Give it a friendly name, like “Tutorial: Contact Form HTML”
  3. Set the Type dropdown to Form Template
  4. Copy and paste in the tagged HTML above, and
  5. Save!

Congratulations! You’ve created your first HTML template in Phosis.

It should be noted that if you stick this HTML back inside of our preview page, it won’t break! You or your designers can continue working on the CSS and Javascript of your site in whatever environment desired without affecting Phosis’s template prep because it’s all driven by these particular attributes.

Let’s move on to some object templates.

Template: Article Preview Cards

The sample HTML’s article preview card HTML is:

<div class="card mb-3">
   <img class="card-img-top" src="https://via.placeholder.com/150x100" alt="Card image cap">
   <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      <a href="#" class="btn btn-primary">Read More &raquo;</a>
   </div>
</div>

Let’s add our attributes.

Image

In the <img> tag, let’s add the following attributes:

data-phosis-object="Image"

data-phosis-object-attributes="src"

data-phosis-object-img-configuration="s/w/300/h/200/q/55/"

Resulting in:

<img class="card-img-top" src="https://via.placeholder.com/150x100" alt="Card image cap" data-phosis-object="Image" data-phosis-object-attributes="src" data-phosis-object-img-configuration="s/w/300/h/200/q/55/">

You can also configure the alt attribute to be data-driven for better accessibility and SEO.

Text & Buttons

Next, let’s tag the title, preview, and button.

Tag your <h5> with the following attribute:

data-phosis-object="Title"

Tag the article preview <p> tag with the following:

data-phosis-object="Preview Text"

And lastly, let’s tag the <a> tag that’s the button with:

data-phosis-object="Read More Button" data-phosis-object-attributes="href"

Result

So, your final HTML code for the card should look like this:

<div class="card mb-3">
   <img class="card-img-top" src="https://via.placeholder.com/150x100" alt="Card image cap" data-phosis-object="Image" data-phosis-object-attributes="src" data-phosis-object-img-configuration="s/w/300/h/200/q/55/">
   <div class="card-body">
      <h5 class="card-title" data-phosis-object="Title">Card title</h5>
      <p class="card-text" data-phosis-object="Preview Text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      <a href="#" class="btn btn-primary" data-phosis-object="Read More Button" data-phosis-object-attributes="href">Read More &raquo;</a>
   </div>
</div>

Go ahead and follow the same steps as when you added the form template above, only this time select Object Template from the Type dropdown.

You can also, of course, make the title a link, or the card itself, by just doing what you normally would: creating anchor <a> tags. Just be sure to add the proper attributes to them as we did to the button.

Let’s move on to the other template, then the containers, and finally the overall page template.

Template: Article Content

Next, let’s tag the article layout itself.

Here is the relevant part of the HTML file we’ve been working with, with the placeholder text trimmed:

<h1>I Am An Article</h1>
<p class="lead">Follow along in the documentation to make this data-driven.</p>
<p class="text-muted d-flex justify-content-between"><small>Posted 12/27/2019</small></p>

<div class="article-content">
   <p>Cupcake [...] cookie dragée.</p>
</div>

We will have to make one small tweak to this: we’ll need to wrap it in a <div></div> so that Phosis Render has a single, top-level containing DOM element to use for hydration. So we end up with:

<div>
   <h1>I Am An Article</h1>
   <p class="lead">Follow along in the documentation to make this data-driven.</p>
   <p class="text-muted d-flex justify-content-between"><small>Posted 12/27/2019</small></p>

   <div class="article-content">
      <p>Cupcake [...] cookie dragée.</p>
   </div>
</div>

Why don’t we consider the “col-md-8” wrapper the containing element? Because Phosis will need that as a container in the next steps.

We’ll also make a wrapper for the author’s name and date posted. So, let’s add our attributes!

Title & Lead

The <h1> title is again a simple addition of

data-phosis-object="Title"

and the lead/summary text will get named via the attribute 

data-phosis-object="Summary"

Date Posted

Here, we’ll tweak the HTML from this:

<small>Posted 12/27/2019</small>

To this:

<small>Posted <span>12/27/2019</span></small>

This will give us an element we can hook into to display the date without losing the word “Posted.”

Let’s name the date span as:

data-phosis-object="Article Date"

Article Contents

Finally, let’s tag the <div class="article-content"> with the following:

data-phosis-object="Contents"

Result

So, our final HTML (again with the sample placeholder text trimmed) becomes:

<div>
   <h1 data-phosis-object="Title">I Am An Article</h1>
   <p class="lead" data-phosis-object="Summary">Follow along in the documentation to make this data-driven.</p>
   <p class="text-muted d-flex justify-content-between"><small>Posted <span data-phosis-object="Article Date">12/27/2019</span></small></p>

   <div class="article-content" data-phosis-object="Contents">
      <p>Cupcake [...] cookie dragée.</p>
   </div>
</div>

Go ahead and create this template inside your site named “Tutorial: Article Content” and save it!

Container: 2 Column Layout

We’re going to want the overall page template to be reusable. To that end, we don’t want to assume that every page in your site would have this 2-column layout. Even though we’re building a single page (for now), we’ll go ahead and create a 2-column layout container. You may also have a 3-column layout, a single column, or get more advanced!

We’ll grab the two columns from our sample HTML and then remove their contents. Now, we don’t technically have to remove the contents at all: Phosis Render will strip the contents automatically. We just recommend doing so to keep your templates’ HTML clean and legible inside the system.

Also note that, just like the Article Content template above, we need to make sure that there is a single containing element — in this case, we can just use the <div> with the row class.

When we do so, we’re left with this incredibly simple HTML:

<div class="row mt-5">

    <div class="col-md-8">
        <!-- Article content lived in here -->        
    </div>

    <div class="col-md">
        <!-- Second column article preview cards lived here  -->
    </div>
</div>

However, remember that we also want to have the contact form above our article previews. So let’s add a little bit of <div> soup to the mix on that second column:

<div class="row mt-5">

    <div class="col-md-8">
        <!-- Article content lived in here -->        
    </div>

    <div class="col-md">
        <div>
          <!-- Second column form will live here  -->
        </div>
        <div>
          <!-- Second column article preview cards will live  -->
        </div>
    </div>
</div>

Let’s tag! Add 

data-phosis-container

attributes to the first column <div> and the two items in the second column defining the container name, such as Article Content, Form, and Other Articles.

Result

<div class="row mt-5">

    <div class="col-md-8" data-phosis-container="Article Content">
        <!-- Article content lived in here -->        
    </div>

    <div class="col-md">
       <div data-phosis-container="Form">
          <!-- Second column form will live here  -->
        </div>
        <div data-phosis-container="Other Articles">
          <!-- Second column article preview cards will live  -->
        </div>
    </div>
</div>

Save this as a Container with the name “Tutorial: 2 Column Layout With Form.”

Make it better

You probably noticed that we could have structured our <form> HTML a little differently by using its existing container <div> as the data-phosis-container rather than including it in the form’s HTML, and we could have been a little wiser with our right column to avoid the <div> soup.

Feel free to do so! The <form> functionality was added to this tutorial some time after it was originally written, so we were bolting on another container to that column.

You also would probably have a form like this on a specific Contact page. But we’re keeping it all on one page for tutorial purposes. Ultimately, how this sort of thing works is up to you!

Layout: Page Template

Finally, let’s grab the remaining outer HTML and create our site’s page template.

Having worked from the inside out, we’re left with:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">

  <title>Phosis Quickstart Example</title>

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" />

</head>

<body>

  <!-- Navigation -->
  <nav class="navbar navbar-expand-lg navbar-dark bg-secondary static-top">
    <div class="container">
      <a class="navbar-brand" href="/">Phosis Quickstart</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item">
            <a class="nav-link" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Articles</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Contact</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <!-- Page Content -->
  <div class="container">

  </div>

  <!-- Bootstrap core JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>

</body>

</html>

Let’s tag PageDescription and PageTitle:

<meta name="description" content="" data-phosis-object="PageDescription">

<title data-phosis-object="PageTitle">Phosis Quickstart Example</title>

Next, let’s flag our main content container as a container:

<!-- Page Content -->
<div class="container" data-phosis-page-container>

</div>

Finally, menus. As of Phosis v0.7, menus can now either be manually linked in your Layout or dynamically generated based on what pages have “Show In Menu” selected.

There are five attributes you use to set up a dynamic menu which we’ll cover in the Preparing HTML Templates section, but for now we’ve added them to the example code below.

Result

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="" data-phosis-object="PageDescription">
  <meta name="author" content="">

  <title data-phosis-object="PageTitle">Phosis Quickstart Example</title>

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" />

</head>

<body>

  <!-- Navigation -->
  <nav class="navbar navbar-expand-lg navbar-dark bg-secondary static-top">
    <div class="container">
      <a class="navbar-brand" href="/">Phosis Quickstart</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav ml-auto" data-phosis-menu>
          <li class="nav-item" data-phosis-menu-item data-phosis-menu-item-active-class>
            <a class="nav-link" href="#" data-phosis-menu-text data-phosis-menu-link>Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Articles</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Contact</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <!-- Page Content -->
  <div class="container" data-phosis-page-container>

  </div>

  <!-- Bootstrap core JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>

</body>

</html>

Save this in your site as a Page Template named “Tutorial: Page Template.”