Get Bootstrap Full XtGem Tutorial

B Bootstrap Blog (Bootstrap 3.3.7) Template version 1.4

This Xtblog twig template has been completly rewritten using Bootstrap markup and Bootstrap css.

The template has fixes for some issues
Problems with $ and ( ) in blogs via xtscript
[code]...[/code] BBcode tag now works in comments when html in comments is disabled (the default value)

On the post list page the blog is displayed in two columns of equal width . (col-sm-6 , col-sm-6)
The file right_def_6.twig holds the code used for the right panel on the post list page.

When viewing a post the post panel is twice the width of the comments panel. (col-sm-8 , col-sm-4)
The file no_comment.twig holds the code used for the right panel when comments are disabled.

You can use any html in these files you can also use twig script and reference variables set in the main blog twig template
You can only use xtfunctions if the blog is assigned to a variable and printed using xtscript.
You cannot use xtscript or xtscript variables in these files.
No other code apart from a bootstrap <div class="container-fluid"> wrapper is required for a standard blog function
The main blog showing on this site is a 'Related posts' blog

CSS links for Bootstrap 3.3.7
Add these links to your blog pages head area or add them to your _headtags file Ajax and Javascript links for Bootstrap 3.3.7
Add these links to your blog pages body area or add them to your _header or _footer file
The reason for adding these in the body is that xtgems parser inserts its own javascript and some other tags that don't belong in the head before the first javascript on the page Pagination
You can use your own xtscript custom paging for your blog or you can enable a routine that converts the standard xtgem blog pagination to bootstrap markup
To enable the convertion add bs_pagination to the No entries found (t_no_entries_found) parameter in the blog function
"Filelist in a blog post" pagination
The twig template also 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 No links in comments
You can enable link blocking in comments by adding no_links to the No entries found (t_no_entries_found) parameter in the blog function
When links are disabled The url option will not show in the BBcode tool
Note; do not set the comments_disable_links="1" or this filter will not work No images in comments
You can enable image blocking in comments by adding no_img to the No entries found (t_no_entries_found) parameter in the blog function
When images are disabled The img option will not show in the BBcode tool No embed youtube in comments
You can enable video blocking in comments by adding no_tube to the No entries found (t_no_entries_found) parameter in the blog function
When video is disabled The ► option will not show in the BBcode tool

Comment BB code and emote tool
The file [b]bbhelp.twig[/b] contains the data for the BBcode 'help' panel
This feature requires this javascript to be available
The template looks for this script in /js/bbtool.js
The script was posted on the XtGem forum by Ekonime

Related posts
To use this feature you need to use this Xtscript
You need to disable the normal tags by setting hide_tags="1" in the blog function
A customized blog function is called for each tag on the post
the returned entries are then filtered for duplicates and randomly added to either the top or bottom of the "related posts list"
a loop in the script then extracts a preset number of the results and injects them into the blog page
The position of the links is determined by  in the main blog twig file
NOTE:
The links from the account 'feed' page do not send a __xtblog_block_id value with the link this breaks the 'related posts' xtscript and corrupts the output
If no __xtblog_block_id is detected normal blog tags are shown

#<?
var $bad_words=ivorbiggun,bananas
get __xtblog_block_id

#</xt:code>
var $blog= <xt:blog hide_tags="$__xtblog_block_id" tzone="0" format="Y-m-d" display="5" show_time="0" entries_per_page="5" comments_per_page="3" 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 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="" comments_disable_links="0" badwords="$bad_words"/>
#<xt:code>

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 entries_per_page="0" version="2" tag="$tag" t_no_entries_found="related" 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
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
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 @inject_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 $links = $links<a class="btn btn-default btn-xs" role="button" href="$path/__xtblog_entry/$url?__xtblog_block_id=1#xt_blog" style="display:inline-block;margin:1px 0 0 1px">$name</a>
var $start_entry=($end_entry+1)
var $count=($count+1)

if $count < 15
goto @next_button
endif

@inject_buttons
var $blog=call str_replace $subject=$blog; $search=; $replace=$links

@output_blog
print <div class="container-fluid">$blog</div>
#?>

The #<? Wrapper is just there to appease the web template text editor.
The #</xt:code> #<xt:code> wrapper is just there to trick the building tool so that you can use the blog function in the building tool
NOTE:
Do not edit the lines var $blog= and # from the building tool or you will break the xtscript
Do not edit the actual blog function from the building tool or you will lose some settings

Files

Twig Files

Upload these files to _xtgem_templates
using the "remote server" option

Remove the .js extension after upload

This file is the bbcode help panel add your own translations

Javascript for BBcode tool

Upload this file to Your /js folder
using the "remote server" option or copy it from the other panel
The template looks for this file in /js/bbtool.js do not upload to _xtgem-templates
It has been kept separate due to the code not surviving passing through xtscript

Extra css

Upload this file to Your css folder
using the "remote server" option

Then add a link to it in your blog pages head area
or add it to your _headtags file From Baretest