Image Thumbnails and Resizing - Eonic/ProteanCMS GitHub Wiki

In functions.xsl we have the following template for showing thumbnails

<xsl:apply-templates select="." mode="displayThumbnail">
      <xsl:with-param name="crop" select="true()"/>
</xsl:apply-templates>

depending upon the content type the following templates set the various sizes of the thumbnails

The following when specified in the Protean.web.config enables webp functionality

        <add key="EnableWebP" value="on" />
	<add key="EnableRetina" value="off" />

This is an example of a site that has responsive / webp images enabled. This is in the bespoke products.xsl which sets bespoke image sizes required for the various screen breakpoints.

<xsl:template match="Content[@type='Product']" mode="getThWidth">100</xsl:template>
<xsl:template match="Content[@type='Product']" mode="getThHeight">100</xsl:template>

<xsl:template match="Content[@type='Product']" mode="getThWidth-xxs">325</xsl:template>
<xsl:template match="Content[@type='Product']" mode="getThHeight-xxs">325</xsl:template>

<xsl:template match="Content[@type='Product']" mode="getThWidth-xs">325</xsl:template>
<xsl:template match="Content[@type='Product']" mode="getThHeight-xs">325</xsl:template>

<xsl:template match="Content[@type='Product']" mode="getThWidth-sm">315</xsl:template>
<xsl:template match="Content[@type='Product']" mode="getThHeight-sm">315</xsl:template>

<xsl:template match="Content[@type='Product']" mode="getThWidth-md">293</xsl:template>
<xsl:template match="Content[@type='Product']" mode="getThHeight-md">293</xsl:template>

<xsl:template match="Content[@type='Product']" mode="getThWidth-lg">260</xsl:template>
<xsl:template match="Content[@type='Product']" mode="getThHeight-lg">260</xsl:template>
⚠️ **GitHub.com Fallback** ⚠️