Un contenu riche

Jake G mai 15, 2021 #Features #Video #Audio #Images #Shortcodes

Features (Series)
Notation mathématiques
Streamable intégrées
Vimeo intégrées
Youtube intégrées
Code court Showdata
Un contenu riche
Codes courts d'image
Markdown et Style
Blocs de code et thème
Thème Zola Abridge

Plusieurs shortcodes personnalisés sont inclus pour améliorer CommonMark. video les shortcodes image, gif et audio ont été créés pour vous aider à tirer parti des éléments HTML modernes dans vos écrits.

Vidéo

sources est un tableau de chemins d'accès aux fichiers vidéo. (obligatoire)
class définit une classe pour la vidéo.
caption définit le texte de la légende sous la vidéo.
w définit la largeur de la vidéo.
h définit la hauteur de la vidéo.
autoplay lorsque cette option est activée, la vidéo s'affiche automatiquement au chargement.
loop lorsque cette option est activée, la vidéo est lue en boucle.
muted lorsque cette option est activée, le son est initialement coupé.
playsinline lorsque cette option est activée, la vidéo est lue en mode intégré plutôt qu'en mode plein écran sur les navigateurs mobiles.

les sources peuvent être le même chemin, le chemin relatif ou le chemin racine, comme le shortcode img

Classes optionnelles :

ci peut être utilisé pour centrer l'image.
fr peut être utilisé pour faire flotter l'image à droite.
fl peut être utilisé pour faire flotter l'image à gauche.
b1 peut être utilisé pour ajouter une bordure de 1px.

Utilisation

{{ video(sources=["over9000_av1.mp4", "over9000_vp9.webm"]) }}

Sortie

<video controls>
  <source src="over9000_av1.mp4" type="video/mp4" />
  <source src="over9000_vp9.webm" type="video/webm" />
  Your browser doesn't support the video tag and/or the video formats in use here – sorry!
</video>

Utilisation

{{ video(sources=["over9000_av1.mp4", "over9000_vp9.webm"] muted="true" class="ci b1" caption="It's Over 9000!!") }}

Sortie

<figure class="fi ci b1"><video controls class="ci b1" muted>
  <source src="over9000_av1.mp4" type="video/mp4" />
  <source src="over9000_vp9.webm" type="video/webm" />
  Your browser doesn't support the video tag and/or the video formats in use here – sorry!
</video><figcaption>It&#x27;s Over 9000!!</figcaption></figure>

It's Over 9000!!

Image

Le shortcode image renvoie une balise <picture> avec plusieurs sources.

Chaque chaîne du tableau sources doit être un chemin vers un fichier image d'un type différent (avif, webp, png, jpg, etc). La dernière image du tableau sources est utilisée pour créer une balise <img> sur laquelle le navigateur peut se rabattre si les autres formats ne sont pas encore pris en charge.

sources est un tableau de chemins d'accès aux fichiers d'images. (obligatoire)
class définit une classe pour l'image.
caption définit le texte de la légende sous l'image.
w définit la largeur de l'image.
h définit la hauteur de l'image.

les sources peuvent être le même chemin, le chemin relatif ou le chemin racine, comme le shortcode img

Classes optionnelles :

ci peut être utilisé pour centrer l'image.
fr peut être utilisé pour faire flotter l'image à droite.
fl peut être utilisé pour faire flotter l'image à gauche.
b1 peut être utilisé pour ajouter une bordure de 1px.

Utilisation

{{ image(sources=["over9000-960.avif", "over9000-640.avif", "over9000-400.avif", "over9000-640.webp"] w=640 h=480 alt="ITS OVER 9000!") }}

Sortie

<picture>
  <source srcset="over9000-960.avif" type="image/avif" />
  <source srcset="over9000-640.avif" type="image/avif" />
  <source srcset="over9000-400.avif" type="image/avif" />
  <img src="over9000-640.webp" alt="ITS OVER 9000!" width="640" height="480" loading="lazy" />
</picture>

GIF

Le shortcode gif est exactement le même que le shortcode vidéo. La seule différence est qu'il possède automatiquement les propriétés supplémentaires : autoplay, loop, muted, playsinline.

L'utilisation de la balise <video> à la place des gifs permet de réduire la taille des fichiers, , ce qui est particulièrement important dans les régions où l'internet est plus lent ou moins fiable.

Utilisation

{{ gif(sources=["over9000_av1.mp4", "over9000_vp9.webm"]) }}

Sortie

<video controls autoplay loop muted playsinline>
  <source src="over9000_av1.mp4" type="video/mp4" />
  <source src="over9000_vp9.webm" type="video/webm" />
  Your browser doesn't support the video tag and/or the video formats in use here – sorry!
</video>

Audio

Le shortcode audio prend un tableau de chaînes sources et renvoie une balise <audio>. Chaque chaîne du tableau sources doit être un chemin vers un fichier audio d'un type différent (ogg, mp3, flac, wav, etc). Le navigateur lira le premier type qu'il prend en charge, donc les placer dans l'ordre de la taille la plus petite à la plus grande utilisera le moins de bande passante si c'est votre objectif.

sources est un tableau de chemins d'accès aux fichiers. (obligatoire)
class définit une classe pour l'audio.
caption définit le texte de la légende sous l'audio.
autoplay lorsque cette option est activée, l'audio s'affiche automatiquement au chargement.
loop lorsque cette option est activée, l'audio est lu en boucle.
muted lorsqu'il est défini, met l'audio en sourdine au départ.

les sources peuvent être le même chemin, un chemin relatif ou le chemin de la racine, comme le shortcode img

Classes optionnelles :

ci peut être utilisé pour centrer l'image.
fr peut être utilisé pour faire flotter l'image à droite.
fl peut être utilisé pour faire flotter l'image à gauche.
b1 peut être utilisé pour ajouter une bordure de 1px.

Utilisation

{{ audio(sources=["over9000.ogg", "over9000.mp3", "over9000.flac", "over9000.wav"]) }}

Sortie

<audio controls>
  <source src="over9000.ogg" type="audio/ogg" />
  <source src="over9000.mp3" type="audio/mp3" />
  <source src="over9000.flac" type="audio/flac" />
  <source src="over9000.wav" type="audio/wav" />
  Your browser doesn't support the audio tag and/or the audio formats in use here – sorry!
</audio>

Utilisation

{{ audio(sources=["over9000.ogg", "over9000.mp3", "over9000.flac", "over9000.wav"] class="ci b1" caption="It's Over 9000!!") }}

Sortie

<figure class="fi ci b1"><audio controls class="ci b1">
  <source src="over9000.ogg" type="audio/ogg" />
  <source src="over9000.mp3" type="audio/mp3" />
  <source src="over9000.flac" type="audio/flac" />
  <source src="over9000.wav" type="audio/wav" />
  Your browser doesn't support the audio tag and/or the audio formats in use here – sorry!
</audio><figcaption>It&#x27;s Over 9000!!</figcaption></figure>

It's Over 9000!!