Images

<%@ tag pageEncoding="UTF-8" trimDirectiveWhitespaces="true" dynamic-attributes="dynattrs" %>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="kuik" uri="kuik" %>

<%@ tag import="fr.kosmos.web.kore.utils.IconUtil" %>

<%@ attribute name="image" required="true" type="fr.kosmos.web.kore.attributes.interfaces.Image" description="L'image" %>
<%@ attribute name="size" required="false" type="java.lang.String" description="Taille (défaut : sm)" %>
<%@ attribute name="layout" required="false" type="java.lang.String" description="Disposition (défault : vertical)" %>
<%@ attribute name="ratio" required="false" type="java.lang.String" description="Ratio de l'image (défaut : 16-9)" %>
<%@ attribute name="fit" required="false" type="java.lang.String" description="Mode d'affichage de l'image (défaut : contain)" %>
<%@ attribute name="blurfill" required="false" type="java.lang.Boolean" description="Remplir l'espace vide avec la même image floutée" %>
<%@ attribute name="imagestyle" required="false" type="java.lang.String" description="Styles personnalisés pour l'image" %>
<%@ attribute name="imageclasses" required="false" type="java.lang.String" description="Classes pour l'élément image (img)" %>
<%@ attribute name="figureclasses" required="false" type="java.lang.String" description="Classes pour l'élément englobant (figure)" %>

<c:if test="${not empty pageScope.image}">
    <c:if test="${empty pageScope.size}">
        <c:set var="size" value="sm" />
    </c:if>
    <c:if test="${empty pageScope.layout}">
        <c:set var="layout" value="vertical" />
    </c:if>
    <c:set var="figureClassesAttr" value="image image--${pageScope.size} image--${pageScope.layout} ${figureclasses}"/>

    <c:if test="${not empty pageScope.ratio}">
        <c:set var="ratioClasses" value="u-ratio-${pageScope.ratio}" />
    </c:if>

    <c:if test="${not empty pageScope.imagestyle}">
        <c:set var="imageStyleAttr">style="<c:out value="${pageScope.imagestyle}" />"</c:set>
    </c:if>

    <c:if test="${pageScope.blurfill}">
        <c:set var="blurFillClasses" value="u-media-blur-fill" />
        <c:set var="styleAttr">style="--src: url(<c:out value="${pageScope.image.url}" />)"</c:set>
    </c:if>

    <c:set var="classes" value="u-media-center ${pageScope.blurFillClasses} ${pageScope.ratioClasses}" />

    <c:set var="attributes">
        <c:forEach items="${dynattrs}" var="a">
            <c:choose>
                <c:when test="${a.key == 'class'}">
                    <c:set value="${classes} ${a.value}" var="classes"/>
                </c:when>
                <c:otherwise>${a.key}="${a.value}" </c:otherwise>
            </c:choose>
        </c:forEach>
    </c:set>

    <c:set var="fitClass">
        <c:choose>
            <c:when test="${pageScope.fit eq 'cover'}">u-media-cover</c:when>
            <c:otherwise>u-media-contain</c:otherwise>
        </c:choose>
    </c:set>

    <c:set var="imageclasses" value="${pageScope.imageclasses} ${pageScope.fitClass}" />

    <figure class="${pageScope.figureClassesAttr}" ${pageScope.attributes}>
        <c:out value="${pageScope.mode}" />
        <div class="image__illustration ${pageScope.classes}" ${pageScope.styleAttr}>
            <c:choose>
                <c:when test="${IconUtil.isSvg(image.url)}">
                    <kuik:svg class="${pageScope.imageclasses}" source="${image.url}" title="${image.alt}" />
                </c:when>
                <c:otherwise>
                    <img
                        class="${pageScope.imageclasses}"
                        src="<c:out value="${pageScope.image.url}" />"
                        alt="<c:out value="${pageScope.image.alt}" />"
                       ${pageScope.imageStyleAttr}
                        loading="lazy"
                    >
                </c:otherwise>
            </c:choose>
        </div>
        <jsp:doBody var="body"/>
        <c:if test="${not empty fn:trim(pageScope.body)}">
            <figcaption class="image__caption">
                ${pageScope.body}
            </figcaption>
        </c:if>
    </figure>
</c:if>