filelist bootstrap <ul> markup

Tags:

filelist bootstrap <ul> markup
Filelist in a blog post <ul> markup
Created at 00:17 22:12:16

Filelist in blog

This is a basic filelist using bootstrap ul list-grouplist markup embedded in a blog post

The html of the filelist template is
<li class="list-group-item"><a class="btn btn-info btn-xs" href=".file_url.">.file_name_base_parsed.</a> <span class="badge">.file_size.</span></li>

1370928146 banana 1.68KB
7-6663.71KB
IMG00025-20140717-1203458.29KB
- 1
- 2
- 3
- 4
- 5
- 6
- »

Pagination conversion

The twig template contains a routine that will convert the standard xtgem filelist pagination to bootstrap pagination markup
To use it add  immediately after the filelist function in the blog post html code
For filelists using <ul> the pagination is automatically wrapped in a <li> element

Back to posts

1 Rate up

Star

UNDER MAINTENANCE

Back to posts

Comments:

AH-SID

awesome... :-D

06:39 29:11:16

Reply / View thread Report spam

Graham

This is just a comment to start things

11:56 06:11:16

Reply / View thread Report spam

Back to posts

11/07/2017

Bootstrap Blog Twig v2

These filters can be applied to the blog
The filters are activated by keywords added to the 'no entries found' parameter of the blog function
bs_pagination = Convert pagination to bootstrap markup
no_link = No links in comments
no_img = No images in comments
no_tube = No embedded youtube in comments
dump = Display debug dump of _context variables
The image has been from the post description to allow for better customisation
Added a nl2br filter so that newlines are converted to line breaks in the description text on the post list page
(not <br /> tags as these are stripped out on the server)
The post content no longer disappears when replying to a comment
Improved the page navigation it now reloads to the comment form
BBcode and emoticon insertion tool for comments (disabled on 'mobile' devices)
Fixed the BBcode [code] tags in comments
the contents are displayed in a bootstrap scrollable <pre> element

Twig for this blog

