Anderson Leeb Blog: Compound Conditionals in Diazo

Say for instance that you are using Twitter Bootstrap, and you want to map Plone's three column layout into a Bootstrap row. When all three columns are present, the center column should take up, for instance 6 grid columns, and the left and right columns could take three each in a 12 column grid.

Obviously, this works great if all three columns are present, but if one or both of the left and right columns are absent, you end up with a lot of wasted space. When using diazo, you can conditionally modify the class of an HTML element to change this with:

<before css:theme-children="#content article"
        css:if-content="#portal-column-two">
    <xsl:attribute name="class">span12</xsl:attribute>
</before>

Now, this works fine if you only have one possibility, in this case the presence or absence of column 1. Since we have two columns, we can say that if either one is gone, use 9 columns, if both are gone, use 12. which becomes this:

<before css:theme-children="#content article"
        if-content='not(//*[@id="portal-column-two"]) or
                    not(//*[@id="portal-column-one"])' >
    <xsl:attribute name="class">span9</xsl:attribute>
</before>
		
<before css:theme-children="#content article"
        if-content='not(//*[@id="portal-column-two"]) and
                    not(//*[@id="portal-column-one"])' >
    <xsl:attribute name="class">span12</xsl:attribute>
</before>

This allows to use the logical "or" and "and" operators to take care of both cases. Note that the order matters, the and must come after the or.