Cascade Responsive Images

gistfile1.xslt

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
    <xsl:template match="system-index-block">
        <xsl:apply-templates select="calling-page/system-page/system-data-structure"/>
    </xsl:template>

    <xsl:template match="system-data-structure">
        
        <!-- apply templates for content areas -->
        <div class="main">
            <xsl:apply-templates select=".//main/node()"/>
        </div>
        <div class="sidebar">
            <xsl:apply-templates select=".//content-sidebar/wysiwyg/node()"/>
        </div>
    </xsl:template>

    <!-- identity template -->
    <xsl:template match="@*|node()">
        <xsl:copy>
            <xsl:apply-templates select="@*|node()" />
        </xsl:copy>
    </xsl:template>

    <!-- more specific matches for img elements, filtered for same domain -->
    <xsl:template match="main//img[contains(@src, '//goizueta.emory.edu') or not(contains(@src, 'http'))]">
        <xsl:copy>
            <xsl:attribute name="srcset">[system-asset]<xsl:value-of select="@src" />[/system-asset]?w=280 280w, [system-asset]<xsl:value-of select="@src" />[/system-asset]?w=440 440w, [system-asset]<xsl:value-of select="@src" />[/system-asset]?w=614 614w, [system-asset]<xsl:value-of select="@src" />[/system-asset]?w=784 784w, [system-asset]<xsl:value-of select="@src" />[/system-asset]?w=882 882w, [system-asset]<xsl:value-of select="@src" />[/system-asset]?w=980 980w, [system-asset]<xsl:value-of select="@src" />[/system-asset]?w=1176 1176w</xsl:attribute>
            <xsl:attribute name="sizes">(max-width: 320px)  280px, (max-width: 480px)  440px, (max-width: 768px)  614px, (max-width: 1280px) 784px, (max-width: 1440px) 882px, (max-width: 1600px) 980px, (max-width: 1920px) 1176px, 100vw</xsl:attribute>
            <xsl:attribute name="src"><xsl:value-of select="@src" />?w=280</xsl:attribute>
            <xsl:apply-templates select="@*|node()" />
        </xsl:copy>
    </xsl:template>
    <xsl:template match="content-sidebar/wysiwyg//img[contains(@src, '//goizueta.emory.edu') or not(contains(@src, 'http'))]">
        <xsl:copy>
            <xsl:attribute name="srcset">[system-asset]<xsl:value-of select="@src" />[/system-asset]?w=280 280w, [system-asset]<xsl:value-of select="@src" />[/system-asset]?w=323 323w, [system-asset]<xsl:value-of select="@src" />[/system-asset]?w=440 440w</xsl:attribute>
            <xsl:attribute name="sizes">(max-width: 320px)  280px, (max-width: 480px)  440px, (max-width: 1600px)  323px, 100vw</xsl:attribute>
            <xsl:attribute name="src"><xsl:value-of select="@src" />?w=280</xsl:attribute>
            <xsl:apply-templates select="@*|node()" />
        </xsl:copy>
    </xsl:template>
</xsl:stylesheet>