Le plugin Easy Image Caption CK pour Joomla génère des légendes à partir du titre ou des attributs alt des images d'article et les affiche en dessous (ou au-dessus) des images. Un attribut optionnel data-copyright peut être utilisé pour afficher les informations de copyright ou de licence pour l'image à côté de la légende.
Exemples / Démo
Voici 3 exemples de la façon dont vous pouvez ajouter la légende à vos images en utilisant le plugin Joomla Easy Image Caption CK. Après la démo, vous obtiendrez le code HTML pour expliquer comment cela fonctionne, quel est le code original que vous devez mettre dans votre page et quel est le code rendu qui est traité par le plugin. Voici la démo pour voir à quoi ça ressemble :
Image by Bessi (pixabay.com) Demo image 1: This is the image caption, styled through the plugin parameter settings Demo image 2: Captions can also be placed above the image, with the copyright info below 
Image by David Bartus (pexels.com) 
Demo image 3: Captions may even include HTML code, i.e. a link to the image source or bold text. This caption is styled through external CSS.
Démo 1 HTML
<!-- Original code -->
<img src="images/sample-image-1.jpg" alt="sample image 1" width="40%" data-copyright="Image by Bessy (pixabay.com)" title="Demo image 1: This is the image caption, styled through the plugin parameter settings" />
<!-- After processing by Easy Image Caption CK, using style definitions from plugin parameters -->
<span class="easy_img_caption" style="display:inline-table;max-width:100%;box-sizing:border-box;vertical-align:top;background-color:#454F4D;padding:0px 0px 0px 0px;width:40%;margin:10px 20px 20px 0px;">
<img src="images/sample-image-1.jpg" alt="sample image 1" style="width:100%;margin:0;" data-copyright="Image by Bessy (pixabay.com)Démo 2 HTML
<!-- Original code -->
<img src="images/sample-image-2.jpg" alt="sample image 2" style="width:40%;margin:10px 0px 20px 0px;" data-copyright="Image by David Bartus (pexels.com)" title="Demo image 2: Captions can also be placed above the image, with the copyright info below" />
<!-- After processing by Easy Image Caption CKDémo 3 HTML
<!-- Original code -->
<img src="images/sample-image-3.jpg" alt="sample image 3" class="demo-img" title="Demo image 3: Captions may even include HTML code, i.e. a [url=https://www.deviantart.com/ld345/art/Beautiful-blur-bright-326055-785629211]link to the image source[/url] or [b]bold text[/b]. This caption is styled through external CSS." />
<!-- After processing by Easy Image Caption CK
Comment ça fonctionne
Easy Image Caption CK est prêt à l'emploi. Tout est automatique une fois le plugin activé.
Après l'installation via le gestionnaire d'extensions de Joomla, vous devrez l'activer. Ensuite, toutes les images de vos articles afficheront automatiquement des légendes sur les pages d'accueil si elles ont un titre ou un attribut alt. Vous pouvez cependant restreindre le fonctionnement à certaines images ou certains articles via les paramètres du plugin : appliquer dans le blog ou non, exclure l'article, appliquer uniquement sur les articles sélectionnés et plus encore.
Le code source généré est 100% valide HTML5 pour une compatibilité maximale du navigateur et une intégration fluide dans votre site web. Les légendes fonctionneront également sur les sites web responsive (selon votre template, vous devrez peut-être ajouter du CSS supplémentaire).
Les légendes peuvent être stylisées individuellement via le ou les fichiers CSS de votre template ou via les paramètres de style de base intégrés.
Comment puis-je ajouter du code HTML à mes légendes ?
Il n'est pas possible d'écrire des balises HTML directement dans les attributs de votre image. Mais vous pouvez utiliser des balises spéciales (similaires au BBCode) qui seront converties en balises HTML par Easy Image Caption CK. Le tableau suivant répertorie toutes les balises prises en charge.
Pour utiliser cette fonctionnalité, vous devez activer l'analyse des balises dans les paramètres du plugin.
| Formatting tag in caption | HTML output |
|---|---|
| [url]www.example.com[/url] | <a href="http://www.example.com">www.example.com</a> www.example.com |
| [url=www.example.com]Click here[/url] | <a href="http://www.example.com">Click here</a> Click here |
| [url2]www.example.com[/url2] | <a href="http://www.example.com" target="_blank">www.example.com</a> www.example.com |
| [url2=www.example.com]Click here[/url2] | <a href="http://www.example.com" target="_blank">Click here</a> Click here |
| [b]Bold example[/b] | <b>Bold example</b> Bold example |
| [i]Italic example[/i] | <i>Italic example</i> Italic example |
| [u]Underlined example[/u] | <u>Underlined example</u> Underlined example |
| First line[br]Next line | First line<br />Next line First line Next line |
*L'effet de [url] et [url2] peut être commuté dans les options du plugin.
Historique du plugin
C'est le fork, ou "reborn" du plugin EasyImageCaption pour Joomla de Thomas Römer. Il a décidé d'arrêter le développement de son plugin à Joomla 3. Certains utilisateurs ont demandé une renaissance de cette extension et JoomlaCK a décidé de le faire. Après avoir obtenu le consentement de l'auteur, ce plugin s'appelle désormais Easy Image Caption CK et a été développé pour être compatible avec Joomla 4.
Télécharger Easy Image Caption CK
News