Média
Un composant présentant une version résumée d'une fiche, capable d'afficher sa miniature, son titre, son résumé et d'autres informations. Ce composant propose également un lien vers la fiche complète.
Classes du composant
Modificateurs de disposition
media--horizontal: Présentation avec la photo à gauche et les détails à droitemedia--vertical: Présentation avec la photo au-dessus et les détails en dessous
Note : ces deux classes peuvent être omises, notamment dans le cas où il n'y a pas de photo du tout.
Container query
Horizontal
Cet exemple est demandé en horizontal mais si le parent est pas assez large on le met en vertical
Largeur du container :
Titre du média
Sous-Titre du média
Une description plus longue de ce que représente le média
Largeur du container :
Titre du média
Sous-Titre du média
Une description plus longue de ce que représente le média
Largeur du container :
Titre du média
Sous-Titre du média
Une description plus longue de ce que représente le média
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" trimDirectiveWhitespaces="true" %>
<%@ taglib prefix="kuik" uri="kuik" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="resources" uri="resources" %>
<%--@elvariable id="mediaViewModel" type="fr.kosmos.web.kore.attributes.DefaultMedia"--%>
<kuik:heading size="lg" skin="a" title="Container query" level="3"/>
<kuik:heading size="lg" skin="a" title="Horizontal" level="4"/>
<p>Cet exemple est demandé en horizontal mais si le parent est pas assez large on le met en vertical</p>
<div class="js-resizable-container">
Largeur du container : <output class="js-resizable-current"></output>
<div class="u-vspacer-sm"></div>
<kuik:media media="${mediaViewModel}" orientation="horizontal"/>
</div>
<div class="js-resizable-container">
Largeur du container : <output class="js-resizable-current"></output>
<div class="u-vspacer-sm"></div>
<kuik:media media="${mediaViewModel}" orientation="horizontal" imgClasses="u-media-cover u-rounded-xs"/>
</div>
<div class="js-resizable-container">
Largeur du container : <output class="js-resizable-current"></output>
<div class="u-vspacer-sm"></div>
<kuik:media media="${mediaViewModel}" orientation="horizontal" imgClasses="u-media-contain u-rounded-xl u-ratio-1-1"/>
</div>
<resources:addScript path="/static/js/resizable-container.js" type="module"/>
Orientation
Horizontal
Titre du média
Sous-Titre du média
Une description plus longue de ce que représente le média
Vertical
Titre du média
Sous-Titre du média
Une description plus longue de ce que représente le média
Sans image
Titre du média
Sous-Titre du média
Une description plus longue de ce que représente le média
Sans sous-titre
Une description plus longue de ce que représente le média
Sans résumé
Titre du média
Sous-Titre du média
Avec contenu injecté
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" trimDirectiveWhitespaces="true" %>
<%@ taglib prefix="kuik" uri="kuik" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--@elvariable id="mediaViewModel" type="fr.kosmos.web.kore.attributes.DefaultMedia"--%>
<kuik:heading size="lg" skin="a" title="Orientation" level="3" />
<kuik:heading size="lg" skin="a" title="Horizontal" level="4" />
<div>
<kuik:media media="${mediaViewModel}" orientation="horizontal"/>
</div>
<kuik:heading size="lg" skin="a" title="Vertical" level="4" />
<div>
<kuik:media media="${mediaViewModel}" orientation="vertical"/>
</div>
<kuik:heading size="lg" skin="a" title="Sans image" level="3" />
<c:set var="backup" value="${mediaViewModel.image}"/>
<c:set target="${mediaViewModel}" property="image" value="${null}"/>
<div>
<kuik:media media="${mediaViewModel}" orientation="vertical"/>
</div>
<c:set target="${mediaViewModel}" property="image" value="${backup}"/>
<kuik:heading size="lg" skin="a" title="Sans sous-titre" level="3" />
<c:set var="backup" value="${mediaViewModel.subtitle}"/>
<c:set target="${mediaViewModel}" property="subtitle" value=""/>
<div>
<kuik:media media="${mediaViewModel}" orientation="vertical" imgClasses="u-media-cover u-rounded-xl u-ratio-1-1"/>
</div>
<c:set target="${mediaViewModel}" property="subtitle" value="${backup}"/>
<kuik:heading size="lg" skin="a" title="Sans résumé" level="3" />
<c:set var="backup" value="${mediaViewModel.summary}"/>
<c:set target="${mediaViewModel}" property="summary" value=""/>
<div>
<kuik:media media="${mediaViewModel}" orientation="vertical" imgClasses="u-media-contain u-rounded-xs"/>
</div>
<c:set target="${mediaViewModel}" property="summary" value="${backup}"/>
<kuik:heading size="lg" skin="a" title="Avec contenu injecté" level="3" />
<div>
<kuik:media media="${mediaViewModel}" orientation="vertical">
<kuik:media-image image="${mediaViewModel.image}" imgClasses="u-media-contain u-rounded-xs" />
<kuik:media-content>
<div class="media__content">
<div class="media__thematics">
<ul class="list list--inlined">
<li class="list__item"><kuik:cartouche class="u-valign-top" priority="primary" size="md">Actualité</kuik:cartouche></li>
<li class="list__item"><kuik:cartouche class="u-valign-top" priority="primary" size="md">Étudiant</kuik:cartouche></li>
</ul>
</div>
<a class="media__link" href="<c:out value="${pageScope.media.link}" />"><kuik:heading class="media__title" title="${pageScope.media.title}" level="3" /></a>
<p class="media__subtitle">${pageScope.media.subtitle}</p>
<kuik:date class="media__date" date="12 Décembre 2024"/>
<kuik:place>Nantes</kuik:place>
<p class="media__summary"><c:out value="${pageScope.media.summary}" escapeXml="false"/></p>
<p class="media__infos">Mis à jour le<time class="media__infos-value">17 Septembre 2024</time></p>
</div>
</kuik:media-content>
</kuik:media>
</div>
| Name | Type | Required | Description |
|---|---|---|---|
| media | fr.kosmos.web.kore.attributes.interfaces.Media | true | |
| orientation | fr.kosmos.web.kore.attributes.Orientation | false | Orientation du média |
| size | java.lang.String | false | Taille (défaut : sm) |
| imgClasses | java.lang.String | false | Classes appliquées au tag img (si présent) |
$prefix: 'media';
$prefix-title: 'media-title';
$prefix-content: 'media-content';
.media {
--media-img-size: 1fr;
--media-content-size: 2fr;
@include custom-color($prefix, true);
@include custom-border($prefix, true);
@include custom-space($prefix, true);
display: grid;
}
.media__content {
@include custom-color($prefix-content, true);
@include custom-border($prefix-content, true);
@include custom-space($prefix-content, true);
@include custom-typo($prefix-content, true);
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.media__title {
@include custom-typo($prefix-title, true);
@include custom-color($prefix-title, true);
--links-visited: currentcolor;
--links-hover: currentcolor;
--links: currentcolor;
margin: var(--space-0);
}
.media__subtitle {
font-size: var(--font-size-30); // FIXME: variables ?
font-weight: var(--font-weight-700);
margin: var(--space-0);
}
.media__link {
text-decoration: none;
}
.media__summary {
margin: var(--space-0);
}
.media--vertical {
grid-auto-flow: row;
grid-auto-rows: min-content;
}
*:has(> .media--horizontal) {
container-name: mediaresponsive;
container-type: inline-size;
}
.media--horizontal {
@container mediaresponsive (width >= 30rem) {
&:has(> .media__illustration) {
grid-template-columns: var(--media-img-size) var(--media-content-size);
}
}
@container mediaresponsive (width < 30rem) {
grid-auto-flow: row;
grid-auto-rows: auto;
}
}
.media--sm, .media--md, .media--lg, .media--xl {
@include custom-border($prefix);
@include custom-space($prefix);
.media__title {
@include custom-typo($prefix-title);
}
.media__content {
@include custom-border($prefix-content);
@include custom-space($prefix-content);
@include custom-typo($prefix-content);
}
}
<%@ tag pageEncoding="UTF-8" trimDirectiveWhitespaces="true" dynamic-attributes="dynattrs" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="kuik" uri="kuik" %>
<%@ attribute name="media" required="true" type="fr.kosmos.web.kore.attributes.interfaces.Media" %>
<%@ attribute name="orientation" required="false" type="fr.kosmos.web.kore.attributes.Orientation" description="Orientation du média" %>
<%@ attribute name="size" required="false" type="java.lang.String" description="Taille (défaut : sm)" %>
<%@ attribute name="imgClasses" required="false" type="java.lang.String" description="Classes appliquées au tag img (si présent)" %>
<c:if test="${not empty pageScope.media}">
<c:if test="${empty pageScope.size}">
<c:set var="size" value="sm"/>
</c:if>
<c:set var="classesSize" value="media--${pageScope.size}"/>
<c:if test="${empty pageScope.orientation}">
<c:set var="orientation" value="horizontal"/>
</c:if>
<c:if test="${empty pageScope.media.image}">
<c:set var="orientation" value="vertical"/>
</c:if>
<c:set var="classesOrientation" value="media--${pageScope.orientation}"/>
<c:set var="classes" value="media ${pageScope.classesOrientation}"/>
<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>
<div class="${pageScope.classes}" ${pageScope.styleAttribute} ${pageScope.attributes}>
<jsp:doBody var="body"/>
<c:choose>
<c:when test="${not empty pageScope.body}">
${pageScope.body}
</c:when>
<c:otherwise>
<kuik:media-image image="${pageScope.media.image}" imgClasses="${pageScope.imgClasses}"/>
<kuik:media-content media="${pageScope.media}"/>
</c:otherwise>
</c:choose>
</div>
</c:if>