XtGem.com

Split twig blog

Main Twig

Copy or upload (remove .js after copy/upload) to /xtgem_templates/xtblog.twig

{# Set your community name here so comment restrictions will not apply to you #}
{# This name will also appear as the post creator in the post list #}
{% set owner = 'Graham' %}

{%spaceless%}
{% if data.translations.t_no_entries_found == 'related2'  and view == 'entries_list'%}
{# Next line must remain as one line #}
{% for entry in data.entries %}{% set blog_entry=entry.url|split('__xtblog_entry/')[1]|split('-')[0]%}{% if data.translations.t_no_search_results_found not in blog_entry%}[{{blog_entry|trim}}|{{entry.title|replace({('$'):'&#36;',('('):'&#40;'})|raw}}|{{entry.created}}|{{entry.content|replace({('$'):'&#36;',('('):'&#40;'})|striptags('<img>')|trim|raw}}]{% endif %}{% endfor %}
{% else %}

{# Convert standard xtgem pagination to bootstrap markup <?#}
{%set pagination_html = data.pagination_html%}
{%if 'bs_pagination' in data.translations.t_no_entries_found %}
{% if 'xt_blog_paging' in pagination_html %}
{# v1 blog pagination #}
{%set pagination_html = pagination_html|replace({
("div class=\"xt_blog_paging"):"ul class=\"pagination pagination-sm",
("/div"):"/ul",
("span>...</span"):"li><span >...</span></li"
})%}
{%set pagination_html = pagination_html|replace({
("<span>"):"<li class=\"active\"><span>",
("</span"):"</span></li",
("<a "):"<li><a ",
("/a>"):"/a></li"
})%}
{% else %}
{# v2 blog pagination #}
{%set pagination_html = pagination_html|replace({
("div class=\"xt_pagination"):"ul class=\"pagination pagination-sm",
("/div"):"/ul",
("span class=\"selected\"><span>..."):"li><span>...",
("span class=\"selected"):"li class=\"active",
("/span></span"):"/span></li",
("span><a "):"li><a ",
("/a></span"):"/a></li"
})%}
{%endif%}
{%endif%}
{# end pagination convertion ?>#}

{% if view == 'entries_list' %} 
<div class="list-group entries_list" id="xt_blog"> 
  {# POST LIST #}
  {% include '/blogblocks/post_list.twig' %}
  {% include '/blogblocks/post_list_footer.twig' %}  
</div>
{% elseif view == 'entry' %}
<div class="panel-group">
  {% if data.post.tags %}{% endif %}
  {% if 'xtblog_block_id' in data.post.url %}

  {% endif %}
  {# BLOG POST #}
  {% include '/blogblocks/blog_post_tags.twig' %}
  {% include '/blogblocks/blog_post.twig' %}
  {# COMMENTS #}
  {% include '/blogblocks/comment_form.twig' %}
  {% include '/blogblocks/comments_list.twig' %} 
  {% if not data.entry.comments %}
  <div class="panel panel-default" ><div class="panel-body">{{ data.translations.t_comments_empty }}</div></div>
  {% else %}
  <div class="panel panel-default" ><div class="panel-body"><a class="btn btn-default btn-xs" href="{{ data.back_url }}">{{ data.translations.t_back_to_posts }}</a></div></div>
  {% endif %}
</div>
{% elseif view == 'no_contents' %}
  {# NO CONTENT #}
  {% include '/blogblocks/no_contents.twig' %}
{% elseif view == 'no_entry' %}
  {% block no_entry %}
  <div class="well well-sm">No blog entry found</div>
  {% endblock %}
{% endif %}
{# DEBUG #}
{% include '/blogblocks/debug.twig' %}
{%endif%}
{%endspaceless%}

Create a folder /xtgem_templates/blogblocks/

Copy or upload all the following files (remove .js after copy/upload) to /xtgem_templates/blogblocks/

Post list

{% block entries_list_tag %}
    {% if data.tag %}
  <div class="list-group-item entries-tagged" > 
    <span class="text-muted small">{{ data.translations.t_showing_tagged_posts }} <span class="text-primary"> {{ data.tag }}</span></span>
  </div>
    {% endif %}
  {% endblock %}
{% block entries_list %}
    {% for entry in data.entries %}

{# Split the image url from the description and set a default image if the post has no images<?#}
      {% if '<img' in entry.content%}
      {%set raw_content=entry.content|split('</a>')%}
      {%set content=raw_content[1]%}
      {%set image=(raw_content[0]|striptags('<img>')|split('"')[1])%}
      {%set alt=(raw_content[0]|striptags('<img>')|split('"')[3])%}
      {%else%}
      {# Set default for no image #}
      {%set image='/blog_images/default.png'%}
      {%set alt='default'%}
      {%set content=entry.content%}
      {%endif%}
      {#?>#} 
  
  <div class="list-group-item entry">
    <div class="entry-thumb"><a href="{{ entry.url }}" ><img class="img-responsive" src="{{image}}" alt="{{alt}}" title="{{alt}}" /></a></div>
    <div class="entry-details">
      <b class="entry-title"><a  href="{{ entry.url}}">{{ entry.title|raw }}</a></b> 
      <div class="entry-info"><small class="text-muted"><i class="fa fa-user"></i><span class="text-info"> {{owner}}</span></small>&nbsp;
      {% if data.entry_list_show_time %}
        <small class="small text-muted entry-date"> <i class="fa fa-calendar-o"></i> {{entry.created}}</small>&nbsp;
      {% endif %}
        <small class="comments-count small text-muted"> <i class="fa fa-comments-o"></i><span class=""> {{ entry.comments_count|default('0') }} </span></small>
      </div>

{% if data.display_type != 'header' and entry.content %}
      <div class="entry-description text-muted" style="">{{content|replace({('$'):'&#36;',('('):'&#40;'})|raw}}</div>
      {% endif %}
    </div>
  </div>
    {% endfor %}
  {% endblock %}

Post list footer

{% if pagination_html or data.back_url or data.searchbox%}
  <div class="list-group-item entries-list-footer">
    {% block entries_list_footer %}
      {{ pagination_html|raw }} 
      {% if data.back_url %}<div style="margin-bottom:.5em"><a class="btn btn-primary btn-xs" href="{{ data.back_url }}">{{ data.translations.t_back_to_posts }}</a></div>{% endif %}
    {% endblock %}
    {% block entries_list_searchbox %}
      {% if data.searchbox %}
    <form action="{{ data.searchbox.url }}" method="get" class="form-inline">
        {% for key, value in data.searchbox.params %}
          {% if value %}
      <input type="hidden" name="{{ key }}" value="{{ value }}" />
          {% endif %}
        {% endfor %}
      <div class="input-group input-group-sm">
        <div class="input-group-addon"><i class="fa fa-search" aria-hidden="true"></i></div>
        <input class="form-control" type="search" name="__xtblog_search" value="{{ data.searchbox.phrase }}" />
        <div class="input-group-btn">
          <input class="btn btn-primary" type="submit" value="{{ data.translations.t_search }}" />
        </div>
      </div>
    </form>
      {% endif %}
    {% endblock %}
  </div>
  {% endif %}

Post tags Post

{% block entry_post %} 
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4>{{ data.post.title|replace({('$'):'&#36;',('('):'&#40;'})|raw }}{% if data.post.subtitle %}<div class="small">{{ data.post.subtitle|replace({('$'):'&#36;',('('):'&#40;'})|raw }}</div>{% endif %}<div class="small">{{ data.translations.t_created }} {{ data.post.date }}</div></h4>
    </div>
    <div class="panel-body">
      <div class="post-content">{{data.post.content|replace({('$'):'&#36;',('('):'&#40;'})|raw }}</div>
    </div>
    {% if data.post.feed_data or data.social_share_enabled %}
    <div class="panel-footer">
      <a class="btn btn-default btn-xs" href="{{ data.back_url }}">{{ data.translations.t_back_to_posts }}</a>
      {% if data.post.feed_data %} 
      <div class="xt_blog_social">
        {% if data.device == 'mobile' %}
          <img src="http://xtgem.com/images/icons/mobile2/rateup.png" />{{ data.post.feed_data.ratings_up }} {% if data.post.feed_data.has_rated %}<a class="rateup rated_up" href="{{ data.post.feed_data.rate_url }}">Unrate</a>{% else %}<a class="rateup" href="{{ data.post.feed_data.rate_url }}">Rate up</a>{% endif %}{% if data.post.feed_data.has_starred %}<a class="star starred" href="{{ data.post.feed_data.star_url }}"><img src="http://xtgem.com/images/icons/mobile2/star.png" />Unstar</a>{% else %}<a class="star" href="{{ data.post.feed_data.star_url }}"><img src="http://xtgem.com/images/icons/mobile2/unstar.png" />Star</a>{% endif %}{% if data.post.feed_data.is_featured %}<br /> This post is featured on <a href="http://xtgem.com/feed">XtGem</a>{% endif %}
        {% else %}
          {% if data.post.feed_data.has_rated %}<a class="rate_up rated_up" href="{{ data.post.feed_data.rate_url }}">{{ data.post.feed_data.ratings_up }} <span class="icon-arrow-up"></span></a>{% else %}<a class="rate_up" href="{{ data.post.feed_data.rate_url }}">{{ data.post.feed_data.ratings_up }} <span class="icon-arrow-up"></span></a>{% endif %}{% if data.post.feed_data.has_starred %}<a class="star starred" href="{{ data.post.feed_data.star_url }}">Unstar <span class="icon-star"></span></a>{% else %}<a class="star" href="{{ data.post.feed_data.star_url }}">Star <span class="icon-star"></span></a>{% endif %}{% if data.post.feed_data.is_featured %}<div class="featured">This post is featured on <a href="http://xtgem.com/feed">XtGem</a></div>{% endif %}
        {% endif %}
      </div>
      {% endif %}
      {% if data.social_share_enabled %}
      <div class="xt_social_shares">
        <a title="Share on facebook" href="http://www.facebook.com/sharer.php?u={{data.post.url}}" class="xt_fb_share" target="_blank" onclick="window.open('https://www.facebook.com/sharer/sharer.php?u='+encodeURIComponent('{{data.post.url}}'), 'facebook-share-dialog', 'width=600,height=400');return false;">{% if data.device == 'mobile' %}<img height="16px" width="16px" src="http://xtgem.com/images/facebook.png" alt="Share on facebook">{% else %}<span class="icon-fb"></span>{% endif %}</a>&nbsp;
        <a title="Share on twitter" href="http://twitter.com/home?status={{data.post.url}}" class="xt_tw_share" target="_blank" onclick="window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;">{% if data.device == 'mobile' %}<img height="16px" width="16px" src="http://xtgem.com/images/twitter.png" alt="Share on twitter">{% else %}<span class="icon-tw"></span>{% endif %}</a>&nbsp;
        <a title="Share on Google+"
href="https://plus.google.com/share?url={{data.post.url}}" class="xt_gp_share" target="_blank" onclick="window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;">{% if data.device == 'mobile' %}<img height="16px" width="16px" src="http://xtgem.com/images/google_plus.png" alt="Share on google+">{% else %}<span class="icon-gp"></span>{% endif %}</a>&nbsp;
        <a title="Share via mail" href="mailto:?subject=Have a look&body={{data.post.url}}" class="xt_mail_share" target="_blank">{% if data.device == 'mobile' %}<img  height="16px" width="16px" src="http://xtgem.com/images/email.png" alt="Share via mail">{% else %}<span class="icon-mail"></span>{% endif %}</a>
      </div>
      {% endif %}
    </div>
    {% endif %}
  </div>
  {% endblock %}

Comments form

{% block entry_comments_form %}
    {% if data.comments_form.is_maintenance %}
  <div class="panel panel-default"><div class="panel-body">{{ data.comments_form.maintenance_markup|raw }}</div></div>
    {% elseif data.is_logged_in and data.new_comments_system and not data.community_name %}
  <div class="panel panel-default">
    <div class="panel-heading">{{ data.translations.t_provide_community_name }}</div>
    <form action="{{ data.community_name_submit_url }}" method="post" id="xt_blog_comment_form">
      {% if data.entry.in_comments_thread %}
      <input type="hidden" name="__xtblog_comment_thread_id" value="{{ data.entry.in_comments_thread }}" />
      {% endif %}
      <div class="panel-body">
        <input class="form-control" type="text" name="community_name" value="{{data.community_name_tmp}}" />
      </div>
      <div class="panel-footer">
        <input class="tn btn-default btn-xs" type="submit" value="{{ data.translations.t_submit }}" />
      </div>
    </form>
  </div>
    {% else %}
      {% if data.post.allow_comments %}
  <div class="panel panel-default" id="post_form_container">
    <div class="panel-heading">{{ data.translations.t_post_a_comment }}</div>
        {% if data.comments_form.comments_restriction == "logged_in" and not data.is_logged_in %}
    <div class="panel-body">
      <div class="well well-sm text-warning text-center" style="margin-bottom: 8px;">
  {{ data.translations.t_comments_login_required }}</div> 
      <a class="btn btn-default btn-xs" href="{{ data.comments_form.login_link }}"> {{ data.translations.t_login }} </a> <a class="btn btn-default btn-xs" href="{{ data.comments_form.signup_link }}"> {{ data.translations.t_signup }} </a></div>
        {% elseif data.comments_form.comments_restriction == "logged_in" and data.is_logged_in and not data.is_confirmed_email %}
    <div class="panel-body">
      <a class="btn btn-default btn-xs" href="{{ data.confirm_email_link }}?redir={{ data.comments_form.url_encoded }}">{{ data.translations.t_confirm_email }}</a>
    </div>
        {% else %}
     {% include '/blogblocks/comment_form_form.twig' %}
        {% endif %}
  </div>
      {% endif %}
    {% endif %}
  {% endblock %}

Comments form form

<form action="{{ data.comments_form.url }}" method="post" id="xt_blog_comment_form" name="post"> 
      <div class="panel-body">
          {% if data.entry.in_comments_thread %}
        <input type="hidden" name="__xtblog_comment_thread_id" value="{{ data.entry.in_comments_thread }}" />
          {% endif %}
        <input type="hidden" name="__xtblog_post" value="Post" />
        <input type="hidden" name="__xtx" value="{{ data.comments_form.fields.xtx }}" />
        <input type="hidden" name="__xtxs" value="{{ data.comments_form.fields.xtxs }}" />
        <input type="text" name="__xtblog_blog" value="" style="display:none" />
        {%set xtblog_entry=(data.post.url|split('_entry/')[1])|split('-')[0]%}
        <input type="hidden" name="__xtblog_entry" value="{{ xtblog_entry }}" />
          {% if data.is_logged_in and data.new_comments_system %}
        <div class="well well-sm" style="
    margin-bottom: 8px;">{{ data.translations.t_posting_as }}: <span class="text-info">{{ data.community_name }}</span></div>
          {% else %}
            {% if data.comments_form.spam_comments_reserved_name and data.new_comments_system %}
        <div class="well well-sm text-warning text-center" style="
    margin-bottom: 8px;">{{ data.translations.t_reserved_name }}</div>
            {% endif %}
            {% if data.comments_form.poster %}
        <input type="hidden" name="__xtblog_nick" value="{{ data.comments_form.poster }}" />
            {% else %}
        <div class="small text-muted">{{ data.translations.t_name }}</div>
        <input class="form-control" type="text" name="__xtblog_nick" value="{{ data.comments_form.spam_comments_nick }}" />
            {% endif %}
          {% endif %}
          {% if data.comments_form.comments_restriction == "email_required" and not data.is_logged_in %}
        <div class="small text-muted">{{ data.translations.t_email }}</div>
        <input class="form-control" type="email" name="__xtblog_email" value="{{ data.comments_form.spam_comments_email }}" />
          {% endif %}
        <div class="small text-muted">{{ data.translations.t_comment }}</div>
          {# BBcode and Emoticon tool #}
          {% if data.device != 'mobile'%}
          {% include '/blogblocks/BB_tool.twig' %}
          {% endif %}
          {# BBcode and Emoticon tool ?> #}                             
        <textarea class="form-control" placeholder="{{ data.translations.t_comment }}" id="xtblog_comment_msg" name="__xtblog_msg">{{ data.comments_form.spam_comments_msg }}</textarea>
          {% if data.comments_form.spam_comments %}
        <input type="hidden" name="hash" value="{{ data.comments_form.spam_hash }}" />
        <div class="thumbnail " style="max-width:187px;margin-top:4px">
        <img class="img-thumbnail" src="{{ data.comments_form.spam_captcha_url }}" alt="" /><br />
        <div class="small text-muted">Code:</div><br />
        <input class="form-control" type="text" name="code" />
        </div>
          {% endif %}
      </div>
      <div class="panel-footer">
        <input class="btn btn-default btn-xs" type="submit" value="{{ data.translations.t_post }}" />
        <input class="btn btn-default btn-xs" type="reset" />
      </div>
    </form>

Comments list

{% block entry_comments_list %}
    <div class="panel panel-default">
    <div class="panel-body">
      <a class="btn btn-default btn-xs" href="{{ data.back_url }}">{{ data.translations.t_back_to_posts }}</a>
    {% if data.post.allow_comments and data.new_comments_system and data.entry.in_comments_thread %}
      <a href="{{ data.entry.comments_thread_all|replace({'#xt_blog':'#post_form_container'}) }}" class="btn btn-default btn-xs">{{ data.translations.t_show_all_comments }}</a>
      {% if data.entry.comments_thread_parent %}
      <a href="{{ data.entry.comments_thread_parent }}#post_form_container" class="btn btn-default btn-xs">{{ data.translations.t_see_parent_thread }}</a>
      {% endif %}
    {% endif %}
    </div>
  </div>
    {% if data.post.allow_comments and data.entry.comments%}
  <div class="panel panel-default">
      {% if data.new_comments_system %}
    <div class="panel-heading"><b>{{ data.translations.t_comments }}</b></div>
  {% include '/blogblocks/comments_macro.twig' %}                  
        {% if pagination_html %}
    <div class="panel-footer">{{ pagination_html|raw }}</div>
        {% endif %}
  </div>
      {% else %}
  <div class="panel panel-default" id="xt_blog_comments">
    <div class="panel-heading">{{ data.translations.t_comments }}</div>
    <div class="list-group">
        {% for comment in data.entry.comments %}
      <div class="list-group-item">
        <span class="btn btn-default btn-xs">{{ comment.nick }}</span>
        <div>{{ comment.message|replace({('$'):'&#36;',('('):'&#40;'})|raw }}</div>
        <div class="small text-muted">{{ comment.date }}</div>
      </div>
        {% endfor %}
    </div>
    <div class="panel-footer">{{ pagination_html|raw }} </div>
  </div>
      {% endif %}
    {% endif %}
  {% endblock %}

Comments list macro

{% macro comments_list (comments, ctx, owner) %}
{# <? #}
{% for comment in comments %}
<div class="list-group-item">

{% if comment.author_profile %}
<a class="btn btn-default btn-xs" href="{{ comment.author_profile.link }}"><img src="{{ comment.author_profile.avatars[16] }}" style="display:inline"><span class="text-{% if comment.owner_of_comment %}info{%else%}default{% endif %}">{{ comment.author_profile.name }}</span></a>
{% else %}
<span class="btn btn-default btn-xs"><img src="/images/user.png" /> {{ comment.nick }}</span>
{% endif %}
{% if comment.is_hidden %}
<div class="text-warning">{{ ctx.data.translations.t_hidden_comment }}</div>
{% else %}
{%set mssg= comment.message %}

{# fix code bbtag in comments #}
{% if '&lt;pre&gt;' in mssg %}{%set mssg = mssg|replace({('&lt;pre&gt;'):'<pre class="pre-scrollable" style="resize:horizontal">',('&lt;/pre&gt;'):'</pre>',('&amp;'):'&','<p>':'','</p>':'','<em>':'_','</em>':'_','\r\n': '', '\n': '', '\r': '' }) %}{% endif %}
{%if comment.author_profile.name != owner %}
{# no images in comments #}
{%if 'no_img' in ctx.data.translations.t_no_entries_found%}
{% if '<img' in mssg %}
{% set m=mssg|split('<img src="') %}
{% for i in 1..(m|length-1) %}
{% if not ( m[i] starts with 'http://xtgem.com') %}
{% set n=m[i]|split('"') %}
{% set mssg=mssg|replace ({("<img src=\"#{n[0]}\" alt=\"img\" />"):'<b class="text-danger">[images disabled]</b>'}) %}
{% endif %}
{% endfor %}
{% endif %}
{% endif %}
{# no links in comments #}
{%if 'no_link' in ctx.data.translations.t_no_entries_found%}
{% if '<a href' in mssg %}
{% set m=mssg|split('<a href="') %}
{% for i in 1..(m|length-1) %}
{% set n=m[i]|split('a>') %}
{% set mssg=mssg|replace ({("<a href=\"#{n[0]}a>"):'<b class="text-danger">[links disabled]</b>'}) %}
{% endfor %}
{% endif %}
{% endif %}
{# no embedded youtube in comments #}
{%if 'no_tube' in ctx.data.translations.t_no_entries_found%}
{% if '<object' in mssg %}{% set mssg=mssg|replace({("<object"):'<b class="text-danger">[youtube disabled]</b><!--',("</object"):'--'}) %}{% endif %}
{% endif %}
{% endif %}
<div class="message">{{ mssg|replace({('$'):'&#36;',('('):'&#40;'})|raw }}</div>
{% endif %}
<div class="small text-muted">{{ comment.date }}</div>
{% if not ( ctx.data.entry.in_comments_thread and comment.childs and (comment.childs_count > 0) ) %}
<div class="">
<a class="btn btn-default btn-xs" href="{{ comment.reply_link }}#post_form_container">{{ ctx.data.translations.t_reply }}</a>
{% if ctx.data.is_logged_in and not comment.is_hidden and not data.comments_form.is_maintenance %}
{% if ctx.data.reported_spam and ctx.data.reported_spam == comment.id %}
<span class="btn btn-danger btn-xs" >{{ctx.data.translations.t_reported}}</span>
{% else %}
<a class="btn btn-default btn-xs" href="{{ comment.spam_link }}">{{ ctx.data.translations.t_report_spam }}</a>
{% endif %}
{% elseif not ctx.data.is_logged_in and not comment.is_hidden and not data.comments_form.is_maintenance %}
<a class="btn btn-default btn-xs" href="{{ comment.login_link }}">{{ ctx.data.translations.t_report_spam }}</a>
{% endif %}
{% if not comment.childs and (comment.childs_count > 0) %}
<a class="btn btn-default btn-xs" href="{{ comment.reply_link }}#post_form_container">{{ ctx.data.translations.t_show_replies }} ({{comment.childs_count}})</a>
{% endif %}
{% if comment.show_more %}
<a class="btn btn-default btn-xs" href="{{ comment.reply_link }}#post_form_container">{{ ctx.data.translations.t_show_all_replies }}</a>
{% endif %}
</div>
{% endif %}
</div>
{% if comment.childs %}                                        
{{ _self.comments_list(comment.childs, ctx, owner) }}
{% endif %}
{% endfor %}
{#?> #}
        {% endmacro %}
    <div class="list-group">{{ _self.comments_list(data.entry.comments, _context, owner) }}</div>

BB code and emotes tool

<div>
<div class="btn-group btn-group-xs" id="bbtool" >
<a class="btn btn-default" title="Bold text" href="javascript:tag('[b]','[\&#47;b\]')"><b>B</b></a>
<a class="btn btn-default" title="Italic text" href="javascript:tag('[i]','[\&#47;i\]')"><i>I</i></a>
<a class="btn btn-default" title="Underlined text" href="javascript:tag('[u]','[\&#47;u\]')"><u>U</u></a>
<a class="btn btn-default" title="New line" href="javascript:tag('[br]','')"><small>&lt;br&gt;</small></a>
{%if data.community_name == owner or 'no_link' not in data.translations.t_no_entries_found%}
<a class="btn btn-default" title="Link" href="javascript:tag('[url=...]','[\&#47;url\]')"><small>url</small></a>
{% endif %}
{%if data.community_name == owner or 'no_img' not in data.translations.t_no_entries_found%}
<a class="btn btn-default" title="Insert image" href="javascript:tag('[img]','[\&#47;img\]')"><small>img</small></a>
{% endif %}
<a class="btn btn-default" title="show code" href="javascript:tag('[code]','[\&#47;code\]')"><small>&lt;/&gt;</small></a>
<a class="btn btn-default" title="Text color" href="javascript:tag('[color=000000]','[\&#47;color\]')"><small class="text-danger">A</small><small class="text-success">B</small><small class="text-info">C</small></a>
<a class="btn btn-default" title="Text size" href="javascript:tag('[size=16]','[\&#47;size\]')"><small>A</small>A</a>
<a class="btn btn-default" title="Mail to" href="javascript:tag('[email]','[\&#47;email\]')">@</a>
{%if data.community_name == owner or 'no_tube' not in data.translations.t_no_entries_found%}
<a class="btn btn-danger" title="Embed Youtube video" href="javascript:tag('[youtube]','[\&#47;youtube\]')"><small class="">&#9658;</small></a>
{% endif %}
<a class="btn btn-default" title="Emoticons" href="javascript:show_sml('sml');"><b>:)</b></a>
</div>
<div id="sml" class="" style="display:none">
<a href="javascript:tag(':&#41;','')"><img src="http://xtgem.com/images/smilies/smile_mini2.gif" alt="*" title=":)" /></a>
<a href="javascript:tag(':&#40;','')"><img src="http://xtgem.com/images/smilies/sad_mini.gif" alt="*" title=":(" /></a>
<a href="javascript:tag(':DD','')"><img src="http://xtgem.com/images/smilies/laugh_mini2.gif" alt="*" title=":DD" /></a>
<a href="javascript:tag(':D','')"><img src="http://xtgem.com/images/smilies/biggrin_mini2.gif" alt="*" title=":D" /></a>
<a href="javascript:tag(':o','')"><img src="http://xtgem.com/images/smilies/chok_mini.gif" alt="*" title=":o" /></a>
<a href="javascript:tag('0_0','')"><img src="http://xtgem.com/images/smilies/scratch_one-s_head_mini.gif" alt="*" title="0_0" /></a>
<a href="javascript:tag(':P','')"><img src="http://xtgem.com/images/smilies/blum_mini.gif" alt="*" title=":P" /></a>
<a href="javascript:tag('B&#41;','')"><img src="http://xtgem.com/images/smilies/dirol_mini.gif" alt="*" title="B)" /></a>
<a href="javascript:tag('&#62;:&#40;','')"><img src="http://xtgem.com/images/smilies/mad_mini.gif" alt="*" title=">:(" /></a>
<a href="javascript:tag('o_O','')"><img src="http://xtgem.com/images/smilies/fool_mini2.gif" alt="*" title="o_O" /></a>
<a href="javascript:tag('&#62;_&#62;','')"><img src="http://xtgem.com/images/smilies/unsure_mini.gif" alt="*" title=">_>" /></a>
<a href="javascript:tag('&#45;_&#45;','')"><img src="http://xtgem.com/images/smilies/nea_mini.gif" alt="*" title="-_-" /></a>
<a href="javascript:tag(':&#45;&#40;','')"><img src="http://xtgem.com/images/smilies/sad_mini2.gif" alt="*" title=":-(" /></a>
<a href="javascript:tag(':&#45;&#41;','')"><img src="http://xtgem.com/images/smilies/happy_mini.gif" alt="*" title=":-)" /></a>
<a href="javascript:tag('^^','')"><img src="http://xtgem.com/images/smilies/smile_mini.gif" alt="*" title="^^" /></a>
<a href="javascript:tag(';&#41;','')"><img src="http://xtgem.com/images/smilies/wink_mini.gif" alt="*" title=";)" /></a>
<a href="javascript:tag('O:&#45;&#41;','')"><img src="http://xtgem.com/images/smilies/angel_mini.gif" alt="*" title="O:-)" /></a>
<a href="javascript:tag(':p','')"><img src="http://xtgem.com/images/smilies/beee_mini.gif" alt="*" title=":p" /></a>
<a href="javascript:tag(';&#45;D','')"><img src="http://xtgem.com/images/smilies/biggrin_mini.gif" alt="*" title=";-D" /></a>
<a href="javascript:tag(':&#42;&#40;','')"><img src="http://xtgem.com/images/smilies/cray_mini.gif" alt="*" title=":*(" /></a>
<a href="javascript:tag(']:&#45;&#62;','')"><img src="http://xtgem.com/images/smilies/diablo_mini.gif" alt="*" title="]:->" /></a>
<a href="javascript:tag('(y&#41;','')"><img src="http://xtgem.com/images/smilies/good_mini.gif" alt="*" title="(y)" /></a>
<a href="javascript:tag('&#60;3','')"><img src="http://xtgem.com/images/smilies/heart_mini.gif" alt="*" title="<3" /></a>
<a href="javascript:tag(':&#42;','')"><img src="http://xtgem.com/images/smilies/kiss_mini.gif" alt="*" title=":*" /></a>
<a href="javascript:tag(':&#45;&#41;&#41;','')"><img src="http://xtgem.com/images/smilies/laugh_mini.gif" alt="*" title=":-))" /></a>
<a href="javascript:tag('[:&#41;','')"><img src="http://xtgem.com/images/smilies/music_mini.gif" alt="*" title="[:)" /></a>
<a href="javascript:tag('[:&#45;&#41;','')"><img src="http://xtgem.com/images/smilies/music_mini2.gif" alt="*" title="[:-)" /></a>
<a href="javascript:tag(':&#45;O','')"><img src="http://xtgem.com/images/smilies/shout_mini.gif" alt="*" title=":-O" /></a>
<a href="javascript:tag('&#63;&#45;&#124;','')"><img src="http://xtgem.com/images/smilies/vava_mini.gif" alt="*" title="?-|" /></a>
<a href="javascript:tag(':aggressive:','')"><img src="http://xtgem.com/images/smilies/aggressive_mini.gif"alt="*" title=":aggressive:" /></a>
<a href="javascript:tag(':bomb:','')"><img src="http://xtgem.com/images/smilies/bomb_mini.gif" alt="*" title=":bomb:" /></a>
<a href="javascript:tag(':bye:','')"><img src="http://xtgem.com/images/smilies/bye_mini.gif" alt="*" title=":bye:" /></a>
<a href="javascript:tag(':celebrate:','')"><img src="http://xtgem.com/images/smilies/drink_mini.gif" alt="*" title=":celebrate:" /></a>
<a href="javascript:tag(':clap:','')"><img src="http://xtgem.com/images/smilies/clapping_mini.gif" alt="*" title=":clap:" /></a>
<a href="javascript:tag(':confused:','')"><img src="http://xtgem.com/images/smilies/unknw_mini.gif" alt="*" title=":confused:" /></a>
<a href="javascript:tag(':crazy:','')"><img src="http://xtgem.com/images/smilies/crazy_mini.gif" alt="*" title=":crazy:" /></a>
<a href="javascript:tag(':dance:','')"><img src="http://xtgem.com/images/smilies/dance_mini.gif" alt="*" title=":dance:" /></a>
<a href="javascript:tag(':drink:','')"><img src="http://xtgem.com/images/smilies/drink2_mini.gif" alt="*" title=":drink:" /></a>
<a href="javascript:tag(':fool:','')"><img src="http://xtgem.com/images/smilies/fool_mini.gif" alt="*" title=":fool:" /></a>
<a href="javascript:tag(':inlove:','')"><img src="http://xtgem.com/images/smilies/man_in_love_mini.gif" alt="*" title=":inlove:" /></a>
<a href="javascript:tag(':LOL:','')"><img src="http://xtgem.com/images/smilies/lol_mini.gif" alt="*" title=":LOL:" /></a>
<a href="javascript:tag(':lol:','')"><img src="http://xtgem.com/images/smilies/lol_mini2.gif" alt="*" title=":lol:" /></a>
<a href="javascript:tag(':mamba:','')"><img src="http://xtgem.com/images/smilies/mamba_mini.gif" alt="*" title=":mamba:" /></a>
<a href="javascript:tag(':mock:','')"><img src="http://xtgem.com/images/smilies/mocking_mini.gif" alt="*" title=":mock:" /></a>
<a href="javascript:tag(':pardon:','')"><img src="http://xtgem.com/images/smilies/pardon_mini.gif" alt="*" title=":pardon:" /></a>
<a href="javascript:tag(':rofl:','')"><img src="http://xtgem.com/images/smilies/rofl_mini.gif" alt="*" title=":rofl:" /></a>
<a href="javascript:tag(':rolleyes:','')"><img src="http://xtgem.com/images/smilies/rolleyes_mini.gif" alt="*" title=":rolleyes:" /></a>
<a href="javascript:tag(':rose:','')"><img src="http://xtgem.com/images/smilies/rose_mini.gif" alt="*" title=":rose:" /></a>
<a href="javascript:tag(':secret:','')"><img src="http://xtgem.com/images/smilies/secret_mini.gif" alt="*" title=":secret:" /></a>
<a href="javascript:tag(':shy:','')"><img src="http://xtgem.com/images/smilies/blush_mini.gif" alt="*" title=":shy:" /></a>
<a href="javascript:tag(':sick:','')"><img src="http://xtgem.com/images/smilies/bo_mini.gif" alt="*" title=":sick:" /></a>
<a href="javascript:tag(':sorry:','')"><img src="http://xtgem.com/images/smilies/sorry_mini.gif" alt="*" title=":sorry:" /></a>
<a href="javascript:tag(':wack:','')"><img src="http://xtgem.com/images/smilies/wacko_mini2.gif" alt="*" title=":wack:" /></a>
<a href="javascript:tag(':wacko:','')"><img src="http://xtgem.com/images/smilies/wacko_mini.gif" alt="*" title=":wacko:" /></a>
<a href="javascript:tag(':yay:','')"><img src="http://xtgem.com/images/smilies/yahoo_mini.gif" alt="*" title=":yay:" /></a>
</div>  
</div>

No contents

<div class="panel panel-default" > 
  {% block no_contents %}
    {% if data.searchbox.phrase %}
    <div class="panel-heading">{{ data.translations.t_no_search_results_found }}</div>
    {% else %}
    <div class="panel-heading">{{ data.translations.t_no_entries_found }}</div>
    {% endif %}
  {% endblock %}
  {% block no_contents_searchbox %}
    {% if data.searchbox %}
    <div class="panel-body">
      <form action="{{ data.searchbox.url }}" method="get" class="form-inline">
      {% for key, value in data.searchbox.params %}
        {% if value %}
        <input type="hidden" name="{{ key }}" value="{{ value }}" />
        {% endif %}
      {% endfor %}
        <div class="input-group input-group-sm">
          <input class="form-control" type="search" name="__xtblog_search" value="{{ data.searchbox.phrase }}" />
          <div class="input-group-btn">
            <input class="btn btn-default" type="submit" value="{{ data.translations.t_search }}" />
          </div>
        </div>
      </form>
    </div>
      {% if data.back_url %}
    <div class="panel-footer"><a href="{{ data.back_url }}" class="btn btn-default btn-xs">{{ data.translations.t_back_to_posts }}</a></div>
      {% endif %}
    {% endif %}
  {% endblock %}
  </div>

Debug tool

Css

Custom Css

Upload/copy to main filebrowser (root) as blog.css the file is linked in _headtags

body {font-family:'Roboto',sans-serif;padding-top: 54px;}
.pagination {margin-top:4px;margin-bottom:4px}
.panel-group {margin-bottom:2px}
div [class^="col-"] {padding: 4px }

.entries_list {}
.entries-tagged , 
.entry , 
.entries-list-footer {border-color:rgba(0,0,0,0.05)!important}
.entry-thumb {display:inline-block;max-width:32%;margin-right:4px;}
.entry-thumb.related img {max-width:60px;}
.entry-info {}
.entry-details {display:inline-block;vertical-align:top;max-width:66%}
.entry-title a , 
.entry-title a :hover , 
.entry-title a :focus {font-family: 'Roboto', sans-serif;font-size:120%;line-height:100%;text-decoration:none}
.entry-description {word-wrap: break-word;padding-top:8px}

@media screen and (max-width:480px) {.entry-description {display:none}}
@media screen and (max-width:360px) {.comments-count {display:none}}
@media screen and (max-width:280px) {.entry-date {display:none}}

.post-content img {max-width:100%}

/* This element defines the size the iframe will take.
       In this example we want to have a ratio of 25:14 */
    .aspect-ratio {
      position: relative;
      width: 100%;
      height: 0;
      padding-bottom: 56%; /* The height of the item will now be 56% of the width. */
    }

/* Adjust the iframe so it's rendered in the outer-width and outer-height of it's parent */
    .aspect-ratio iframe {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
    }

Post list default image

Upload to blog_images This is the default image used in the post list when the post does not have a image

BBcode tool javascript

Upload/copy to /js folder as /js/bbcode.js the script is called in The blog function page above the blog function

//Script for BBcode tool
    function tag(text1, text2) {
    if ((document.selection)) {
      document.post.__xtblog_msg.focus();
      document.post.document.selection.createRange().text = text1+document.post.document.selection.createRange().text+text2;
    } 
    else if(document.forms['post'].elements['__xtblog_msg'].selectionStart!=undefined) {
      var element = document.forms['post'].elements['__xtblog_msg'];
      var str = element.value;
      var start = element.selectionStart;
      var length = element.selectionEnd - element.selectionStart;
      element.value = str.substr(0, start) + text1 + str.substr(start, length) + text2 + str.substr(start + length);
    } 
    else {
      document.post.__xtblog_msg.value += text1+text2;
    }
 document.forms['post'].elements['__xtblog_msg'].focus(); }
  function show_sml(elem) {
    obj = document.getElementById(elem);
    if( obj.style.display == "none" ) {
      obj.style.display = "block";
    } 
    else {
      obj.style.display = "none";
    }
 document.forms['post'].elements['__xtblog_msg'].focus(); }

Related posts xtscript full page code

NOTE: Do not use [ ] or | in post names if you use this script or it will break the related posts code

upload/copy (remove .js after upload)

</head>
<body>
  <xt:code>
    <div class="container">  
      <div class="row">
        <div class="col-sm-8">
          <script src="/js/bbcode.js"></script>
          #<?
var $related_posts_number= 5
var $bad_words=ivorbiggun,bananas
var $panelTitle=Related posts
#</xt:code>
var $blog = <xt:blog t_no_entries_found="bs_pagination no_links no_images no_youtube" hide_tags="0" tzone="0" format="ago" display="5" show_time="1" entries_per_page="5" comments_per_page="3" comments_sort="-1" entries_sort="-1" display_limit="128" display_symbol="" version="2" show_searchbox="0" t_back_to_posts="" t_comments="" t_comments_empty="" t_post_a_comment="" t_name="" t_comment="" t_post="" t_tags=" related categories" t_search="" t_created="Updated" t_showing_tagged_posts="Posts related to" t_no_search_results_found="" t_show_all_comments="" t_see_parent_thread="" t_show_all_replies="" t_show_replies="" t_reply="" t_posting_as="" t_comments_login_required="" t_login="" t_signup="" t_confirm_email="" t_report_spam="" comments_disable_links="0" badwords="$bad_words" />
#<xt:code>

get __xtblog_block_id
get __xtblog_entry

if not $__xtblog_entry or not $__xtblog_block_id
goto @output_blog
endif

var $start_tags=call strpos $haystack=$blog;$needle=!--#
var $start_tags=($start_tags+4)
var $end_tags=call strpos $haystack=$blog;$needle=#--;$offset=$start_tags

if not $start_tags or not $end_tags
goto @output_blog
endif

var $tags=call substr $val=$blog;$start=$start_tags;$length=($end_tags-$start_tags)
@main_loop
var $tag_end=call strpos $haystack=$tags|;$needle=|;$offset=($tag_start+1)

if not $tag_end 
goto @related_list
endif

var $tag=call substr $val=$tags;$start=$tag_start;$length=($tag_end-$tag_start)
var $tagged_post_list = <xt:blog display="5" display_limit="64" entries_per_page="0" version="2" tag="$tag" t_no_entries_found="related2" t_no_search_results_found="$__xtblog_entry" />
var $current_entry_start = 0
@next_entry  
var $current_entry_end=call strpos $haystack=$tagged_post_list;$needle=];$offset=$current_entry_start

if not $current_entry_end
goto @next_tag
endif

var $current_entry=call substr $val=$tagged_post_list;$start=$current_entry_start;$length=($current_entry_end-$current_entry_start+1)

var $duplicate=call strpos $haystack=[$related_post_list;$needle=$current_entry
if $duplicate
goto @duplicate_entry
endif

var $rand=call mt_rand $min=0; $max=1
if $rand
var $related_post_list=$related_post_list$current_entry
else
var $related_post_list=$current_entry$related_post_list
endif

@duplicate_entry
var $current_entry_start=($current_entry_end+1)
goto @next_entry

@next_tag  
var $tag_start=($tag_end+1)
goto @main_loop

@related_list
var $path=<xt:url type="path">
var $count=0
var $start_entry=0

@next_button
var $end_entry=call strpos $haystack=$related_post_list;$needle=];$offset=$start_entry

if not $end_entry
goto @insert_buttons
endif

var $entry=call substr $val=$related_post_list;$start=$start_entry;$length=($end_entry-$start_entry+1)

var $end_value=call strpos $haystack=$entry;$needle=|;$offset=1
var $url=call substr $val=$entry;$start=1;$length=($end_value-1)

var $start_value=($end_value+1)
var $end_value=call strpos $haystack=$entry;$needle=|;$offset=$start_value
var $name=call substr $val=$entry;$start=$start_value;$length=($end_value-$start_value)

var $start_value=($end_value+1)
var $end_value=call strpos $haystack=$entry;$needle=|;$offset=$start_value
var $date=call substr $val=$entry;$start=$start_value;$length=($end_value-$start_value)

var $start_value=($end_value+1)
var $end_value=call strpos $haystack=$entry;$needle=];$offset=$start_value
var $desc=call substr $val=$entry;$start=$start_value;$length=($end_value-$start_value)

var $end_img = call strpos $haystack=$desc;$needle=>;$offset=0
if $end_img
var $img=call substr $val=$desc;$start=0;$length=($end_img+1)
var $img_link=<a href="$path/__xtblog_entry/$url?__xtblog_block_id=1#xt_blog" >$img</a>
var $desc=call substr $val=$desc;$start=($end_img+1)
else 
var $img_link=<a href="$path/__xtblog_entry/$url?__xtblog_block_id=1#xt_blog" ><img src="/blog_images/default.png" alt="" /></a>
endif

var $links = {{$links
<div class="list-group-item entry">
<div class="entry-thumb related" style="">$img_link</div>
  <div class="entry-details small">
<b class=""><a href="$path/__xtblog_entry/$url?__xtblog_block_id=1#xt_blog" ><span class="">$name</span></a></b>
    <div class="entry-info "><span class="text-muted entry-date">$date</span></div>
    <div class=" text-muted entry-description " style="padding-top:0">$desc</div>
  </div>
</div>}}

var $start_entry=($end_entry+1)
var $count=($count+1)

if $count < $related_posts_number
goto @next_button
endif

@insert_buttons
if $links
var $blog=call str_replace $subject=$blog; $search=; $replace=<div class="panel panel-default"><div class="panel-heading">$panelTitle</div>$links</div>
endif

@output_blog
print $blog
#?>
          
        </div>
        <div class="col-sm-4">
          <div class="panel panel-default">
            <div class="panel-heading"><h2>Lorem Ipsum</h2></div>
            <div class="panel-body">
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin convallis nisi sed leo dignissim commodo. In ullamcorper diam a dui porttitor, in viverra massa consequat. Sed commodo enim ac facilisis ultricies. In congue aliquam mattis. Duis rhoncus metus a est condimentum condimentum. Pellentesque a ante in purus auctor rhoncus a at diam. Cras pretium efficitur libero et facilisis. Etiam fermentum diam massa, in facilisis enim venenatis euismod. Nulla bibendum velit at condimentum hendrerit. Vestibulum non tellus libero.</p>
              <p>Nullam a odio arcu. Sed quis fermentum velit, eu feugiat urna. Donec bibendum, nisl non scelerisque congue, nulla ex tristique magna, pellentesque vestibulum dolor quam vitae sem. Aliquam quis bibendum arcu, accumsan ultricies lectus. Praesent ut mi dignissim, tempor urna venenatis, auctor nunc. Praesent facilisis fermentum lorem, ut luctus nunc imperdiet non. Duis sollicitudin ligula nibh, ut iaculis turpis volutpat quis. Maecenas tincidunt sem nec risus ornare sagittis. Etiam a nibh eros. In sagittis massa eu volutpat dictum. Sed sed viverra magna. Praesent fringilla ornare lectus et euismod. Donec quis magna porta, consectetur quam eget, mollis neque.</p>
            </div>
          </div>
        </div>  
      </div>
    </div>
  </xt:code>
</body>
</html>

Standard blog full page code

upload/copy (remove .js after upload)

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Standard blog page</title>
</head>
<body>
  <xt:code>
    
  <script src="/js/bbcode.js"></script>
    
<div class="container">
  <div class="row">
</xt:code>
<xt:code>
  
    <div class="col-sm-8">
</xt:code>
        <xt:blog tzone="0" format="ago" display="5" show_time="1" entries_per_page="5" comments_per_page="20" comments_sort="-1" entries_sort="-1" display_limit="128" display_symbol="" version="2" show_searchbox="1" t_back_to_posts="" t_comments="" t_comments_empty="" t_post_a_comment="" t_name="" t_comment="" t_post="" t_tags="" t_search="" t_created="Updated" t_showing_tagged_posts="" t_no_entries_found="bs_pagination dump no_link" t_no_search_results_found="" t_show_all_comments="" t_see_parent_thread="" t_show_all_replies="" t_show_replies="" t_reply="" t_posting_as="" t_comments_login_required="" t_login="" t_signup="" t_confirm_email="" t_report_spam="" />
<xt:code>
  
      </div> 
</xt:code>
<xt:code>  
      <div class="col-sm-4">
        <div class="panel panel-default">
          <div class="panel-heading"><h2>Another panel</h2></div>
          <div class="panel-body">
            <p>Content goes here</p>
          </div>
        </div>
      </div>  
</xt:code>
<xt:code> 
  
    </div>
  </div>
</xt:code>

</body>
</html>

Headtags header and footer

_headtags

This contains the bootstrap and custom blog css links

_header

The code for the header of this site it also contains the bootstrap and jquery links

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav xt_navigation">
        <li><a href="/">Home</a></li>
        <li><a href="/related">blog</a></li>
        <li><a href="#">link 2</a></li>
        <li><a href="#">link 3</a></li>
        <li><a href="#">link 4</a></li>
      </ul>
    </div>
  </div>
</nav>

_footer

This sites footer contains code to fix the xtgem auth bar at the bottom of the page