User Guide

Adding an HTML Feature to your site

45 views 0

You can add Zephr’s HTML Feature Rules to your site in two ways – via Comment Tags, or by using CSS Selectors. This guide discusses both options.

Zephr Comment Tags

Zephr comment tags are relevant to the Feature / Rules you have created. Generally, you will use different Zephr tags for different types of content or different features of your site. Site features are parts of an HTML document (like an article body, a video, a data table, etc.) which are annotated with HTML comments. For example, you may have a Feature rule for Article Pages, and a different Feature rule for Login. These would have separate Zephr tags.

To find your Zephr tags, navigate to, or create, the relevant Feature. Select the HTML Rule type, and choose Comment Tag as your Target Type. The Zephr tags will populate below, based upon your Rule Name and slug.

You will need to wrap the features on your site in Zephr tags in order for the transformation to take place.

Consider the following HTML:

<html>
<head>…
</head>
<body>
    <h1>A site!</h1>
    <nav>…
    </nav>
    <div class="page-wrapper">
       <h2>Something interesting</h2>
       <article class="article-body">
          <p>…</p>
          <img>
          <p>…</p>
       </article>
       <ul class="related-reading">…
       </ul>
    </div>
</body>

In this case, you might want to make decisions about whether a visitor can assess the article body. To do that, you would wrap the following comments, in orange below, around the article. Usually, these comments would be implemented in a CMS template, but can also be done on a per article basis.

<head>…
</head>
<body>
    <h1>A site!</h1>
    <nav>…
    </nav>
    <div class="page-wrapper">
       <h2>Something interesting</h2>
       <!-- BLAIZE_FEATURE article-body -->
       <article class="article-body">
          <p>…</p>
          <img>
          <p>…</p>
       </article>
       <!-- BLAIZE_FEATURE_END article-body -->
       <ul class="related-reading">…
       </ul>
    </div>
</body>

If this document were to be served through the Zephr CDN, the Zephr Feature comment would be picked up and Zephr would look for a corresponding feature rule to decide how to handle that part of the content.

Zephr Feature comments are used under the hood to break a document into a tree, which Zephr will traverse in real-time to manipulate the content. Zephr Feature comments can be nested and repeated but do need to be balanced, in terms of their opening and closing, much like HTML tags.

CSS Selectors

CSS Selectors allow you to target Zephr’s HTML Feature Rules to your site without the need to add Zephr Comment Tags. This can be easier for teams with more limited access to their website’s CMS and will work on any page of your site where your chosen CSS Selector is present.

When CSS Selectors are in use, Zephr will target HTML Feature Rules based upon the CSS Selector you have chosen. For example, the following image shows an area of a demo site using div.article-content around its body copy.

CSS Selector - div class example

When creating an HTML Feature Rule, setting the Target Type to CSS Selector, and CSS Selector to div.article-content, we can transform this content to display a Zephr registration form instead. This is what the rule looks like:

CSS Selectors - Rule Example

When published, the registration form will show in place of the content shown above:

Zephr Registration Form in-situ on a demo site

Supported Selectors

The following Selectors are supported by Zephr:

Pattern Matches Example
* any element *
tag elements with the given tag name div
*|E elements of type E in any namespace ns *|name finds <fb:name> elements
ns|E elements of type E in the namespace ns fb|name finds <fb:name> elements
#id elements with attribute ID of “id” div#wrap, #logo
.class elements with a class name of “class” div.left, .result
[attr] elements with an attribute named “attr” (with any value) a[href], [title]
[^attrPrefix] elements with an attribute name starting with “attrPrefix”. Use to find elements with HTML5 datasets [^data-], div[^data-]
[attr=val] elements with an attribute named “attr”, and value equal to “val” img[width=500], a[rel=nofollow]
[attr=”val”] elements with an attribute named “attr”, and value equal to “val” span[hello=”Cleveland”][goodbye=”Columbus”], a[rel=”nofollow”]
[attr^=valPrefix] elements with an attribute named “attr”, and value starting with “valPrefix” a[href^=http:]
[attr$=valSuffix] elements with an attribute named “attr”, and value ending with “valSuffix” img[src$=.png]
[attr*=valContaining] elements with an attribute named “attr”, and value containing “valContaining” a[href*=/search/]
[attr~=regex] elements with an attribute named “attr”, and value matching the regular expression img[src~=(?i)\\.(png|jpe?g)]
The above may be combined in any order div.header[title]