Template • BookLikes

Twig

In order to create custom look of your blog, you need to feel comfortable with HTML and Twig. We use Twig engine for templates. Take a look at documentation for Twig here - it might come in handy.

<head>
 ...
 <title>{{ meta.title }}</title> 
 ...
</head>

The majority of built-in tags and filters, functions, etc are available in templates. Below is a list of supported elements to use in the template:

Tags: if, for, from, spaceless, autoescape, raw
Filters: l, picture, implode, entry, date, format, replace, number_format, url_encode, json_encode, convert_encoding, title, capitalize, nl2br, upper, lower, striptags, join, reverse, length, sort, default, keys, escape, raw, merge, slice, trim
Functions: random, date, range

Additional filters: picture, implode, entry, l.

Additional filters

Filter	Description
\|picture(width, height, default)	Create picture URL. If no parameters given, URL to orginal picture is returned. width (optional) - set picture width height (optional) - set picture height default (optional, "book", "user") - if picture does not exist, default picture is returned

<img src="{{ item.picture|picture }}" {{ item.popup }} />
<img src="{{ item.picture|picture("", "", "book") }}" {{ item.popup }} />
<img src="{{ item.picture|picture(200, 50, "book") }}" {{ item.popup }} />

Filter	Description
\|implode(separator)	Join array elements with a separator string. separator (optional, default is comma)

<div class="tags">{{ post.tags|implode(", ") }}</div>

Filter	Description
\|entry(text, max_letters, whole_words, dots)	Returns the portion of text. text - text to cut max_letters (number) - maximum amount of letters whole_words (optional, true or false, default is false) - is cut preserve words dots (optional, string, default is '...') - ending of cut text

<div class="post-entry">{{ post.desc|entry(25, true, ".") }}</div>

Filter	Description
\|l(text)	Translate text.

<div>{{ "Posts"|l }}</div>

Meta

Variable	Description
{{ meta.title }}	Title of the page
{{ meta.desc }}	Description of the page
{{ meta.picture }}	Picture
{{ meta.canonical }}	URL

Navigation

Variable	Description
{{ navigation.home }}	URL to homepage of your personal BookLikes webpage.
{{ navigation.blog }}	URL to Blog.
{{ navigation.timeline }}	URL to Timeline.
{{ navigation.followings }}	URL to list of blogs you follow.
{{ navigation.followers }}	URL to list of followers of your blog.
{{ navigation.shelf }}	URL to Shelf.
{{ navigation.shelfRead }}	URL to Read Shelf.
{{ navigation.shelfPlanningToRead }}	URL to Planning to read Shelf.
{{ navigation.shelfCurrentlyReading }}	URL to Currently reading Shelf.
{{ navigation.shelfFavorite }}	URL to Favorite Shelf.
{{ navigation.shelfWishlist }}	URL to Wishlist Shelf.
{{ navigation.shelfUnshelved }}	URL to Unshelved Shelf.

Blog

Variable	Description
{{ blog.isSiteBlog }}	Blog site enabled.
{{ blog.isSiteShelf }}	Shelf site enabled.
{{ blog.isSiteTimeline }}	Timeline site enabled.
{{ blog.siteDefault }}	Default site: 'blog', 'shelf', 'timeline'.
{{ blog.statisticCode }}	Google Analytics statistic code.
{{ blog.username }}	Username
{{ blog.picture }}	User's picture
{{ blog.disqusUsername }}	User's Disqus username
{{ blog.facebookId }}	User's Facebook ID.
{{ blog.commentsDisqus }}	Disqus comments enabled.
{{ blog.commentsBooklikes }}	BookLikes comments enabled.
{{ blog.commentsFacebook }}	Facebook comments enabled.
{{ blog.favicon }}	User picture in 25px x 25px resolution.
{{ blog.booksCount }}	Number of books
{{ blog.followingsCount }}	Number of followings
{{ blog.followersCount }}	Number of followers
{{ blog.href }}	URL of blog.
{{ blog.title }}	Blog title.
{{ blog.rss }}	Blog RSS URL.
{{ blog.desc }}	Blog description.
{{ blog.descNohtml }}	Blog description without HTML tags.
{{ blog.langName }}	Blog language.
{{ blog.langSymbol }}	Blog language symbol.
{{ blog.dateFormat }}	User date format.
{{ blog.timezoneOffset }}	Timezone offset.
{{ blog.templateURL }}	URL to template.
{{ blog.isOfficial }}	Blog verified as official.
{{ blog.isAuthor }}	Blog verified as author.
{{ blog.isModerator }}	Blog verified as moderator.
{{ blog.profileFacebook }}	URL to Facebook profile.
{{ blog.profileGoodreads }}	URL to Goodreads profile.
{{ blog.profileTwitter }}	URL to Twitter profile.
{{ blog.profileGoogleplus }}	URL to Google+ profile.
{{ blog.profilePinterest }}	URL to Pinterest profile.
{{ blog.profileYoutube }}	URL to Youtube profile.
{{ blog.profileOther }}	List of URLs.
{{ blog.buttonLike }}	Like button visible.
{{ blog.buttonTweet }}	Tweet button visible.
{{ blog.buttonPlus }}	Google+ button visible.
{{ blog.buttonPinit }}	PinIt button visible.
{{ blog.twitterWidget }}	Twitter widget to display.
{{ blog.facebookWidget }}	Facebook widget to display.

