I've configured an XSL file like this:
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template name="homeArticleThumb" match="/">
<xsl:for-each select="Collection/Content">
<div class="setTableCell vertAlignT">
<div class="articleTeaserHolder">
<div class="imgHolder">
<xsl:variable name="imageSrc" select="Html/root/NewsArticle/artThumb/img/@src" />
<xsl:variable name="imageId">
<xsl:text>NewsArticle_</xsl:text>
<xsl:value-of select="ID" />
<xsl:text>_image</xsl:text>
</xsl:variable>
<xsl:variable name="contentTitle" select="Html/root/NewsArticle/artTitle" />
<a href="{QuickLink}" title="{Html/root/NewsArticle/artTitle}">
<img id="{ $imageId }" class="imgArtThumb" title="{ $contentTitle }" alt="{ $contentTitle }" src="{ $imageSrc }" />
</a>
</div>
<div class="textHolder">
<div class="textHolderTop">
<a href="{QuickLink}" title="{Html/root/NewsArticle/artTitle}" class="defaultLinks setBold">
<xsl:value-of select="Html/root/NewsArticle/artTitle"/>
</a>
</div>
<div class="textHolderBottom">
<xsl:value-of select="Html/root/NewsArticle/artTeaser" />
</div>
</div>
</div>
</div>
</xsl:for-each>
</xsl:template>
</xsl:stylesheet>
CSS Styles:
.setTableCell
{
display: table-cell;
}
.imgHolder
{
float: left;
display: inline-block;
width: 43%;
height: 100%;
padding: 1% 2% 0 0;
}
.vertAlignT
{
vertical-align: top;
}
.textHolder
{
float: left;
display: inline-block;
width: 55%;
height: 100%;
}
.textHolderTop
{
width: 100%;
height: 48%;
text-align: left;
padding-bottom: 2%;
overflow: hidden;
}
.textHolderBottom
{
width: 100%;
height: 46%;
overflow: hidden;
text-align: left;
padding-top: 2%;
padding-bottom: 2%;
}
@media only screen and (max-width: 820px) {
.setTableCell {
display: block;
}
}
To render the XSL, I use the following line of code:
<CMS:Collection ID="id123" runat="server" DefaultCollectionID="128" DisplayXslt="art.xsl" GetHtml="true" />
Resulting Layout:
In the future, it might be necessary to add more content items to the collection, increasing from 4 articles to 6 or 7, etc.
How can I adjust the XLS file to always present two articles per row, moving to a new row for the subsequent two articles, and so on?