image-navigation.xsl

<!-- begin template match for image navigation snippet -->
	<xsl:template match="table[@class='snippet-image-navigation']" mode="copy">
		<xsl:variable name="thumbnail-inside-container">
			<xsl:choose>
				<xsl:when test="lower-case(tbody/tr[3]/td[2]/node()) = '6'">
					<xsl:text>small-up-2 medium-up-3</xsl:text>
				</xsl:when>
				<xsl:otherwise>
					<xsl:text>small-up-2 medium-up-4 large-up-2</xsl:text>
				</xsl:otherwise>
			</xsl:choose>
		</xsl:variable>

		<xsl:variable name="showcase-container">
			<xsl:choose>
				<xsl:when test="lower-case(tbody/tr[3]/td[2]/node()) = '6'">
					<xsl:text>large-5</xsl:text>
				</xsl:when>
				<xsl:otherwise>
					<xsl:text>large-7</xsl:text>
				</xsl:otherwise>
			</xsl:choose>
		</xsl:variable>

		<xsl:variable name="thumbnail-outside-container">
			<xsl:choose>
				<xsl:when test="lower-case(tbody/tr[3]/td[2]/node()) = '6'">
					<xsl:text>large-7</xsl:text>
				</xsl:when>
				<xsl:otherwise>
					<xsl:text>large-5</xsl:text>
				</xsl:otherwise>
			</xsl:choose>
		</xsl:variable>

		<xsl:variable name="loop-limit">
			<xsl:choose>
				<xsl:when test="lower-case(tbody/tr[3]/td[2]/node()) = '6'">
					<xsl:text>13</xsl:text>
				</xsl:when>
				<xsl:otherwise>
					<xsl:text>11</xsl:text>
				</xsl:otherwise>
			</xsl:choose>
		</xsl:variable>

		<div class="uthsc-image-navigation">
			<div class="columns {$showcase-container} show-for-large">
				<div class="uthsc-image-navigation-showcase" style="background-image: url('{tbody/tr[4]/td[2]/img/@src}');">&nbsp;</div>
			</div>
			<div class="columns {$thumbnail-outside-container} " style="position: relative;">
				<div class="row {$thumbnail-inside-container}">
					<xsl:for-each select="tbody/tr">
						<xsl:if test="(position() > 6) and (position() &lt; $loop-limit)">
							<div class="column" style="position: relative;">
								<a href="{td[2]//a[1]/@href}"><div class="uthsc-image-navigation-content" style="background-image: url('{td[1]//img[1]/@src}');">
									<div class="word">
										<p><xsl:value-of select="td[2]//a[1]/node()" /></p>
									</div>
									</div>
								</a>
							</div>
						</xsl:if>
					</xsl:for-each>
				</div>
			</div>
		</div>
	</xsl:template>
	<!-- end template match for image navigation snippet -->