Themes customisation
Get started
Let's start coding!
Template syntax
Syntax is very cool and easy to learn
Contextuals objects
Theses objects are available as global objects.
Blog
Your blog object contains some data as title, description and some objects and methods.
Parameter | Description |
---|---|
Blog.Title | Display blog title |
Blog.MainHost | Display blog main host (yourblog.overblog.com) |
Blog.Url | Display blog url (http://yourblog.overblog.com) |
Blog.Avatar | Display blog's avatar url |
Blog.FaviconUrl | Display blog's favicon url |
Blog.Description | Display blog's description |
Blog.Owner.Nickname | User nickname |
Blog.Owner.Avatar | User avatar url |
Blog.Owner.Bio | User bio (set in the user settings) |
Blog.Owner.City | User city (set in the user settings) |
Blog.LastUpdateDate | Display blog's last update as a Date object |
Blog.Lang | Display blog's lang |
Blog.RssUrl | Display blog's RSS feed url |
Blog.PostCount | Display the number of posts published on the blog |
Blog.Posts ( integer number [ , array sources ] [ , boolean included ] ) |
Get a list of blog's posts optionally filtered by number and source as an array of Post objects
|
{# List 10 last posts from all sources #} {% list Blog.Posts %} <h1>{{ Post.Title }}</h1> {% endlist %} {# List 12 last posts from all sources #} {% list Blog.Posts(12) %} <h1>{{ Post.Title }}</h1> {% endlist %} {# List 8 last posts from Overblog #} {% list Blog.Posts(8, ['OB']) %} <h1>{{ Post.Title }}</h1> {% endlist %} {# List 2 last posts from Facebook or Twitter #} {% list Blog.Posts(2, ['FB', 'TW']) %} <h1>{{ Post.Title }}</h1> {% endlist %} {# List 10 last posts from all sources except Facebook and Twitter #} {% list Blog.Posts(10, ['FB', 'TW'], false) %} <h1>{{ Post.Title }}</h1> {% endlist %} |
|
Blog.TaggedPosts ( string tag [ , integer limit ] ) |
Get a list of posts filtered by tag as an array of TaggedPost objects
|
{# List 10 posts with `cat` tag #} {% list Blog.TaggedPosts('cat') %} <h1>{{ TaggedPost.Title }}</h1> {% endlist %} {# List 15 posts with `rainbow` tag #} {% list Blog.TaggedPosts('rainbow', 15) %} <h1>{{ TaggedPost.Title }}</h1> {% endlist %} |
|
Blog.Archives | Get a list of archives as an array of Archive objects |
{# Display a list of all years since the creation of the blog and for each, a list of all month with the number of posts #} <nav class="archives"> <ul> {% list Blog.Archives %} <li> {{ Archive.Year }} <ul> {% list Archive.Months %} <li> <a href="{{ Month.Url }}"> {{ Lang.Get(Month.Name) }} ({{ Month.PostCount }}) </a> {% endlist %} </ul> </li> {% endlist %} </ul> </nav> |
|
Blog.PageCount | Display the number of pages published on the blog |
Blog.Pages | Get a list of all the blog's pages as an array of Page objects |
Blog.TaggedPages ( string tag [ , integer limit ] ) |
Get a list of pages filtered by tag as an array of TaggedPage objects
|
{# List 10 pages with `cat` tag #} {% list Blog.TaggedPages('cat') %} <h1>{{ TaggedPage.Title }}</h1> {% endlist %} {# List 15 pages with `rainbow` tag #} {% list Blog.TaggedPages('rainbow', 15) %} <h1>{{ TaggedPage.Title }}</h1> {% endlist %} |
|
Blog.PostsTags ( integer limit [ , string sort ] ) |
Get a list of all the blog's posts tags as an array of PostsTag objects
|
Blog.PagesTags ( integer limit [ , string sort ] ) |
Get a list of all the blog's pages tags as an array of PagesTag objects
|
Blog.isAdEnabled | Return true if ads in page can be display |
Display some blog informations :
<!-- Display some blog's informations --> <div class="blog-description" style="background-image: url('{{ Blog.Avatar }}');"> <h1>{{ Blog.Title }}</h1> <p>{{ Blog.Description }}</p> </div> <!-- List some tags --> <div class="tags-cloud"> {% if Blog.PostsTags is not null %} <ul> {% list Blog.PostsTags(20, 'index') %} <li>{{ PostsTag.Title }}</li> {% endlist %} </ul> {% endif %} </div> <!-- List some pages --> <div class="pages-list"> {% if Blog.ListPages is not empty %} <ul> {% list Blog.ListPages %} <li> <a href="{{ ListPage.Url }}"> {{ ListPage.Title }} </a> </li> {% endlist %} </ul> {% endif %} </div>
PageTitle
Current page default title : blog title, post title, search title…
<html> <head> <title>{{ PageTitle }}</title> </head> <body> <h1> {{ PageTitle }} </h1> </body> </html>
Posts
Posts list in the current context. If you are on the blog index, a tag summary or a search result, you'll have the n posts where n is set with the displayArticlesLimit parameter in theme config. Then, the offset will change with the page number. If you are on a single post, you'll have only the current post.
{# Display a list of posts links #} <nav> <ul> {% list Posts %} <li> <a href="{{ Post.Url }}"> {{ Post.Title }} </a> </li> {% endlist%} </ul> </nav>
Post
This Post object is available on a single post or page display. You can use isSingle to know if the object would be present.
{# Test if we are on a single post display #} {% if isSingle %} <h1> {{ Post.Title}} </h1> {{ Post.Body }} {% endif %}
Search
This object is available on a search result index. You can use isSearch to know if the object would be present.
Parameter | Description |
---|---|
Search.Keyword | Display the current search keyword |
Search.ResultCount | Display the number of results |
{# Test if we are on a search result index #} {% if isSearch %} {# if we have no result, display a message #} {% if Search.ResultCount == 0 %} <p> No result for {{ Search.Keyword }} :( </p> {# if we have some, display the count #} {% else %} <p> {{ Search.ResultCount }} result{% if Search.ResultCount > 1 %}s{% endif %} for “{{ Search.Keyword }}” </p> {% endif %} {% endif %}
Tag
This Tag object is available on a tag index. You can use isTag to know if the object would be present.
{# Test if we are on a tag index #} {% if isTag %} {# if we have no posts with this tag, display a message #} {% if Tag.PostCount == 0 %} <p> No post with tag “{{ Tag.Title }}” :( </p> {# if we have some, list them #} {% else %} <h1> {{ Tag.PostCount }} posts with tag “{{ Tag.Title }}” </h1> {% list Posts %} <h2> <a href="{{ Post.Url }}"> {{ Post.Title }} </a> </h2> {% endlist %} {% endif %} {% endif %}
Navigation
Some informations about navigation. Its content change with the context.
Parameter | Description |
---|---|
Navigation.CurrentPage | Current page url. |
Navigation.CurrentPageNumber | Current page number. |
Navigation.NextPage | Url of the next page when you are on an index (home, search, tag…) |
Navigation.PreviousPage | Url of the previous page when you are on an index (home, search, tag…) |
Navigation.NextPost | Next Post in the chronoligical order |
Navigation.PreviousPost | Previous Post in the chronoligical order |
<nav class="pagination"> <div class="next"> {% if Navigation.NextPage %} <a href="{{ Navigation.NextPage }}"> Older posts </a> {% endif %} {% if Navigation.NextPost %} <a href="{{ Navigation.NextPost.Url }}" {%if Navigation.NextPost.Cover %} style="background-image('{{ Navigation.NextPost.Cover.Url|resize(50) }}')" {% endif %}> {{ Navigation.NextPost.Title }} </a> {% endif %} </div> <div class="prev"> {% if Navigation.PreviousPage %} <a href="{{ Navigation.PreviousPage }}"> Newer posts </a> {% endif %} {% if Navigation.PreviousPost %} <a href="{{ Navigation.PreviousPost.Url }}" {%if Navigation.PreviousPost.Cover %} style="background-image('{{ Navigation.PreviousPost.Cover.Url|resize(50) }}')" {% endif %}> {{ Navigation.PreviousPost.Title }} </a> {% endif %} </div> </nav>
SpecialContent
This parameter is needed to display special content on your blog like contact form. You can't alter its content, but you can place it everywhere you want into your markup
{# Place your special content ino a specific container to design it #} {% if isSpecial %} <div class="special-ctn"> {{ SpecialContent }} </div> {% endif %} {# or simply design it like posts #} <div class="post"> <h1>{{ Post.Title}}</h1> {{ Post.Body }} {{ SpecialContent }} </div>
Lang
Lang helps you to translate your theme. Simply call Lang.Get method with one of the available locales keys to retreive the localized version.
Parameter | Description |
---|---|
Lang.Get ( string key ) |
Get a translated text from a locale key
|
Lang.Locale ( string format , string separator ) |
Get the locale from the current blog.
|
{# Will display "about the author" in english or "à propos de l'auteur" in french #} {{ Lang.Get('about the author') }} {# Will display "hello world" in any language #} {{ Lang.Get('hello world') }} {# You can use filters to alter the rendered text : #} {{ Lang.Get('about the author')|capitalize }} {# Will display "en" #} {{ Lang.Locale() }} {# Will display "en_US" #} {{ Lang.Locale('full') }} {# Will display "en-US" #} {{ Lang.Locale('full', '-') }}
is
Utils to know on what page type we are
Parameter | Description |
---|---|
isHome | Return True if the current page is the blog index (home or home pagination). A Posts list will be available. |
isIndex | Alias of isHome |
isSingle | Return True if the current page is a post or page display. A Post object will be available. |
isSearch | Return True if the current page is a search results index. A Search object will be available. |
isArchive | Return True if the current page is an archive index |
isTag | Return True if the current page is a tag index. A Tag object will be available. |
isPage | Return True if the Post from the current page is a Page. |
isPost | Return True if the Post from the current page is a Post (not a Page). |
isSpecial | Return True if the current page is a special page (contact, email…). A SpecialContent object will be available. |
isPageList | Return True if the current page is a list of Pages |
isSocial | Return True if the current page is showing filtered Posts from sources (via the url "/social/*" or "/social/not/*"). |
{% if isIndex %} <h1>Home page</h1> {% elseif isPage %} <h1 class="page">{{ Post.Title }}</h1> {% elseif isSingle %} <h1>{{ Post.Title }}</h1> {% elseif isSearch %} <h1>Search results for “{{ Search.Keyword }}”</h1> {% elseif isArchive %} <h1>Posts from the past</h1> {% elseif isTag %} <h1>Posts with the tag “{{ Tag.Title }}”</h1> {% elseif isSpecial %} <p>Nothing to do here</p> {% endif %}
Generic objects
Generic object are objects available as parameters of contextuals objects.
Date
Display an ISO 8601 formatted date. You can use datel filters to change the display.
Image
Image object contains all informations needed to display an image
Parameter | Description |
---|---|
Image.Title | Display image title |
Image.Url | Image original size url |
Post
A Post is a contextual object.
Parameter | Description |
---|---|
Post.Title | Display the post title |
Post.Body ( mixed rendertype ) |
Display post's body or get an array of Section objects
|
{# Display the entire post #} {{ Post.Body }} {# Display the entire post too #} {{ Post.Body('All') }} {# Display the entire post again #} {{ Post.Body(0) }} {# Display a snippet #} {{ Post.Body('Snippet') }} {# Display the first section #} {{ Post.Body(1) }} |
|
Post.Date | Get the post publication date as a Date object |
Post.Url | Display the post absolute url |
Post.Permalink | Same as Post.Url |
Post.Cover | Get the cover of the post as an Image object |
Post.Author | Get the post author as a User object |
Post.ShowComments | Test if the post have comments activated. The comments may be disabled on the entiere blog or on this post only. You can use this information if you use another comments service than Overblog or if you want to display a message. |
{# So simple : if comments are activated, comments will be displayed. If not, nothing will be displayed #} {{ Post.Comments }} {# Custom service usage #} {% if Post.ShowComments %} <script type="text/javascript" src="http://mycoolcomments.com/init.js"></script> {% endif %} {# Display a message to user #} {% if Post.ShowComments %} {{ Post.Comments }} {% else %} <p> Comments are disabled :( </p> {% endif %} |
|
Post.Comments | Display comments list and form from Overlog service. It's an external service, you can't design it. |
Post.CommentCount ( [ string singular ] [ , string plural ] [ , string none ] ) |
Display the number of comments of the post
|
{# Display only the count #} {{ Post.CommentCount }} {# Display count with custom strings #} {{ Post.CommentCount( '%c comment', '%c comments' ) }} {# Display count with custom strings again #} {{ Post.CommentCount( 'Oh! A comment!', 'Yeah! %c comments!! Amazing!', 'No comment :(' ) }} |
|
Post.Tags | Get a list of the post's tags as an array of Tag objects |
Post.hasTag ( string tag ) |
Returns true if the post has the requested tag.
|
Post.Sections | DOC.DESC.P.POST.P.POST.SECTIONS |
Post.Sources |
Get a list of all the post's sources as an array of string :
|
Post.FirstSource | Return the first of the post's sources as a string. |
Post.Type |
Display the post type :
|
Post.Snippet ( [ integer length = 250 ] [ , boolean preserve = true ] [ , string suffix = "..." ] ) |
Same as Post.Body('Snippet') : display a snippet of post content
|
Post.Share ( [ string display ] ) |
Display some social sharing buttons (Facebook, Twitter, Google+, Overblog)
|
{% if Custom('share_service') != 'None' %} <h3>{% if isPage %}{{ Lang.Get('Share this page') }}{% else %}{{ Lang.Get('Share this post') }}{% endif %}</h3> {% if Custom('share_service') == 'Google +' %} <div class="google-share"> <iframe src="https://plusone.google.com/u/0/_/+1/fastbutton?url={{ Post.Permalink }}&size={% if display == 'top' %}tall{% else %}medium{% endif %}&annotation={% if display == 'nocount' %}none{% else %}bubble{% endif%}&lang={{ Blog.Lang }}" frameborder="0" allowTransparency="1" scrolling="no" style="{% if display == 'top' %}height:60px;width:50px;{% else %}height:20px;width:90px;{% endif %}"></iframe> </div> {% elseif Custom('share_service') == 'Twitter' %} <div class="twitter-share"> <iframe src="http://platform.twitter.com/widgets/tweet_button.html?url={{ Post.PermaLink|url_encode() }}{% if Custom('twitter_username') is not empty %}&via={{ Custom('twitter_username') | escape }}{% endif %}&text={% if Post.Title is not empty %}{{ Post.Title | escape }}{% elseif Post.Snippet is not empty %}{{ Post.Snippet | escape }}{% else %}{{ Blog.Title | escape }}{% endif %}&lang={{ Blog.Lang }}&count={% if display == 'top' %}vertical{% elseif display == 'nocount' %}none{% else %}horizontal{% endif %}" frameborder="0" allowTransparency="1" scrolling="no" style="{% if display == 'top' %}height:62px;width:71px;{% else %}height:20px;width:133px;{% endif %}"></iframe> </div> {% elseif Custom('share_service') == 'Facebook' %} <div class="facebook-share"> <iframe src="//www.facebook.com/plugins/like.php?href={{ Post.Permalink }}&send=false&layout={% if display == 'top' %}box_count{% elseif display == 'nocount' %}{% else %}button_count{% endif %}&show_faces=false&action=like&colorscheme=light&font" frameborder="0" allowTransparency="1" scrolling="no" style="{% if display == 'top' %}height:61px;width:74px;{% else %}height:20px;width:133px;{% endif %}"></iframe> </div> {% elseif Custom('share_service') == 'All' or Custom('share_service') is empty %} <div class="google-share"> <iframe src="https://plusone.google.com/u/0/_/+1/fastbutton?url={{ Post.Permalink }}&size={% if display == 'top' %}tall{% else %}medium{% endif %}&annotation={% if display == 'nocount' %}none{% else %}bubble{% endif%}&lang={{ Blog.Lang }}" frameborder="0" allowTransparency="1" scrolling="no" style="{% if display == 'top' %}height:60px;width:50px;{% else %}height:20px;width:90px;{% endif %}"></iframe> </div> <div class="twitter-share"> <iframe src="http://platform.twitter.com/widgets/tweet_button.html?url={{ Post.PermaLink|url_encode() }}{% if Custom('twitter_username') is not empty %}&via={{ Custom('twitter_username') | escape }}{% endif %}&text={% if Post.Title is not empty %}{{ Post.Title | escape }}{% elseif Post.Snippet is not empty %}{{ Post.Snippet | escape }}{% else %}{{ Blog.Title | escape }}{% endif %}&lang={{ Blog.Lang }}&count={% if display == 'top' %}vertical{% elseif display == 'nocount' %}none{% else %}horizontal{% endif %}" frameborder="0" allowTransparency="1" scrolling="no" style="{% if display == 'top' %}height:62px;width:71px;{% else %}height:20px;width:133px;{% endif %}"></iframe> </div> <div class="facebook-share"> <iframe src="//www.facebook.com/plugins/like.php?href={{ Post.Permalink }}&send=false&layout={% if display == 'top' %}box_count{% elseif display == 'nocount' %}{% else %}button_count{% endif %}&show_faces=false&action=like&colorscheme=light&font" frameborder="0" allowTransparency="1" scrolling="no" style="{% if display == 'top' %}height:61px;width:74px;{% else %}height:20px;width:133px;{% endif %}"></iframe> </div> {% endif %} {% endif %} <div class="ob-share"> {{ Post.RepostButton(display) }} </div> |
|
Post.RepostButton ( [ string display ] ) |
Display the repost button
|
This sample will display your post and some informations like author name, tags, publication date…
<div class="post"> <h1> <a href="{{ Post.Url }}"> {{ Post.Title }} </a> </h1> <div class="metas"> <p> Published on {{ Post.Date|datel(Lang.Get("Default date format")) }} by {{ Post.Author.Nickname }} </p> {% if Post.Tags is not empty %} <div class="tags"> {% list Post.Tags %}{# #}{% if loop.index > 1 %}, {% endif %}<a href="{{ Tag.Url }}">{# #}{{ Tag.Title }}{# #}</a>{# #}{% endlist %} </div> {% endif %} {% if Post.ShowComments %} <p> <a href="#comments"> {{ Post.CommentCount( '%c comment', '%c comments' )}} </a> </p> {% endif %} </div> <div class="content"> {{ Post.Body }} </div> {% if Post.ShowComments %} <p id="comments">Comments</p> {{ Post.Comments }} {% else %} <p>No comment</p> {% endif %} </div>
Section
A Post body is set with some sections. Each section have a different type and a different content. You can customize display of each parts of each section. We don't recommend to work with it.
Parameter | Description |
---|---|
Section.Type |
Each section have a type which can be :
|
Section.Body | The simplest way to display section content |
Section.Text |
Available on link, quote and text sections. Display the raw text. |
Section.Image |
Available on text sections. Display the url of the image. |
Section.Align |
Available on text sections. Display the alignement setting for the image. Could be left or right. |
Section.Size |
Available on text sections. Display the size of the image. You should use it as a parameter of resize filter applied on the image. |
{# Use the size set by the user on this post #} {{ Section.Image|resize(Section.Size) }} {# …or force a fixed size #} {{ Section.Image|resize(200) }} |
|
Section.Images |
Available on images sections. List of images as an array of Image objects. |
Section.Layout |
Available on images sections. The layout choosen by the user as an integer. |
Section.Link |
Available on linkand quote sections. The link url. |
Section.Snippet |
Available on link sections. The link snippet. |
Section.SnippetTitle |
Available on link sections. The link snippet title. |
Section.Embed |
Available on video sections. The embed html code to display the video player. |
Section.Thumbnail |
Available on video sections. The video thumbnail image url. |
Section.Html |
Available on html sections. The HTML code. |
Section.Title |
Available on audio and video sections. The title of the section. |
Section.Description |
Available on audio, file, images, map and video sections. The description of the section. |
Section.Source |
Available on audio sections. The source of the sound. Probably Deezer. |
Section.Artist |
Available on audio sections. The artist name of the sound. |
Archive
This object contains a list of Month objects for a year. List it to display all the month of a year.
Parameter | Description |
---|---|
Archive.Months | List of months containing posts as an array of Month objects |
Archive.Year | The year label as a full year string |
Month
This object contains a some informations about the posts published on this date
Parameter | Description |
---|---|
Month.Name | Display the month name |
Month.Url | Display the url to an index page listing all the posts of this month |
Month.PostCount | Display the number of posts published on this month |
Month.Index | Display the index of the month from 1 (january) to 12 (december) |
Month.Year | Display the current year on full year format |
Month.isCurrent | Return true is the month is the current one |
Tag
This object contains informations about a tag
Parameter | Description |
---|---|
Tag.Title | Display the tag title |
Tag.Url | Display url to an index page listing all the posts with this tag |
Tag.PostCount | Display the number of posts with this tag |
Custom
Custom is a function to get custom variable you declared in your theme inside meta tags.
You can specify some variables which will be displayed as form controls in the theme settings UI in the goal to help users to customize their theme without watching source code.
Just add a meta tag in your template with the following structure :
<meta name="type:name:label.as.locale.key" default="default value" group="name" items="[item1, item2]" />
-
type is a string which cast the value and display a specific control. It may take the following values :
- string
- Display a simple text input and requires a free string value
- text
- Display a textarea and requires a text. The difference with the string type is that the value can have several lines. Twig syntax will not be interpreted.
- color
- Display a color picker and requires a color value as hexadecimal value
- list
- Display a select box and requires a contrained string value. The options are specified in the list attribute of the meta tag as an array of strings.
- boolean
- Display a checkbox and requires a boolean value
- image
- Display an image picker and requires an image url
- tag
- Display a tag picker and requires a constrained string from the list of all the blog's posts tags
- name is the name you'll use as parameter to retreive the value
-
label is the displayed label in theme set interface.
You can use the locales keys available in this list. - default is the control default value which will be applied while the user will not have set a custom one or when he will click on the control's rollback button
-
group is the name of the group where the control will be placed.
You can use the locales keys available in this list. -
items is the list of options when you use a list typed variable. List your values as a JSON array :
items="[value1, value2]"
will display a select with an empty option, an option with "value1" value and an option with "value2" value.
You can use the locales keys available in this list.
Finally, when your variables are set, you can use thier values in your template code to test conditions or diplay values :
<html> <head> <meta name="color:bg_color:label.backgroundColor" default="#fff" group="display" /> <meta name="boolean:display_highlighted:label.displayHighlightedPosts ?" default="true" group="display" /> <meta name="tag:highlighted_tag:label.highlightedTag ?" group="display" /> <meta name="list:highlighted_nb:label.highlightedNb ?" default="5" items="1,2,3,4,5,6,7,8,9,10" group="display" /> <style> body { background-color: {{ Custom('bg_color') }}; } </style> </head> <body> <nav> {% if Custom('display_highlighted') %} <ul class="highlight"> {% list Blog.TaggedPosts(Custom('highlighted_tag'), Custom('highlighted_nb')) %} <li> {{ TaggedPost.Title }} </li> {% endlist %} </ul> {% endif %} </nav> </body> </html>
FontFace
FontFace is a function to load CSS font.
You need to call FontFace function in HTML head tag.
This function take one parameter: an array of string. Each string is your meta parameter's name.
In the meta parameter's items, put all fonts you want and Capitalize each first letter of each word.
You can find all supported fonts here.
<html> <head> <meta name="fontlist:bodyFont:label.Fonts" items="Abril Fatface,Alegreya,Alegreya Sans,Amatic SC,Amaranth,Archivo Narrow,Archivo Black,Arimo,Arvo,Audiowide,Barlow,Barlow Semi Condensed,Baskervville,Bodoni Moda,Cormorant" default="Open Sans" group="Text" /> <meta name="fontlist:titlesFont:label.titlesFont" items="Abril Fatface,Alegreya,Alegreya Sans,Amatic SC,Amaranth,Archivo Narrow,Archivo Black,Arimo,Arvo,Audiowide,Barlow,Barlow Semi Condensed,Baskervville,Bodoni Moda,Cormorant" default="Open Sans" group="Text" /> {{ FontFace(['bodyFont', 'titlesFont']) }} </head> <body> <!--your content--> </body> </html>
Constant
Constants allow you to set some blog settings from within your theme.
In any case, the blog owner is able to override these settings. You can see constants as default values for your theme.
To add a constant to your theme just use a meta tag as follow :
<meta name="constant:name" content="value"/>
Currently, only two constants are supported : "displayArticleLimits" and "disableDefaultMobileTheme"
-
displayArticlesLimit allows you to set a default per page post number. "value" must be a number between 1 and 50.
<meta name="constant:displayArticlesLimit" content="15"/>
-
disableDefaultMobileTheme disable the default mobile theme when your blog is viewed on a mobile device. If set to 1, your current theme will be used instead.
<meta name="constant:disableDefaultMobileTheme" content="1"/>
Keep in mind that the blog owner will always be able to override these settings.
Filters
You can modify the output of objects with filters. Here is a list of filters which will help you to customize your blog content.
{{ 'my string'| capitalize }}
Capitalize the string
{{ 'my string'| default ( mixed defaultvalue) }}
Display a default value if the previous value is empty.
{{ 'my string'| lower }}
Lowercase your text
{{ 'my string'| upper }}
Uppercase your texte
{{ 'my string'| title }}
Titlecase your text : all words will starts with a cap
{{ 'my string'| truncate ( integer length , boolean preserve , string suffix) }}
Truncate your text to a given length. If preserve is set to true, the string won't be cut in the middle of a word. If the string is truncated, it will end with the string suffix.
{{ 'http://myblog.overblog.com/path'| url_encode }}
Encode an url
{{ '2004-11-26 16:36:00'| datel ( string format) }}
This filter format a date with a localizable format following this pattern
{{ 'http://myblog.overblog.com/path'| resize ( integer width , integer height) }}
This filter convert an image url to a resized url. Just set the size you want to resize your image which can be a string or an Image.Url object. You can set the same width and height with the first parameter, or a different one with the two parameters.
{# Resize a post cover to 200x200 pixels #} <img src="{{ Post.Cover.Url|resize(200) }}" /> {# Resize a post cover to 400x300 pixels #} <img src="{{ Post.Cover.Url|resize(400, 300) }}" /> {# Resize a post cover to its original size #} <img src="{{ Post.Cover.Url|resize }}" /> {# Resize an asset file #} <div style="background-image('{{ 'http://img.overblog.com/myfile.jpg|resize(300, 200) }}');></div>
{{ 'http://myblog.overblog.com/path'| crop }}
Add the crop filter to the resize to make the resized image cropped to the precises given dimensions.
{# Resize a post cover to a square of 200x200 pixels #} <img src="{{ Post.Cover.Url|resize(200)|crop }}" /> {# Resize a post cover to 400x300 pixels #} <img src="{{ Post.Cover.Url|resize(400, 300)|crop }}" />
Helpers
Helpers are blocks of reusable code that you can insert with a simple tag instead of typing tens of lines of code. These tags are used with {% tag %}
<!doctype html> <html> <head> {% title %} {% meta %} {% favicon %} </head> <body> <div class="search"> {% search %} </div> <div class="email-notification"> {% email_notification %} </div> </body> </html>
title
Insert the title tag with correct page title
{% if isSingle %} <title>{% if Post.Title is not empty %}{{ Post.Title }} - {% elseif Post.Snippet is not empty %}{{ Post.Snippet|truncate(80) }} - {% endif %}{{ Blog.Title }}</title> {% elseif isTag and Tag is not empty %} <title>{{ Tag.Title|title }} - {{ Blog.Title }}</title> {% elseif isSearch and Search is not empty %} <title>{{ Search|title }} - {{ Blog.Title }}</title> {% else %} <title>{{ Blog.Title }}</title> {% endif %}
meta
Insert all the meta tags : keyword, description, robots, encoding, micro data
<!-- shortcut:[Meta] --> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <!-- description, keyword, robots --> {% if isSingle%} {% list Posts %} <meta name="description" content="{{ Post.Snippet |escape }}" /> <meta name="keywords" content="{% list Post.Tags %}{{ Tag.Title |escape }}{% if loop.last == false %}, {% endif %}{% endlist %}" /> <meta name="robots" content="{% if not Post.shouldRobotIndex %}no{% endif %}index,follow" /> {% endlist %} {% elseif isTag and Tag is not empty %} <meta name="description" content="{{ Blog.Description |escape }}" /> <meta name="keywords" content="{{ Tag.Title|title |escape }}" /> <meta name="robots" content="index,follow" /> {% elseif isSearch and Search is not empty %} <meta name="description" content="{{ Blog.Description |escape }}" /> <meta name="keywords" content="{{ Search|title |escape }}" /> <meta name="robots" content="noindex" /> {% elseif isHome %} <meta name="description" content="{{ Blog.Title }} - {{ Blog.Description |escape }}" /> <meta name="robots" content="index,follow" /> {% else %} <meta name="description" content="{{ Blog.Description |escape }}" /> <meta name="robots" content="index,follow" /> {% endif %} <!-- RSS --> <link rel="alternate" type="application/rss+xml" title="RSS" href="{{ Blog.RssUrl }}" /> <!-- Repost --> {% if isSingle %} {% list Posts %} {% if Post.Type == 'Reblog' %} <link rel="canonical" href="{{ Post.OriginalReblogUrl }}"/> {% endif %} {% endlist %} {% endif %} <!-- Social setting : Facebook, G+ .. --> <meta property="og:locale" content="{{ Lang.Locale }}" /> <meta property="og:site_name" content="{{ Blog.Title |escape }}" /> <meta itemprop="name" content="{{ Blog.Title |escape }}" /> <meta property="og:type" content="blog" /> <meta name="twitter:card" content="summary" /> <meta property="fb:app_id" content="{% if Custom('facebook_appid') is not empty %}{{ Custom('facebook_appid') }},{% endif %}{{ fb_app_id }}" /> {% if isSingle %} {% list Posts %} <meta property="og:url" content="{{ Post.Permalink }}" /> <meta name="twitter:url" content="{{ Post.Permalink }}" /> <meta property="og:title" content="{% if Post.Title is not empty %}{{ Post.Title |escape }}{% elseif Post.Snippet is not empty %}{{ Post.Snippet|truncate(80)|escape }}{% endif %}"/> <meta itemprop="name" content="{% if Post.Title is not empty %}{{ Post.Title |escape }}{% elseif Post.Snippet is not empty %}{{ Post.Snippet|truncate(80)|escape }}{% endif %}" /> <meta name="twitter:title" content="{% if Post.Title is not empty %}{{ Post.Title |escape }}{% elseif Post.Snippet is not empty %}{{ Post.Snippet|truncate(80)|escape }}{% endif %}" /> <meta property="og:description" content="{{ Post.Snippet |escape }}" /> <meta itemprop="description" content="{{ Post.Snippet |escape }}" /> <meta name="twitter:description" content="{{ Post.Snippet |escape }}" /> {% if Post.Cover %} <meta property="og:image" content="{{ Post.Cover }}"/> <meta itemprop="image" content="{{ Post.Cover }}" /> <meta name="twitter:image" content="{{ Post.Cover }}" /> {% endif %} {% endlist %} {% else %} <meta property="og:title" content="{{ Blog.Title |escape }}"/> <meta itemprop="name" content="{{ Blog.Title |escape }}" /> <meta name="twitter:title" content="{{ Blog.Title |escape }}" /> <meta property="og:description" content="{{ Blog.Description |escape }}" /> <meta itemprop="description" content="{{ Blog.Description |escape }}" /> <meta name="twitter:description" content="{{ Blog.Description |escape }}" /> {% if Blog.Avatar %} <meta property="og:image" content="{{ Blog.Avatar }}"/> <meta itemprop="image" content="{{ Blog.Avatar }}" /> <meta name="twitter:image" content="{{ Blog.Avatar }}" /> {% else %} {% list Posts %} {% if loop.index == 1 and Post.Cover %} <meta property="og:image" content="{{ Post.Cover }}"/> <meta itemprop="image" content="{{ Post.Cover }}" /> <meta name="twitter:image" content="{{ Post.Cover }}" /> {% endif %} {% endlist %} {% endif %} {% endif %}
favicon
Insert link tag for favicon with custom favicon if defined
{% if Blog.FaviconUrl is not empty %} <link rel="icon" type="image/png" href="{{ Blog.FaviconUrl }}" /> {% else %} <link rel="shortcut icon" type="image/x-icon" href="http://fdata.over-blog.net/99/00/00/01/img/favicon.ico" /> <link rel="icon" type="image/png" href="http://fdata.over-blog.net/99/00/00/01/img/favicon.png" /> <link rel="apple-touch-icon" href="http://fdata.over-blog.net/99/00/00/01/img/mobile-favicon.png" /> {% endif %}
search
Insert search form
<!-- Search form --> {% if Custom('display_widget_search') == false %} <div class="widget search" > <h3>{{ Lang.Get('Search') }}</h3> <form action="/search" method="post"> <input type="text" name="q" placeholder="{{ Lang.Get('Search something here') }}..."{% if isSearch %} value="{{ Search.Keyword }}"{% endif %} /> <input type="submit" value="{{ Lang.Get('Search') }}" /> </form> </div> {% endif %}
email_notification
Insert subscription form
<!-- subscription form --> <form action="/mail/subscribe" method="post" class="ob-form ob-form-subscription"> <div class="ob-form-field"> <label class="ob-label required" for="form_email">{{ Lang.Get('Email_Subscribe') }}</label> <input type="email" id="form_email" name="email" placeholder="{{ Lang.Get('Email_Example') }}" required="required" class="ob-input ob-input-email" /> </div> <input type="submit" value="{{ Lang.Get('Subscribe') }}" class="ob-input ob-input-submit" /> </form>
ad
Insert ad, ad size depend of the parameter :
- {% ad(1) %} : 300x250, Medium Rectangle
- {% ad(3) %} : 160x600, Wide Skyscraper
- {% ad(4) %} : 728x90, Leaderboard
- {% ad(6) %} : 300x600, Half Page
- {% ad(8) %} : 468x60, Banner
- {% ad(9) %} : 250x250, Square
You can add other options if you want to colorize text ads :
- {% ad(1) with {'background' : '#000000', 'text' : '#FFFFFF', 'url' : '#FFFFFF', 'link' : '#FFFFFF', 'border' : '#FFFFFF'} %}
- background : Ad background color
- text : Ad text color
- url : Ad url color
- link : Ad link color
- border : Ad border color
{% if Blog.isAdEnabled %} <div class="ads ads-300x250 ads-ctn"> {% ad(1) %} </div> {% endif %} {% if Blog.isAdEnabled %} <div class="ads ads-160x600 ads-ctn"> {% ad(3) %} </div> {% endif %} {% if Blog.isAdEnabled %} <div class="ads ads-728x90 ads-ctn"> {% ad(4) %} </div> {% endif %} {% if Blog.isAdEnabled %} <div class="ads ads-300x600 ads-ctn"> {% ad(6) %} </div> {% endif %} {% if Blog.isAdEnabled %} <div class="ads ads-468x60 ads-ctn"> {% ad(8) %} </div> {% endif %} {% if Blog.isAdEnabled %} <div class="ads ads-250x250 ads-ctn"> {% ad(9) %} </div> {% endif %} {% if Blog.isAdEnabled %} <div class="ads ads-250x250 ads-ctn"> {% ad(4) with {'background' : '#000000', 'text' : '#FFFFFF', 'url' : '#FFFFFF', 'link' : '#FFFFFF', 'border' : '#FFFFFF'} %} </div> {% endif %}
pagination
Display a numbered page navigation for your blog with a list of pages number, previous, next, first page and last page links.
{% list Posts %} … {% endlist %} <div class="pagin"> {% pagination %} </div>
analytics
Insert Google Analytics code if a custom id is defined
<script type="text/javascript"> window.google_analytics_uacct = '{{Custom('google_analytics_id')}}'; var _gaq = _gaq || []; _gaq.push(['_setAccount', '{{Custom('google_analytics_id')}}']); _gaq.push(['_trackPageview']); _gaq.push(['_trackPageLoadTime']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script>