This page should only be used if the assisted migration script asks you to manually migrate skin.20250926.INTRANET.MainIllustrationResponsive
The display of the main illustration on the inside page suffered from a few shortcomings in responsive mode, which have now been corrected.
In particular, the image ratio was too variable, and there are now only 2 ratios depending on resolution:
- pour une résolution < 540px et >1150px, l'image est affiché au format 7:5
- for resolutions between 540px and 1150px, the image is displayed in 11:4 format
|
Desktop >1150px |
Tablette > 540px et < 1150px |
Mobile < 540px |
|---|---|---|
|
|
|
|
Par ailleurs, pour une meilleurs résolution de l'image, la balise <picture> est utilisée, et pour faciliter les surcharges la définition de cet élément est isolé dans un template XSL "main-content-img-image"
<xsl:template name="main-content-img-image">
<xsl:param name="imgType"/>
<xsl:param name="imgUri"/>
<xsl:param name="altText"/>
<picture>
<source srcset="{resolver:resolveCroppedImage($imgType, $imgUri, 350, 490)}" media="(max-width: 540px)" /><!-- ratio 7:5-->
<source srcset="{resolver:resolveCroppedImage($imgType, $imgUri, 400, 1100)}" media="(max-width: 1150px)" /><!-- ratio 11:4 -->
<img src="{resolver:resolveCroppedImage($imgType, $imgUri, 500, 700)}" alt="{$altText}"/><!-- ratio 7:5-->
</picture>
</xsl:template>If you've overloaded the "main-content-img" template, you won't benefit from these improvements. It's advisable to use the template "main-content-img-image" instead of <img src="{resolver:resolveCroppedImage($imgType, $imgUri, 500, 700)}" alt="{$altText}"/>
<xsl:call-template name="main-content-img-image"> <xsl:with-param name="imgType" select="$imgType"/> <xsl:with-param name="imgUri" select="$imgUri"/> <xsl:with-param name="altText" select="$altText"/> </xsl:call-template>
What's more, if your image doesn't have the same dimensions as the core version (500/700), it's not advisable to overload the image dimensions in CSS (bad practice to keep the image at the same ratio). Leave height: auto and overload the "main-content-img" template with your own dimensions/ratios.
Back to top