Support Center

Blog Templates Setup

Last Updated: Aug 06, 2015 07:22PM UTC
Blog Pages and Blog Lists allow you to use custom templates for better control of your design. You can target specific elements of your block such as Banner Image, Thumbnail Image, Categories Link, Tags, Time/Date and so on.

Banner Image

<img src="{banner_url}?1000x800" alt="" style="max-width:100%" />

Thumb Image

<img src="{thumb_url}?1000x800" alt="" style="max-width:100%" />

Categories link

<categories>
    <a href="/Blog/{ID}/{url}">{title}</a>
</categories>

Tags link

<tags>
   <a href="/test/Tag/{ID}/{title}">{title}</a>
</tags>

Link to Post

<a href="/{post_page}/{ID}/{url}"> </a>


Blog Post Link Example

<a href="/{post_page}/{ID}/{url}">

Blog Template Tags

{banner_url} - Gives you a direct link to your banner image
{publishTime} - Time / Date 
{title} - Post Title
{author} - Author
{thumb_url} - Gives you a direct link to you thumbnail image
{post_page} - is the page the blog post is added to, we use a tag because you can add blog post templates to multiple pages.
{id} - The unique id given to a post
{url} - Post url is a path to the title of the blog post.

{content} - Creates an area where you can add content through the content editor.
{preview_cut} - show a preview of the blogs content 190 characters long with removed formatting.

Example of Post Page Template:

<!-- Blog Post Top -->
<div class="blogPostTop">
    <div class="blogPostDate">
        <h5>{publishTime}</h5>
    </div>
    <h2>{title}</h2>
</div>
<!-- Blog Post Image -->
<div class="blogPostImage">
    <div style="background: url({banner_url}?1000x1000) no-repeat center center transparent; max-width: 100%; height: 300px;"></div>
</div>
<!-- Blog Post Content -->
{content}
<!-- Blog Post Tags -->
<div class="blogPostTags">
    <p>Categories:
        <categories> <a href="/Blog/{ID}/{url}">{title}</a> </categories>
        |  Tags:
        <tags><a href="/Blog/Tag/{ID}/{title}">{title}</a></tags>
        | Posted by: {author} </p>
</div>
<!-- Blog Post Social -->
<div class="blogPostSocial">
    <socials></socials>
</div>



This is what the above template looks like live:



Example of Post List Template

<items>
  <div class="postTitle">
    <h3><a href="/post2/{ID}/{url}">{title}</a></h3>
  </div>
  <p>{pub<items>
    <h4><a href="/post/{ID}/{url}">{title}</a></h4>
    <p>{publishTime} / by: {author}</p>
    <div class="postDetails"> <a href="/{post_page}/{ID}/{url}">
        <div style="background: url({banner_url}?1000x1000) no-repeat center center transparent; width: 100%; height: 300px;"></div>
        </a>
        <p>{preview_cut}</p>
        <!-- Blog Post Social -->
        <div class="blogPostSocial" style="float:left">
            <socials></socials>
        </div>
        <p><a href="/{post_page}/{ID}/{url}" class="readMore">Read More</a></p>
    </div>
    <hr />
</items>
<loader>
    <div>Please wait - loading new posts</div>
</loader>


This is what the above template looks like live:

086a070b05b2a57277ce3f708758d7a7@morwebcms.desk-mail.com
https://cdn.desk.com/
false
desk
Loading
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
about
false
Invalid characters found
/customer/en/portal/articles/autocomplete