Item {{ blog.profileOther }} variables:

Variable	Description
{{ url }}	URL
{{ name }}	URL title

Shelves

Variable	Type	Description
{{ shelfCurrently }}	array	List of ten books currently reading.
{{ shelfFavorite }}	array	List of ten favorite books.
{{ shelfRecently }}	array	List of ten recently added books.

Item (book) variables:

Variable	Description
{{ id }}	Unique book ID.
{{ title }}	Book title.
{{ author }}	Book author.
{{ popup }}	Popup script.
{{ url }}	Book URL
{{ status }}	Book status: 'read', 'currentlyreading', 'planningtoread'.
{{ rating }}	Rating without half star. If rating is 3.5 {{ rating }} is 3.
{{ ratingHalf }}	Rating has half star (true, false). If rating is 3.5 {{ ratingHalf }} is true.
{{ picture }}	Picture
{{ pageCurrently }}	If status is 'currentlyreading' and user set read pages.
{{ pageMax }}	If status is 'currentlyreading' and user set number of book pages.
{{ progressUnit }}	Unit of progress: 0 - pages, 1 - percent, 2 - minutes.
{{ percent }}	If status is 'currentlyreading'. Percent of read book.

{% for item in shelf.recently %}
 <div class="book">
 <div class="book-cover">
 <a href="{{ item.url }}">
 <img src="{{ item.picture|picture(200, 50, "book") }}" {{ item.popup }} />
 </a>
 </div>
 <div class="book-info">{{ item.title }} by {{ item.author }}</div>
 </div>
{% endfor %}

Pages

Variable	Type	Description
{{ pagesMenu }}	array	List of user’s additional pages.

Item (page) variables:

{{ name }}	Page title.
{{ href }}	Page URL.
{{ isActive }}	Informs if user browses a given page. Useful e.g. while creating menu.

{% for item in pages %}
 <a {% if item.isActive %}class="active"{% endif %} href="{{ item.href }}">
 {{ item.name }}
 </a>
{% endfor %}

Blog template

Variable	Type	Description
{{ search }}		Search phraze
{{ isSinglePost }}		Single post or list
{{ page }}		Current page
{{ isNextPage }}		Next page of posts
{{ posts }}	array	Post list (also when single post is showed).

Item {{ posts }} variables:

