Creativity with Conditionals

Making this new template, I had to filter out a lot of stuff for various pages. For example, you won't see the TOC on a post page, but you will on the main, archive and search pages. The hanging flowers in the bottom area disappear from the top left on post pages, and show up at the bottom, straightened out.

No, these aren't Javascript if-else statements. These are too trivial for that. Plus there aren't any fool proof checks to see which page we are working with, except regular expressions, which are overkill for things like these. The above mentioned tricks are all thanks to Blogger conditional tags, which gained a lot of power with the new Blogger. I'll explain some creative uses of these (even in Javascript), but first, a look at these tags for those who don't know. Skip the next section if you do know.

Conditions, conditions

The simple format of the new Blogger conditional tag is:

<b:if cond='--condition--'>
    <!-- codes to execute if True -->
<else/>
    <!-- codes to execute if False -->
</b:if>

That is pretty much all you need to know to get started. The cond attribute can hold any condition in the form of a Blogger data variable, operator (optional) and value (optional). I say optional for the last two because most of the data variables have either of two values, True of False. In this case, you can just check their content with a cond='data:variable' which translates to if true. The <b:else/> is optional too, in which case there will be no output in case the condition is false. Don't miss the forward slash, otherwise Blogger will give an error.

They are explained by Blogger here in case mine didn't suffice. You can take a look at all the layout tags to see which ones you can use for conditions. Comfortable? Let's move on!

Creativity and ingenuity

The first simple trick is conditional CSS. This means that certain parts of your CSS will be executed on certain pages. This let's you style main, archive and post pages separately if you want to. Sound cool? Hehe! There's a catch :P

You'll have give up on your <b:skin> tags (somewhat) for this. You see, Blogger doesn't like adding conditions to those tags, because the 'Page Elements' layout depends on those to draw the widgets and and their dimensions, with any other nitty gritty that you might have added. So, what do you do? Simple! Add your own pair of <style> tags! These won't be checked by Blogger in the Page Elements view, and you can style away to your hearts content.

However, be warned, this most probably 'will' warp your 'Page Elements' view pretty weirdly. If you don't use it too much, like me, then go ahead. If you do, try this. Keep the main styles within the <b:skin> tags, and move over only the conditional styles within <style> tags. You will still see some styles creep in, but they'll be minimum. You can use your conditional tags the same way you use them in your widgets. Nothing changes! :)

That's that for styles. You can't use conditional tags to hide widgets from certain pages. Apparently there can only be <b:widget> tags within sections. Anything else is rejected by Blogger. That little bug has been brought up by Phydeaux3, so you'll be better off using Javascript to fix that.

The next thing is the page content itself. You can literally use the conditional tags anywhere you feel like (except inside sections but outside widgets). You can use it to hide one sidebar, and show a different one. This can be achieved by making two sections, one for each sidebar. Then wrapping each of them with the conditionals, having the required conditions to suit your purpose. It's quite easy when you begin to think of it, and becomes more fun when you start to play with it.

Now the grand finale. This is probably the most useful of uses, and a great way to integrate Blogger's language with one we all know and love, Javascript. If you want to execute certain code on one page, but not on others, there is no good way short of using regular expressions, right? Nope! Again, we bring in the trusty conditionals. Have a look at this:

<script>
//Javascript to put in a greeting on proper pages

<b:if cond='data:blog.pageType == "index"'>
//<![CDATA
document.write('You are on the main page');
//]]>

<b:else/>
var main = '<data:blog.homepageUrl/>';

//<![CDATA[
document.write('You are not on the main page. <a href="'+main+'">Go there</a>.');
//]]>
</script>

See what it does? It'll print out the first message when the user is on the main page, and second one with a link to the homepage on any other page. The variable main gets the value of the main page because it is outside the CDATA tags. Anything outside those tags is parsed by the Blogger parser as tags. Anything inside is left as it is. That means, if you try to put the variable line inside a CDATA segment, it'll get the value '<data:blog.homepageURL/>' instead of getting the actual URL. This is why in my custom dates script, the actual date is passed to the function, and not the tag. This can be your best scripting friend if you want to work with separate page types in your scripts. A simple way to allow multiple functions/codes to check which page it is, is by writing out this code right under your <body> tag:

<b:if cond='data:blog.pageType == "item"'>
<input type='hidden' value='item' id='pagetype'/>
<b:else/>
   <b:if cond='data:blog.pageType == "archive"'>
   <input type='hidden' value='archive' id='pagetype'/>
   <b:else/>
      <b:if cond='data:blog.pageType == "index"'>
      <input type='hidden' value='index' id='pagetype'/>
      <b:else/>
      <input type='hidden' value='search' id='pagetype'/>
      </b:if>
   </b:if>
</b:if>

That (if everything is right) should print out 'one' hidden input tag with the value set to the page you're on. Then you can do a var page = document.getElementById('pageType').value, which will put that value in the variable, and then you can use that variable everywhere and anywhere you want (provided it is global). This trick works superbly, and since the page type is being decided by Blogger tags, there is no way your condition can be broken. This can also be used to hide individual widgetsThey will still load though, hence there will be no reduction in page load time, so you might want to keep that in mind., or other page elements until the pageType attribute begins to work as documented.

Let 'em flow

So, those are the few methods that I've been able to come up with to increase the mileage you get with the conditional tags. You're limited only by your creativity ofcourse. Give me a buzz in the comments whenever you come up with a cool new way of using them, and I'll gladly link to you! I'd love to see what people can come up with :)

Get 'em creative juices flowing!