Thème Paris.fr

@cImg

Exemple

Label Tour Eiffel

<@cSection>
  <@cImg src='images/paul-dufour-5XndD3FhH-w-unsplash.png' alt='Tour Eiffel' labelDescribedBy='Label Tour Eiffel' />
</@cSection>
<@cSection>
  <@cImg src='images/paul-dufour-5XndD3FhH-w-unsplash.png' alt='Tour Eiffel' labelDescribedBy='Label Tour Eiffel' showLabelDescribedBy=true />
</@cSection>
<@cSection>
  <@cImg src='images/paul-dufour-5XndD3FhH-w-unsplash.png' alt='Photo de la Tour Eiffel' class='img-fluid img-thumbnail rounded mx-auto d-block' />
</@cSection>

<div class="mb-m">
<img src="images/paul-dufour-5XndD3FhH-w-unsplash.png" alt="Tour Eiffel" class="img-fluid" aria-descridedby="descridedby_tour_eiffel" id="tour_eiffel">
<p id="descridedby_tour_eiffel" class="visually-hidden">Label Tour Eiffel</p>
</div>
<div class="mb-m">
<img src="images/paul-dufour-5XndD3FhH-w-unsplash.png" alt="Tour Eiffel" class="img-fluid" aria-descridedby="descridedby_tour_eiffel" id="tour_eiffel">
<p id="descridedby_tour_eiffel">Label Tour Eiffel</p>
</div>
<div class="mb-m">
<img src="images/paul-dufour-5XndD3FhH-w-unsplash.png" alt="Photo de la Tour Eiffel" class="img-fluid img-thumbnail rounded mx-auto d-block" id="photo_de_la_tour_eiffel">
</div>

Paramètres

Voici la liste des différents paramètres de la macro :

id (string) optionnal - identifiant unique de l'image
class (string) optionnal - classe(s) css de l'image
src (string) required - source du fichier image
alt (string) optionnal - texte alternatif de l'image
labelDescribedBy (string) optionnal - aria label de l'image
showLabelDescribedBy (boolean) required - si true, affiche le label saisi dans le paramètre "labelDescribedBy"
params (string) optionnal - permet d'ajouter des paramètres HTML à l'image

@cFigure

Exemple

<@cFigure caption='The Eiffel Tower'>
  <@cImg src='images/paul-dufour-5XndD3FhH-w-unsplash.png' title='Tour Eiffel' labelDescribedBy='Label Tour Eiffel' />
</@cFigure>
<@cFigure>
  <@cImg src='images/paul-dufour-5XndD3FhH-w-unsplash.png' title='Tour Eiffel' />
  <@cFigCaption class='text-primary'>La Tour Eiffel
</@cFigure>

<figure class="figure">
<!-- Warning : wrong or deprecated argument(s) : title, ... -->
<img src="images/paul-dufour-5XndD3FhH-w-unsplash.png" alt="" class="img-fluid">
<figcaption class="figure-caption">The Eiffel Tower</figcaption>
</figure>
<figure class="figure">
<!-- Warning : wrong or deprecated argument(s) : title, ... -->
<img src="images/paul-dufour-5XndD3FhH-w-unsplash.png" alt="" class="img-fluid">
<figcaption class="text-primary">
La Tour Eiffel</figcaption>
</figure>

Paramètres

Elément @cFigure (Figure)

Voici la liste des différents paramètres de la macro :

id (string) optionnal - identifiant unique de la figure
class (string) optionnal - classe(s) css de la figure
caption (string) optionnal - contenu de la balise "figcaption"
params (string) optionnal - permet d'ajouter des paramètres HTML à la figure

Elément @cFigCaption (figcaption)

Voici la liste des différents paramètres de la macro :

id (string) optionnal - identifiant unique du figCaption
class (string) optionnal - classe(s) css du figCaption
params (string) optionnal - permet d'ajouter des paramètres HTML au figCaption

@cPicture

Exemple

<@cText class='mb-m'>
<@cPicture>
<@cPictureSrc srcset='images/paul-dufour-5XndD3FhH-w-unsplash.png' media='(min-width: 800px)' />
<@cPictureSrc srcset='images/paul-dufour-5XndD3FhH-w-unsplash.png' media='(max-width: 799px)' />
    <@cImg src='images/paul-dufour-5XndD3FhH-w-unsplash.png' title='Tour Eiffel' />
</@cPicture>

