Blogger expression and operators for layout data tags [For Developers]

Blogger doesn't allow access to servers, means no php, SQL or any server side stuff. However, Blogger's well created layout data tags leave us no reason to head to server side. Blogger is constantly upgrading its service and yet achieved many things. Recently, when I saw at news at my Blogger dashboard I surprised to see a new development in Blogger. Have a look of whats new this time for developers.
Blogger layout data tags are the only ways through which we can display data with ease and without using Javascript. It is easy to understand and easy to code. Blogger is one the major niche of my study and you can find it here.

Conditional Sentences

Conditional sentences in Blogger is not a new development but many new measures has been taken in order to improve the way we use to code the stuff. This one is quite similar to if...else condition we know about Javascript, Java and other languages. Lets see how stuff works:

Number of comments of each post can be accessed by:

<data:post.numComments/>

If wanted to add some sort of label like "1 Comment" or "2 Comments so far" then we write conditional sentence that checks whether is there a comment, more than one or no comment. The condition would be expressed like:

<b:if cond="data:post.numComments == 0"> <span>No Comments</span> 
</b:if>
<b:if cond="data:post.numComments == 1"> <span>1 Comments</span> 
</b:if>
<b:if cond="data:post.numComments > 1"> <span><data:post.numComments/> No Comments</span> 
</b:if>

The above code does as described above, but a newer and better version of the same code is to use if, elseif and else condition. It is similar to Javascript however this one is faster, easier and reliable. if becomes first condition, then elseif becomes second condition. Put as many elseif as many you want, each next elseif becomes a choice if above it doesn't works. Finally, else condition if nothing matches your condition.
The above comment code can be written in a better way like this:

<b:if cond="data:post.numComments == 0"> <span>No Comments</span>
 <b:elseif cond="data:post.numComments == 1" />
<span>1 Comments</span>
<b:elseif cond="data:post.numComments > 1" />
<span><data:post.numComments/> No Comments</span> 
</b:if>

As you can see that b:elseif doesn't closes, but if you add b:else condition that it will be added like <b:else/>. Well, elseif and else tags are optional, if condition matches the provided condition in if tag then the content would be displayed otherwise nothing will be displayed.

Operators

Better operators means a better way to play with syntax. Operators basically used to do any functions with simple signs. Arithmetic operators are already available in Blogger that are + and - sign. Which let us do addition or subtraction with numbers and even we can add two strings.

Arithmetic operators

These are not the new operations but most often + is observed in Blogger templates, a simple example is right here:

<a expr:href='"https://twitter.com/share?url="+data:post.url+"&text="+data:post.title'>Tweet</a>

The above will create a tweet link of the post, with data:post.url and data:post.title will return post title and post URL. Using + we just added two strings. This is a common use of it, however.

Comparison and Equivalent operators  

Comparison and Equivalent operators are used between two values to check whether they are equal, unequal, greater or smaller than each other. This one is also one of the concept we know about Javascript, Java and many languages.

var x = 5;
var y = 6;
if (x < y) {
    returns true;
}

This will no doubt returns true, if we wanted to use it in Blogger then in every loop we can set index number that starts from zero. We know that in every b:widget tag there is a b:includable tag with id main. If we talk about post widget then we create loop under post that is given as:

<b:loop values='data:posts' var='post'>
        <b:include data='post' name='post'/>
.
.
.
</b:loop>

b:include tag is used to use some code at several places, well if we alter the loop tag as:
<b:loop values='data:posts' var='post' index='i'>

Then we can access each post with index number in b:inludable tag with data:i like this.

<b:includable id='post' var='post'>
<b:if cond='data:i == 1'>
Most recent post
</b:if>
.
.
.
</b:includable>

We just used Equivalent operators to check weather the index number of post is 1 or not. Just like it we can use comparison operator that is < or >.

 <b:includable id='post' var='post'>
    <b:if cond='data:i < 10'>Most Recent Posts</b:if>
    .
    .
    .
</b:includable>

Now the text node Most Recent Posts will be displaced in first 10 posts. Just like we do in post loop this can be done in every widget with loop.

And, Or and Not operator

These are also called as logical operators that returns boolean means you can compare between several conditions with and, or and not operator if your condition matches the requirement then it will return true and action would be performed.

Lets start with and, it is an operator use to check two conditions simultaneously because previously we use to put nested conditions. The older way:

<b:if cond='data:blog.pageType == "index"'>
    <b:if cond='data:post.allowComments'>Click here to comment</b:if>
</b:if>

Nested if conditions were required in order to test two conditions. A better way is to use and keyword between two sentences. Here is a better way.

<b:if cond='data:blog.pageType == "index" and data:post.allowComments'>Click here to comment</b:if>

Next or, this key word is same as and operator but the difference is in and both conditions should pass the statement but in this case at least one should pass. Here is a working example.

<b:if cond='data:blog.pageType == "index" or data:post.allowComments'>Click here to comment</b:if>

Finally we are at not operator. Use to to reverse a condition, like if you wanted to perform an action for a condition that is not true then you will create a b:if tag and leave it blank just to create a <b:else> tag. not keyword make it easy. Here is working example.

<b:if cond='not data:post.allowComments'>Comments not allowed</b:if>

not keyword and ! are the same, so this can also be written as:

<b:if cond='!data:post.allowComments'>Comments not allowed</b:if>

Show membership by in and contain

in and contain are two new keywords use to check that array have the given object. An array of objects can be created with {} or []. Well we know that there are mainly three kind of page types in Blogger that are archive, index and item. Their array could be expressed by

[index,item,archive]

Or

{index,item,archive}

If there is a if condition that a text node has to be displayed on index or item page, then instead of using or operator  we can us in or contain keyword, like this one.

<b:if cond='data:blog.pageType contain [item,index]'>
This is index or post page
</b:if>

Use in instead of contain. We can use not operator in above case like:

<b:if cond='data:blog.pageType not [item,index]'>
This neither index nor post page
</b:if>

The above code will display text node for pages that are neither post page nor index. and and or operators are also usable with in or contain to pass two conditions.

Ternary Selector (?)

This is a short hand method of if and else. The format is given by:

[condition] ? [If True] : [If False]

 If you want to customize the text node of those with comment allowed or not allowed then use like this.

<span expr:class='data:post.allowComments ? comments : no-comments'>
Comments
</span>
If comments are allowed then output would be.
<span class='comments'> Comments </span>

If comments are not allowed then:

<span class='no-comments'> Comments</span>

Then you can use CSS to style it.

Conclusion

Blogger's better and upgraded version is a positive sign for developer that helps us to reduce the use of Javascript that actually difficult to code as well as take time to load the stuff. I hope this information would be useful for you, if you find any thoughts regarding this post leave a comment.