Variable	Type	Description
{{ id }}		Unique ID post
{{ title }}		Post title
{{ source }}		Post source
{{ date }}		Post date
{{ href }}		Post URL
{{ likeCount }}		Number of likes
{{ reblogCount }}		Number of reblogs
{{ commentCount }}		Number of comments
{{ tags }}	array	Tags list (see below).
{{ text }}		Post text
{{ isReadMore }}		Post with "Read more" pagebreak.
{{ textEntry }}		Post's lead.
{{ isSpoiler }}	boolean	Spoiler
{{ isReview }}	boolean	Review
{{ rating }}		Rating without half star. If rating is 3.5 {{ rating }} is 3.
{{ ratingHalf }}		Rating has half star (true, false). If rating is 3.5 {{ ratingHalf }} is true.
{{ ratingLabel }}		Rating without dot. If rating is 3.5 {{ ratingLabel }} is 35.
{{ booksCount }}		Books count added to post.
{{ books }}	array	Books list
{{ isReblog }}		Reblogged post
{{ reblogLink }}		Link to orginal post (anchor with URL and title).
{{ reblogNote }}		Note added to post.
{{ reblogNoteReblogged }}		Note from reblogged post.
{{ disqus }}		If Disqus is enabled widget will be displayed.
{{ commentsBooklikes }}		If BookLikes comments are enabled widget will be displayed.
{{ type }}		Post type: 'text', 'url', 'video', 'quote', 'photo'.
{{ url }}		URL
{{ urlNoHTTP }}		URL without http://.
{{ quote }}		Quote
{{ videoIframe }}		Video iframe
{{ videoURL }}		Video URL
{{ photos }}	array	Photos list
{{ emotion_name }}		Emotion name
{{ emotion_picture }}		Emotion picture
{{ emotion_name_reblog }}		Reblogged emotion name
{{ emotion_picture_reblog }}		Reblogged emotion picture

Item {{ posts.tags }} variables:

Variable	Description
{{ name }}	Tag name
{{ link }}	Safe name for build link

{% for tag in post.tags %}
<a href="{{ navigation.tag }}/{{ tag.link }}">{{ tag.name }}</a>
{% endfor %}

Item {{ posts.books }} variables:

Variable	Description
{{ title }}	Book title
{{ author }}	Book author
{{ picture }}	Picture
{{ popup }}	Popup script
{{ url }}	Book URL

Item {{ posts.photos }} variables:

Variable	Description
{{ orginal }}	URL to orginal picture
{{ picture }}	Picture
{{ caption }}	Caption
{{ height }}	Height [px]
{{ width }}	Width [px]

Timeline template

Variable	Type	Description
{{ page }}		Current page
{{ isNextPage }}		Next page of Timeline
{{ today }}	array	Information from calendar
{{ timeline }}	array	List of events on timeline

Item {{ today }} variables:

Variable	Description
{{ year }}	Current year
{{ month }}	Current month
{{ day }}	Current day

Item {{ timeline }} variables:

Variable	Description
{{ type }}	Type of event: 'date', 'post', 'book', 'follow', 'like', 'shelf'.

Item {{ timeline }} 'date' type variables:

Variable	Description
{{ year }}	Year of section.
{{ month }}	Month of section.
{{ day }}	Day of section.

Item {{ timeline }} 'book' type variables:

Variable	Description
{{ bookId }}	Unique book ID.
{{ bookTitle }}	Book title
{{ bookAuthor }}	Book author
{{ bookPicture }}	Book picture
{{ bookRating }}	Rating without half star. If rating is 3.5 {{ bookRating }} is 3.
{{ bookRatingHalf }}	Rating has half star (true, false). If rating is 3.5 {{ bookRatingHalf }} is true.
{{ bookPopup }}	Popup script
{{ bookUrl }}	Book URL
{{ bookStatus }}	User started or finished reading book ('start', 'end').

Item {{ timeline }} 'like' type variables:

Variable	Description
{{ blogTitle }}	Blog title
{{ blogPicture }}	Blog picture
{{ blogHref }}	Blog URL
{{ postTitle }}	Post title
{{ postHref }}	Post URL
{{ postLink }}	Post link (anchor with title and URL)
{{ postEntry }}	Beggining of post.

Item {{ timeline }} 'follow' type variables:

Variable	Description
{{ blogTitle }}	Blog title
{{ blogPicture }}	Blog picture
{{ blogHref }}	Blog URL

Item {{ timeline }} 'post' type variables:

