Conditional formatting

This page delves into details related to template-based thumbnails. Look here for more general information on templates.

What is a conditional formatting?

Conditional formatting is a way to format html content based on the value of some expression. Unlike conditional content, conditional formatting is not meant to allow or block content, but conditional content and conditional formatting are expressed in much the same way.

In order to use conditions, a special keyword must be used, $(IF, condition=" <expression> ") <conditional content> $(ENDIF).

A simple scenario

We are going to change the background color of a shot. The rule is : every even shot background color should be the same than the whole page background color (grey), otherwise it should be white. Here is how this gets expressed in a template :

<body bgcolor="#EEEEEE">
<center>
<h1>$(TITLE)</h1>
 <table border="0">
  <tr>
   <td $(IF, condition="$(INDEX) % 2")bgcolor=#FFFFFF$(ENDIF)>$(BEGINSHOT)
    <img src= "$(SHOTFILENAME)"><br><center>$(SHOTCAPTION)</center>$(ENDSHOT)</td>
   <td $(IF, condition="$(INDEX) % 2")bgcolor=#FFFFFF$(ENDIF)>$(BEGINSHOT)
    <img src= "$(SHOTFILENAME)"><br><center>$(SHOTCAPTION)</center>$(ENDSHOT)</td>
   <td $(IF, condition="$(INDEX) % 2")bgcolor=#FFFFFF$(ENDIF)>$(BEGINSHOT)
    <img src= "$(SHOTFILENAME)"><br><center>$(SHOTCAPTION)</center>$(ENDSHOT)</td>
  </tr>
  <tr>
   <td $(IF, condition="$(INDEX) % 2")bgcolor=#FFFFFF$(ENDIF)>$(BEGINSHOT)
    <img src= "$(SHOTFILENAME)"><br><center>$(SHOTCAPTION)</center>$(ENDSHOT)</td>
   <td $(IF, condition="$(INDEX) % 2")bgcolor=#FFFFFF$(ENDIF)>$(BEGINSHOT)
    <img src= "$(SHOTFILENAME)"><br><center>$(SHOTCAPTION)</center>$(ENDSHOT)</td>
   <td $(IF, condition="$(INDEX) % 2")bgcolor=#FFFFFF$(ENDIF)>$(BEGINSHOT)
    <img src= "$(SHOTFILENAME)"><br><center>$(SHOTCAPTION)</center>$(ENDSHOT)</td>
  </tr>
  <tr>
   <td $(IF, condition="$(INDEX) % 2")bgcolor=#FFFFFF$(ENDIF)>$(BEGINSHOT)
    <img src= "$(SHOTFILENAME)"><br><center>$(SHOTCAPTION)</center>$(ENDSHOT)</td>
   <td $(IF, condition="$(INDEX) % 2")bgcolor=#FFFFFF$(ENDIF)>$(BEGINSHOT)
    <img src= "$(SHOTFILENAME)"><br><center>$(SHOTCAPTION)</center>$(ENDSHOT)</td>
   <td $(IF, condition="$(INDEX) % 2")bgcolor=#FFFFFF$(ENDIF)>$(BEGINSHOT)
    <img src= "$(SHOTFILENAME)"><br><center>$(SHOTCAPTION)</center>$(ENDSHOT)</td>
  </tr>
 </table>
<center>
</body>

And it produces the following :

The table above is made of 9 cells enclosed by <td>...</td> tags. Inside those tags is the shot content, and the usual content and keywords apply. In order to select a background color depending on some expression, we put an appropriate bgcolor attribute value to each <td> tag. The condition is $(INDEX) % 2 which means, any time the shot index modulo 2 equals 1, then the condition is valid and thus the content inside the $(IF)...$(ENDIF) keywords must be taken into account.

Regarding expressions, the following operators are available :

+, -, *, / (4 primary operators)
<, >, =, != (comparison operators)
% (modulo operator)
AND, OR (logical operators)
(, ) (parenthesis and grouping operators)

And of course, all keywords are available, as well numerical and string litterals.

Other scenarios

It's just as easy to switch the shot caption to bold for instance. The following condition turns the 3rd shot to bold :

$(IF, condition="$(INDEX) = 3")<b>$(ENDIF)
$(SHOTCAPTION)$(IF, condition="$(INDEX) = 3")</b>$(ENDIF)

And it produces the following :

To virtually all styles you can manipulate with standard html tags, you can add expressions to control how they behave throughout the thumbnail generation.