<picture>
<source srcset="images/paul-dufour-5XndD3FhH-w-unsplash.png" media="(min-width: 800px)">
<source srcset="images/paul-dufour-5XndD3FhH-w-unsplash.png" media="(max-width: 799px)">
<!-- Warning : wrong or deprecated argument(s) : title, ... -->
<img src="images/paul-dufour-5XndD3FhH-w-unsplash.png" alt="" class="img-fluid">
</picture>

Paramètres

Elément @cPicture (Picture)

Voici la liste des différents paramètres de la macro :

id (string) optionnal - identifiant unique de la picture
class (string) optionnal - classe(s) css de la picture
params (string) optionnal - permet d'ajouter des paramètres HTML à la picture

Elément @cPictureSrc (Source)

Voici la liste des différents paramètres de la macro :

id (string) optionnal - identifiant unique de la source
class (string) optionnal - classe(s) css de la source
srcset (string) required - source de l'image
media (string) optionnal - Media Query
type (string) optionnal - type de ressource
params (string) optionnal - permet d'ajouter des paramètres HTML à la source

@parisIcon

Ajouter une icône dans vos templates ou contenu.

Par défaut le thème embarque un pack d'icônes spécifiques au site Paris.fr designé par la DICOM.

Si vous ne trouver pas d'icône dans celle proposées par le pack vous pouvez utiliser des icônes "Material Design" fournie par Google.

Un petit exemple d'utilisation de la macro @parisIcon :

user

agenda

fc

air-de-jeux-barre

material-diversity

<@parisIcon name='user' />
<@parisIcon name='agenda' />
<@parisIcon name='fc' />
<@parisIcon name='air-de-jeux-barre' /> <!-- Icône ajoutée dans fichier "themeparisfr_extra_icons_pack.ftl" -->
<@parisIcon name='material-diversity' /> <!-- Icône "Material" -https://fonts.google.com/icons- ajoutée dans fichier "themeparisfr_extra_icons_pack.ftl" -->

<div class="alert alert-outline alert-primary" role="status" >
<div class="alert-header">
<div class="alert-icon">
<svg class="paris-icon paris-icon-alert-info"data-mce-svg="paris-icon paris-icon-alert-info" aria-labelledby="paris-icon-alert-info-paris-title-100360307866721" focusable="false" role="img">
<title id="paris-icon-alert-info-paris-title-100360307866721">Information</title>
<use href="#paris-icon-alert-info"></use>
</svg></div>
<div class="alert-text ">
<p class="alert-title">
Par défaut le thème embarque un <a href="iconographie.html#section-parisicons">pack d'icônes spécifiques au site Paris.fr designé par la DICOM</a>.</p>
</div>
</div>
</div>
<p>
Si vous ne trouver pas d'icône dans celle proposées par le pack vous pouvez utiliser des icônes <a href="https://fonts.google.com/icons" target="_blank">"Material Design"</a> fournie par Google.</p>
<p>
Un petit exemple d'utilisation de la macro @parisIcon :</p>
<div class="row row-cols-6">
<div class="col ">
<div class="card ">
<div class="card-body">
<p class="text-center">
<svg class="paris-icon paris-icon-user copy-html main-color"data-mce-svg="paris-icon paris-icon-user" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-user" width="24" height="24"></use>
</svg></p>
<p class="text-center fs-6 truncate" style="--tw:100%">
user</p>
</div>
</div>
</div>
<div class="col ">
<div class="card ">
<div class="card-body">
<p class="text-center">
<svg class="paris-icon paris-icon-agenda copy-html main-color"data-mce-svg="paris-icon paris-icon-agenda" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-agenda" width="24" height="24"></use>
</svg></p>
<p class="text-center fs-6 truncate" style="--tw:100%">
agenda</p>
</div>
</div>
</div>
<div class="col ">
<div class="card ">
<div class="card-body">
<p class="text-center">
<svg class="paris-icon paris-icon-fc copy-html main-color"data-mce-svg="paris-icon paris-icon-fc" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-fc" width="24" height="24"></use>
</svg></p>
<p class="text-center fs-6 truncate" style="--tw:100%">
fc</p>
</div>
</div>
</div>
<div class="col ">
<div class="card ">
<div class="card-body">
<p class="text-center">
<svg class="paris-icon paris-icon-air-de-jeux-barre copy-html main-color"data-mce-svg="paris-icon paris-icon-air-de-jeux-barre" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-air-de-jeux-barre" width="24" height="24"></use>
</svg></p>
<p class="text-center fs-6 truncate" style="--tw:100%">
air-de-jeux-barre</p>
</div>
</div>
</div>
<div class="col ">
<div class="card ">
<div class="card-body">
<p class="text-center">
<svg class="paris-icon paris-icon-material-diversity copy-html main-color"data-mce-svg="paris-icon paris-icon-material-diversity" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-material-diversity" width="24" height="24"></use>
</svg></p>
<p class="text-center fs-6 truncate" style="--tw:100%">
material-diversity</p>
</div>
</div>
</div>
</div>

