Prévisualisation
Label Tour Eiffel
Label Tour Eiffel
Macro
<@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>
Html
<div class="my-5">
<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="sr-only">Label Tour Eiffel</p>
</div>
<div class="my-5">
<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="my-5">
<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>
Les paramètres
- @param - id - string - optional - identifiant unique de l'image
- @param - class - string - optional - classe(s) css de l'image
- @param - src - string - required - source du fichier image
- @param - alt - string - optional - texte alternatif de l'image
- @param - labelDescribedBy - string - optional - aria label de l'image
- @param - showLabelDescribedBy - boolean - required - si true, affiche le label saisi dans le paramètre "labelDescribedBy"
- @param - params - string - optional - permet d'ajouter des paramètres HTML à l'image
Prévisualisation
Macro
<@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</@cFigCaption>
</@cFigure>
Html
<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>
Elément @cFigure (Figure)
Les paramètres
- @param - id - string - optional - identifiant unique de la figure
- @param - class - string - optional - classe(s) css de la figure
- @param - caption - string - optional - contenu de la balise "figcaption"
- @param - params - string - optional - permet d'ajouter des paramètres HTML à la figure
Elément @cFigCaption (figcaption)
Les paramètres
- @param - id - string - optional - identifiant unique du figCaption
- @param - class - string - optional - classe(s) css du figCaption
- @param - params - string - optional - permet d'ajouter des paramètres HTML au figCaption
Prévisualisation
Macro
<p class="my-5">
<@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>
</p>
Html
<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>
Elément @cPicture (Picture)
Les paramètres
- @param - id - string - optional - identifiant unique de la picture
- @param - class - string - optional - classe(s) css de la picture
- @param - params - string - optional - permet d'ajouter des paramètres HTML à la picture
Elément @cPictureSrc (Source)
Les paramètres
- @param - id - string - optional - identifiant unique de la source
- @param - class - string - optional - classe(s) css de la source
- @param - srcset - string - required - source de l'image
- @param - media - string - optional - Media Query
- @param - type - string - optional - type de ressource
- @param - params - string - optional - permet d'ajouter des paramètres HTML à la source