Guides
Tutorials
Pop Tags

Attributes

Wrap and Break

When showing the list of categories for a blog post, you’ll often want a separator between each category link. It would be tempting to try the following:

<pop:categories>
  <a href="<pop:permalink/>"><pop:title/></a> | 
</pop:categories>

This works, but then there's a trailing | after the last category. A better way is to use the break attribute:

<pop:categories break=" | ">
  <a href="<pop:permalink/>"><pop:title/></a>
</pop:categories>

The break attribute will insert the “ | ” between each rendition of the tag, but not after the last element. Resulting in an output like Design | Programming | Other. The break attribute works with any tag that represents a collection (as a general rule, if the tag name is plural, it represents a collection).

The break tag has an alternative behavior. When passed a tag name, the break tag will wrap each rendition with the specified tag. For example:

<ul>
  <pop:categories break="li"><pop:title/></pop:categories>
</ul>

Given the categories DesignPrograming and Other, this would result in the following output:

<ul>
  <li>Design</li>
  <li>Programing</li>
  <li>Other</li>
</ul>

But what if there aren't any categories? Then we'd be left with an empty <ul> tag. Not valid HTML. Not good.

To resolve this edge case, we can use with the wrap attribute. This attribute specifies an HTML tag to wrap the contents of a pop tag, but only if the pop tag actually outputs something. So we can further improve on our categories list like this:

<pop:categories wrap="ul" break="li">
  <pop:title/>
</pop:categories>

And with the 3 example categories, the following HTML would be output:

<ul>
  <li>Design</li>
  <li>Programing</li>
  <li>Other</li>
</ul>

If there aren’t any categories, the tag won’t output anything and no empty <ul> would be left hanging around. The wrap attribute can be used with any pop tag.

Controlling the Output of a Tag Manually

The PopTags engine knows not to output anything when the content it’s pulling from is empty. For example, <pop:entries> in the context of a collection with no entries will not output any HTML. The same goes for <pop:description> within the context of content where the user hasn’t filled in the description.

But sometimes having no output isn’t desirable. There are several ways to control what gets renderd when the content of a tag is empty. The simplest way is to use the default attribute. Here we use it to output a small “No description” text if the content is missing the description:

<pop:content>
  <pop:description default="No description"/>
</pop:content>

You can even pass in other pop tags as a default value

This works well for outputting default text, but what if we want the default text to show up inside a paragraph with an “empty” class? PopTags has a way to solve that as well, called no tags. Here’s an example:

<pop:content>
  <pop:description wrap="p" class="description"/>
  <pop:no_description wrap="p" class="empty description">No description</pop:no_description>
</pop:content>

Putting a <pop:no_description> tag immediately following the <pop:description> defines what should be output when the description field is empty.
The no_ tag works for any tag, including collection tags.

Beyond Wrap, Controlling Output With <pop:value/>

In the above example we used the wrap attribute together with a class attribute to control the output of the tag. This was necessary to surround both the <pop:description> and the <pop:no_description> tag in a <p> with a class. It’s often enough, but in some cases we need more complex markup.

Lets say we need both the description and the empty description to be a <div> with a class and a <p> inside. The wrap attribute would not be sufficient, but there’s still a way. When a tag like <pop:description> is opened , it’s value can be accessed with the <pop:value> tag. Here’s how that looks:

<pop:content>
  <pop:description>
    <div class="description">
      <p><pop:value/></p>
    </div>
  </pop:description>
  <pop:no_description>
    <div class="empty description">
      <p>No description</p>
    </div>
  </pop:no_description>
</pop:content>

There’s a variation of the <pop:value> tag that comes into play when dealing with collections. Imagine we want to show a list of entries with some fairly complex markup, and show a <div> containing an <img> tag if the collection is empty.

Since <pop:entries> gets rendered once for each entry, we can’t use the <pop:value> trick because the surrounding markup would be repeated for each entry.

When showing a collection tag, PopTags lets you set the attribute repeat to false to disable the repetition of the markup inside. You can then use <pop:values> to mark the part you want to repeat for each value. Here’s an example:

<pop:entries from="blog" repeat="false">
  <section>
    <div class="entries">
      <pop:values>
        <h1><a href="<pop:permalink/>"><pop:title/></a></h1>
        <pop:body/>
      </pop:values>
    </div>
  </section>
</pop:entries>
<pop:no_entries>
  <div class="no-entries">
    <h1>How about adding some entries to your new blog?</h1>
    <img src="blog-preview.jpg"/>
  </div>
</pop:no_entries>
Continue to Assets »