Paramètres

Par défaut les icônes héritent de la couleur donnée à leur parent HTML

Voici la liste des différents paramètres de la macro :

id (string) optionnal - identifiant unique de l'icône
class (string) optionnal - classe(s) css de l'icône
name (string) required - nom de l'icône, title
type (string) optionnal - type de l'icon pour l'accessibilité (défaut: "decorative", valeurs possibles: "decorative", "informative")
title (string) optionnal - titre de l'icône
useParams New 2.0.4 (string) optionnal - permet d'ajouter des paramètres HTML à la balise de l'icône
params (string) optionnal - permet d'ajouter des paramètres HTML à l'icône

Bibliothèque d'icones par défaut

Ajouter des icônes à votre application.

Vous pouvez ajouter des icônes, de préférence désignées par la DICOM, éventuellement "Material Design" et les ajouter aux icônes disponibles pour votre site.

Cette page permet de consulter et d'ajouter des icônes proposées par la DICOM pour le "Thème Paris.fr".

Plus d'informations

Comment ajouter des icônes proposées par la DICOM ?

Vous pouvez rechercher des icônes par nom, catégorie ou description, et les ajouter à votre panier pour les exporter au format SVG.

Pour exporter les icônes sélectionnées, cliquez sur le bouton "Exporter la sélection". Vous pouvez également vider le panier en cliquant sur "Vider le panier".

Les icônes sont classées par catégorie et peuvent être affichées en grille ou en liste.

Les icônes sont fournies au format SVG et peuvent être utilisées dans vos projets avec le thème Paris.fr.

Vous pouvez exporter le SVG individuellement ou générer un pack d'icônes qui sera placé dans un fichier nommé "themeparisfr_extra_icons_pack.ftl". Une fois le fichier téléchargé vous le mettrez dans votre projet de site sur votre repository (Gitlab généralement) dans l'arborescence suivante: "WEB-INF/templates/skin/site". Les icônes contenues dans le fichier seront alors dispobible pour inclusion avec la macro "@parisIcon".

<@parisIcon name='nomdemonicone' />

Le nom de l'icone est le nom défini dans l'id de vos "SVG", attribut id de la balise "symbol" en retirant le préfix "paris-icon-" par exemple :

Icône Air de jeux barre — Icône "Air de jeux barre" avec id "paris-icon-aire-de-jeux-barre"

<@parisIcon name='air-de-jeux-barre' />

Comment ajouter des icônes "Material Design" ?

Pour ajouter des icônes "Material Design", vous pouvez les rechercher sur la bibliothèque d'icônes "Material Design" de Google et les télécharger au format SVG. Ensuite, vous pouvez les ajouter à votre projet de la même manière que les icônes proposées par la DICOM.

Ajouter le contenu du svg dans le fichier "themeparisfr_extra_icons_pack.ftl" en suivant la même structure que pour les icônes DICOM.

Remplace les balises "svg" en balise "symbol", supprimer l'attribut "xmlns" et ajouter l'identifiant selon le modèle suivant : "paris-icon-{monidentifiant}". Par exemple "paris-icon-diversity"

Utilisez l'icône dans vos templates en utilisant la macro "@parisIcon" et en lui fournissant l'id défini dans le fichier "themeparisfr_extra_icons_pack.ftl". Par exemple "diversity".

Rechercher des icônes ( 0 ) :

Epaisseur du trait (0):

@cImg

Exemple

Extrait de code Macro

Extrait de code HTML

Paramètres

@cFigure

Exemple

Extrait de code Macro

Extrait de code HTML

Paramètres

@cPicture

Exemple

Extrait de code Macro

Extrait de code HTML

Paramètres

@parisIcon

Ajouter une icône dans vos templates ou contenu.

Extrait de code Macro

Extrait de code HTML

Paramètres

Bibliothèque d'icones par défaut

Ajouter des icônes à votre application.

Comment ajouter des icônes proposées par la DICOM ?

Comment ajouter des icônes "Material Design" ?

Icônes à exporter 0