Variable	Type	Description
{{ postType }}		Post type: 'text', 'video', 'url', 'photo', 'quote'
{{ postTitle }}		Post title
{{ postReview }}	boolean	Post review
{{ postRating }}		Rating without half star. If rating is 3.5 {{ postRating }} is 3.
{{ postRatingHalf }}		Rating has half star (true, false). If rating is 3.5 {{ postRatingHalf }} is true.
{{ postRatingLabel }}		Rating without dot. If rating is 3.5 {{ postRatingLabel }} is 35.
{{ postText }}		Post text.
{{ postHref }}		Post URL.
{{ postURL }}		If post type is URL: URL
{{ postURLNoHTTP }}		If post type is URL: URL without http://
{{ postQuote }}		If post type is Quote: quote
{{ postVideo }}		If post type is Video: video URL
{{ postPhotos }}	array	If post type is Photo: picture list
{{ postBooks }}	array	Book list
{{ isReblog }}	boolean	Is post reblogged
{{ reblogNote }}		Note to reblogged post
{{ reblogBlogTitle }}		Blog title (from reblogged post)
{{ reblogBlogHref }}		Blog URL (from reblogged post)
{{ reblogBlogPicture }}		Blog picture (from reblogged post)

Item {{ timeline.postPhotos }} variables:

Variable	Description
{{ picture }}	Picture
{{ width }}	Width [px]
{{ height }}	Height [px]
{{ caption }}	Picture caption

Item {{ timeline.postBooks }} variables:

Variable	Description
{{ title }}	Book title
{{ author }}	Books author
{{ popup }}	Popup script
{{ url }}	Book URL
{{ picture }}	Picture

Item {{ timeline }} 'shelf' type variables:

Variable	Type	Description
{{ shelfBooks }}	array	Books list

Item {{ timeline.shelfBooks }} variables:

Variable	Description
{{ title }}	Book title
{{ author }}	Book author
{{ popup }}	Popup script
{{ url }}	Book URL
{{ picture }}	Picture
{{ status }}	Book status: 'read', 'currentlyreading', 'planningtoread'
{{ rating }}	User rating without half star. If rating is 3.5 {{ rating }} is 3.
{{ ratingHalf }}	User rating has half star (true, false). If rating is 3.5 {{ ratingHalf }} is true.

Shelf template

Variable	Type	Description
{{ search }}		Search phraze
{{ order }}		Sort direction ('asc', 'desc'). For sorting use URL: ?by=ORDER_BY&order=ORDER.
{{ orderBy }}		Sort type: 'date' - add date, 'dater' - read date, 'author' - book author, 'title' - book title, 'rating' - user book rating. For sorting use URL: ?by=ORDER_BY&order=ORDER.

<a href="?by=date&order=asc}">{{ "add date"|l }}</a>
<a href="?by=author&order=asc}">{{ "author"|l }}</a>

Variable	Type	Description
{{ name }}		Currently selected shelf name
{{ active }}		Currently selected shelf: 'read', 'planningtoread', 'currentlyreading', 'wishlist', 'favorite-books', 'reviewed', 'unshelved'. For user's shelves see {{ shelves }} item.
{{ pages }}		Number of pages
{{ page }}		Current page
{{ pageHref }}		Pagination URL
{{ count }}		Number of all books
{{ countRead }}		Number of Read books
{{ countPlanning }}		Number of Planning to read books
{{ countCurrently }}		Number of Currently reading books
{{ countFavorite }}		Number of Favorite books
{{ countWishlist }}		Number of Wishlist books
{{ countReviewed }}		Number of Reviewed books
{{ unshelvedCount }}		Number of unshelved books
{{ shelves }}	array	User's shelves list
{{ statuses }}	array	User's exclusive statuses list
{{ books }}	array	Books list

Item {{ shelves }}, {{ statuses }} variables:

Variable	Description
{{ name }}	Shelf name
{{ count }}	Number of books on shelf
{{ href }}	URL to shelf
{{ isActive }}	If shelf is currently browse {{ isActive }} is true.

Item {{ books }} variables:

Variable	Description
{{ id }}	Unique book ID
{{ title }}	Book title
{{ author }}	Book author
{{ popup }}	Popup script
{{ url }}	Book URL
{{ status }}	Book status: 'read', 'currentlyreading', 'planningtoread'
{{ rating }}	Rating without half star. If rating is 3.5 {{ rating }} is 3.
{{ ratingHalf }}	Rating has half star (true, false). If rating is 3.5 {{ ratingHalf }} is true.
{{ picture }}	Picture
{{ pageCurrently }}	If status is 'currentlyreading' and user set read pages.
{{ pageMax }}	If status is 'currentlyreading' and user set number of book pages.
{{ progressUnit }}	Unit of progress: 0 - pages, 1 - percent, 2 - minutes.
{{ percent }}	If status is 'currentlyreading'. Percent of read book.