{%spaceless%}
<style>
  .item-heading {padding:4px;}
  .description-image  {margin-right:4px}
  .description-image img {height: 32px;width: 32px;background:#808080}
  @media(min-width: 768px){.description-image img {height: 48px;width: 48px;} }
.post-content img {max-width:100%}
.pagination {margin:0}
</style>
{# Above styles are for development #}
{# 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 #}
{# Navigate to comment form if replying or posting comment <?#}
{%if '__xtblog_comment_page' in data.entry.comments[0].reply_link or '__xtcomments_thread' in data.comments_form.url %}<script>window.location.hash = '#post_form_container';</script>{% endif %}
{#?>#}

<div class="panel-group" id="xt_blog">
{% if view == 'entries_list' %} 
  {% block entries_list_tag %}
    {% if data.tag %}
  <div class="panel panel-default" > 
    <div class="panel-body"><b>{{ data.translations.t_showing_tagged_posts }} {{ data.tag }}</b></div>
  </div>
    {% endif %}
  {% endblock %}
  {% block entries_list %}
    {% for entry in data.entries %}
  <div class="panel panel-default" >
    <div class="panel-heading item-heading ">
      {# Split image link from entry content <?#}
      {% if 'img src' in entry.content%}
        {%set raw_content=entry.content|split('/a>')%}
        {%set content=raw_content[1]%}    
        {# Output image link #}
      <div class="img-thumbnail description-image">{{(raw_content[0]~'/a>')|raw}}</div>
      {%else%}
        {%set content=entry.content%}
      {%endif%}
      {#?>#}  
      <b class="panel-title"><a  href="{{ entry.url|replace({('?__xtblog_block_id=1#xt_blog'):''}) }}">{{ entry.title|raw }}</a></b>  
      {% if entry.comments_count %}
      <div class="badge pull-right"> {{ entry.comments_count }} </div>
      {% endif %}
      {% if data.entry_list_show_time %}
      <div class="small text-muted">{{entry.created}}</div>
      {% endif %}
    </div>
    <div class="panel-body">
      {% if data.display_type != 'header' and entry.content %}
        {{content|trim|nl2br|raw}}
      {% endif %}
    </div>
  </div>
    {% endfor %}
  {% endblock %}
  <div class="panel panel-default" > 
    <div class="panel-body">
  {% block entries_list_footer %}
    {{ pagination_html|raw }}
    {% if data.back_url %}
      <div style="margin-bottom:.5em"><a class="btn btn-default 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">
          <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>
    {% endif %}
  {% endblock %}
    </div>
  </div>
{% elseif view == 'entry' %}
  {% block entry_tags %}
    {% if not data.entry.in_comments_thread %}
      {% if data.hide_tags == false and data.post.tags %} 
  <div class="panel panel-default">
    <div class="panel-heading">{{ data.translations.t_tags }}</div>
    <div class="panel-body">
      <div class="btn-group btn-group-xs">
        {% for tag in data.post.tags %}
        <a class="btn btn-default" href="{{ tag.url|replace({('__xtblog_block_id=1&'):'',('#xt_blog'):''}) }}">{{ tag.name }}</a>
        {% endfor %}
      </div>
    </div>
  </div>
      {% endif %}
    {% endif %}
  {% endblock %}
  {% block entry_post %}
  {% set content=data.post.content %}
  {# Convert filelist paging in blog post to bootstrap markup <?#}
  {%if 'bs_pagination' in data.translations.t_no_entries_found %}
    {%if 'div class=\"filelist_paging\"' in content %}
      {%set a=content|split('<div class="filelist_paging">')%}
      {%set b=a[1]|split('</div>')%}{# </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 %}
   {# COMMENT 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 %}
    <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" />
        <input type="hidden" name="__xtblog_entry" value="{{ data.comments_form.entry_id }}" />
          {% 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'%}
        {# BBcode and emoticon tool <?#}
  <script>
    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(); }
 </script>
<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 '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 '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 '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> 
          {% 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>
        {% endif %}
  </div>
      {% endif %}
    {% endif %}
  {% endblock %}  
  {# COMMENTS #}
  {% 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>
        {% macro comments_list (comments, ctx) %}
{# <? #}
{% 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 %} class=">{{ 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 %}
{# 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 %}
<div class="">{{ mssg|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) }}
{% endif %}
{% endfor %}
{#?> #}
        {% endmacro %}
    <div class="list-group">{{ _self.comments_list(data.entry.comments, _context) }}</div>                    
        {% 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|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 %}
 {% 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 %}
{% elseif view == '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>
{% elseif view == 'no_entry' %}
  {% block no_entry %}
  <div class="well well-sm">No blog entry found</div>
  {% endblock %}
{% endif %}
{%if 'dump' in data.translations.t_no_entries_found%}
  <div class="panel panel-default"><div class="panel-heading">Debug information</div><div class="panel-body"><textarea class="form-control" style="height:10em">{{ _context|json_encode(constant('JSON_PRETTY_PRINT')) }}</textarea></div></div>
{%endif%}
</div>

{%endspaceless%}

template for this page

<!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> blog </title> 
</head>
  <body>
<div data-xtcontainer="container" class="container-fluid">
  <div data-xtcontainer="row" class="row">
    <div data-xtcontainer="col sm 6 (blog)" class="col-sm-6">          
      <xt:blog tzone="0" format="Y-m-d" display="5" show_time="0" entries_per_page="5" comments_per_page="5" comments_sort="-1" entries_sort="-1" display_limit="0" 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="" t_showing_tagged_posts="" t_no_entries_found="bs_pagination" 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="" />
    </div>
    <div data-xtcontainer="col sm 6" class="col-sm-6">
      <div data-xtcontainer="panel" class="panel panel-default">
        <div data-xtcontainer="panel-heading" class="panel-heading">other panel</div>
        <div data-xtcontainer="panel-body" class="panel-body">***************</div>
        <div data-xtcontainer="panel-footer" class="panel-footer">other panel</div>
      </div>              
    </div>
  </div>
</div>
</body>
</html>

Polaroid

filelist bootstrap <ul> markupFilelist in a blog post <ul> markupCreated at 00:17 22:12:16

Filelist in blog

Pagination conversion

filelist bootstrap <ul> markup
Filelist in a blog post <ul> markup
Created at 00:17 22:12:16