Intégrer du contenu local

Intégrer des images

Images sans attributs

Code:

{{< img src="norway.jpg" >}}

Résultat:

Images avec les attributs height et width

Code:

{{< img src="norway.jpg" width="600" >}}

Résultat:

Code:

{{< img src="norway.jpg" height="400" >}}

Résultat:

Images centrée

Code:

{{< img src="parrot.jpg" width="400" align="center" >}}

Résultat:

Images aux bords arrondis

Code :

{{< img src="parrot.jpg" width="400" align="center" rounded="yes" >}}

Résultat :

Images avec l’attribut float

Code:

{{< img src="norway.jpg" height="200" float="right" rounded="yes" >}}

Lorem ipsum [...]

Résultat:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer quis erat in nulla accumsan facilisis. Ut dictum diam at odio posuere rutrum. Sed lobortis pharetra tempor. Integer in suscipit ligula. Phasellus ut tortor consectetur, sodales lectus fermentum, tempus ligula. Sed lacus mauris, viverra non eros ultrices, sollicitudin viverra tortor. Suspendisse potenti. Phasellus at malesuada elit. Integer sapien orci, faucibus quis tellus ut, posuere luctus magna.

Ut ut nisl id erat feugiat aliquam sit amet sed nisi. Fusce finibus justo id sem ultricies interdum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam sagittis nulla ac urna laoreet tincidunt. Aenean eu posuere risus, vitae commodo metus. Vivamus ultricies malesuada odio, ac hendrerit orci laoreet et. Sed et ante auctor, sagittis ante sit amet, pharetra justo. Nam tristique velit id metus blandit, vel suscipit velit congue. Aliquam pharetra cursus est, vel auctor dolor dictum sit amet. Donec non dui magna. Curabitur auctor nulla mi, non volutpat nisl malesuada vel. Ut quis ultrices nulla. Nunc euismod in velit vitae dignissim. Donec vestibulum nunc nec nunc tempus egestas.

Etiam lobortis magna gravida metus elementum sagittis. Nulla venenatis luctus leo, ac commodo ipsum aliquet vel. In fringilla euismod varius. Etiam cursus magna quis dictum vestibulum. In euismod vel dolor id blandit. Nam ultrices, tellus vel scelerisque sagittis, sem dui viverra urna, ut eleifend sem eros in velit. Mauris lobortis elementum accumsan. Ut semper rhoncus ante, ac commodo felis rhoncus nec. Vivamus vitae iaculis purus. Maecenas scelerisque ex et mauris faucibus, at egestas sem mattis. Nullam ac gravida dui, ut aliquet lorem. Nunc pulvinar, augue vitae dignissim feugiat, quam magna lacinia turpis, non molestie nisl mauris vel purus. Vestibulum tristique elementum lorem, sed imperdiet eros finibus non. In sit amet rutrum dolor, sit amet rhoncus mauris.

Images côte à côte

Code:

{{< split 50 50 >}}

{{< img src="norway.jpg" >}}

---

{{< img src="norway.jpg" >}}

{{< /split >}}

Résultat:

Image en thème sombre

Code :

{{< img src="transistor_geometry.svg" src_dark="transistor_geometry_dark.svg" width="800" align="center" >}}

Résultat :

Intégrer des images dans une ligne de texte

Il est possible d’intégrer des images dans une ligne de texte en utilisant le shortcode inline-icon. Les attributs width et height sont disponibles pour spécifier des images différentes pour les thèmes clair et sombre.

Code :

Intégrer un {{< inline-icon src="kitty.png" width="32" height="32" >}} dans son texte permet d'attendrir les lecteurs.

Résultat :
Intégrer un dans son texte permet d’attendrir les lecteurs.

Code :

Thème actuel : {{< inline-icon src="sun.png" src_dark="moon.png"  width="32" height="32"  >}}.

Résultat :
Thème actuel : .

Code :

Changer de thème en appuyant sur {{< inline-icon src="/icons/sun-svgrepo-com.svg" invertDark="true" >}} en haut de l'écran.

Résultat :
Changer de thème en appuyant sur en haut de l’écran.

Intégrer des Vidéos

Vidéos sans attributs

Code :

{{< video src="leaves.mp4"> >}}

Résultat :

Vidéos avec les attributs

Code :

{{< video src="leaves.mp4" width="500" align="center" rounded="yes"> >}}

Résultat :

Code:

{{< video src="leaves.mp4" height="200" float="right" rounded="yes" >}}

Lorem ipsum [...]

Résultat:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer quis erat in nulla accumsan facilisis. Ut dictum diam at odio posuere rutrum. Sed lobortis pharetra tempor. Integer in suscipit ligula. Phasellus ut tortor consectetur, sodales lectus fermentum, tempus ligula. Sed lacus mauris, viverra non eros ultrices, sollicitudin viverra tortor. Suspendisse potenti. Phasellus at malesuada elit. Integer sapien orci, faucibus quis tellus ut, posuere luctus magna.

Ut ut nisl id erat feugiat aliquam sit amet sed nisi. Fusce finibus justo id sem ultricies interdum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam sagittis nulla ac urna laoreet tincidunt. Aenean eu posuere risus, vitae commodo metus. Vivamus ultricies malesuada odio, ac hendrerit orci laoreet et. Sed et ante auctor, sagittis ante sit amet, pharetra justo. Nam tristique velit id metus blandit, vel suscipit velit congue. Aliquam pharetra cursus est, vel auctor dolor dictum sit amet. Donec non dui magna. Curabitur auctor nulla mi, non volutpat nisl malesuada vel. Ut quis ultrices nulla. Nunc euismod in velit vitae dignissim. Donec vestibulum nunc nec nunc tempus egestas.

Intégrer des PDF

Page de PDF intégrée

Code :

{{< embed-pdf src=ieee-conference-template.pdf page="2" >}}

Résultat :

PDF dans le lecteur intégré du navigateur

Code :

{{< frame-pdf src=ieee-conference-template.pdf page="2" width="100%" >}}

Résultat :