Page template

Variable	Description
{{ pageTitle }}	Page title
{{ pageText }}	Page text

Following / followers template

Variable	Type	Description
{{ isFollowersTemplate }}		Followers page displayed.
{{ isFollowingsTemplate }}		Following page displayed.
{{ blogs }}	array	Blogs list.

Item {{ blogs }} variables:

{{ date }}	Last user's activity.
{{ username }}	Username.
{{ title }}	Blog title.
{{ desc }}	Blog description.
{{ href }}	URL to blog.
{{ picture }}	Picture.

Customization

Customization allows users to modify blog templates in fast and easy manner. To add new customization feature, special tag should be inserted in header of template. Once you insert tag in Blog template and the option will be available in other subsites of a given design theme as well (Shelf, Follower/Following, Pages).

<head>
 ...
 <meta name="TYPE:NAME:TITLE" content="DEFAULT_VALUE" />
</head>
<body>
 ...
 {{ customize.NAME }}
 ...
</body>

NAME: name of variable, can contain only letters, numbers or _.

TITLE: short description of option.

DEFAULT_VALUE: default value of option.

TYPE	Description
text	Allow user to enter plain text (without HTML tags).
textarea	Allow user to enter any text (also with HTML tags).
bool	Allow user to enable / disable option. Possible values: 0 or 1.
color	Allow user to change color.
picture	Allow user to upload picture.
select	Allow user to select option from list. Put options list into "content" attribute. First value is default. Example: content="Option1Title:option1Value\|Option2Title:option2Value\|Option3Title:option3Value".

<head>
 ...
 <meta name="textarea:widget:Widget code" content="" />
 <meta name="text:blogSubtitle:Blog subtitle" content="" />
 <meta name="bool:showAvatar:Show avatar?" content="1" />
 <meta name="color:bgColor:Background color" content="#FF0000" />
 <meta name="picture:bgImage:Background image" content="" />
 <meta name="select:columns:Number of columns" content="one:1|two:2|three:3" />
</head>
<body style="background-image: url('{{ customize.bgImage }}'); 
background-color: {{ customize.bgColor }};">
 
 ...

 {% if customize.showAvatar %}
 <div class="avatar">...</div>
 {% endif %}

 <div class="blog-subtitle">{{ customize.blogSubtitle }}</div>

 {% if customize.columns == 3 %}
 <div class="column1"></div>
 <div class="column2"></div>
 <div class="column3"></div>
 {% elseif customize.columns == 2 %}
 <div class="column1"></div>
 <div class="column2"></div>
 {% else %}
 <div class="column1"></div>
 {% endif %}

 <div class="widgets">{{ customize.widget }}</div>
 
 ...

</body>

Changes

18.06.2015 - Blog template, new variables in {{ posts }}: {{ emotion_name }}, {{ emotion_picture }}, {{ emotion_name_reblog }}, {{ emotion_picture_reblog }}.

30.04.2015 - Blog template, new variables in {{ posts }}: {{ reblogNote }}, {{ reblogNoteReblogged }}.

30.04.2015 - Timeline 'reblog' type is removed, instead please use new variables in 'post' type: {{ isReblog }}, {{ reblogNote }}, etc.

04.02.2015 - Changed {{ blog.profileOther }} from single item to url list

02.02.2015 - Book item in {{ timeline.shelfBooks }} new variables {{ status }}, {{ rating }}, {{ ratingHalf }}.

03.07.2014 - Important: due to the book pop-up display changes, some modifications in templates are required. Variable {{ popup }} should be added without onclick="". A book cover should be surrounded with a link.

Example: the old way of the cover and popup display:

<img src="{{ item.picture|picture(200, 50, "book") }}" onclick="{{ item.popup }}" />

Example: the new way of the cover and popup display (with a link):

<a href="{{ item.url }}">
 <img src="{{ item.picture|picture(200, 50, "book") }}" {{ item.popup }} />
</a>

03.07.2014 - Book item: new variable {{ url }}, on Timeline {{ bookUrl }}.

06.06.2014 - Blog template: posts tags format changed.

03.10.2013 - Shelf template: added {{ statuses }} with exclusive statuses.

09.09.2013 - {{ progressUnit }} added to {{ book }} items.