HTML layer et Data Config

HTML layer

Cette option vous permet d'ajouter du contenu HTML au-dessus de chaque image.

1. Éditez ou créez une image.
2. Ajouter votre code HTML dans la zone de texte de l'option "HTML Layer".

Data config

Cette option vous permet également d'ajouter du contenu HTML et vous pouvez définir sa position dans la structure HTML de votre diaporama.

Exemple 1 : Chaque paragraphe est intégré en tant que description.

Exemple 2 : Chaque paragraphe est ajouté au-dessus de l'image.

Avec Contao

Étape 1 :
Dans les paramètres de votre galerie, ajoutez le code ci-dessous dans la zone de texte Data config :

dataConfig: function(img) {
    return {
        layer: $(img).next('p').html()
    }
}

Étape 2 :
Modifiez le modèle ce_galerie.html5 et ajoutez $pictures['dataConfig'] à la ligne 28 :

echo '<a href="'.$pictures['imageSRC'].'"><img src="'.$pictures['thumbnailSRC'].'" alt="'.$pictures['alt'].'" ' . ($pictures['alt'] ? 'data-description="'.$pictures['alt'].'" ' : '') . ($pictures['title'] ? 'data-title="'.$pictures['title'].'" ' : '') . ($pictures['imageUrl'] ? 'data-link="'.$pictures['imageUrl'].'" ' : '') . ($pictures['imageFullscreenSRC'] ? ' data-big="'.$pictures['imageFullscreenSRC'].'" ' : '') . ($pictures['layer'] ? 'data-layer="'.$pictures['layer'].'" ' : '') . '/>'.$pictures['dataConfig'].'</a>' . "\n";

La position de la variable dans la structure HTML doit concorder avec votre instruction en JavaScript $(img).next('p').html().

Étape 3 :

1. Éditez ou créez une image.
2. Dans la zone de texte de l'option "HTML with dataConfig", ajoutez votre code HTML.

Par exemple :

<p>A beautiful <strong>landscape</strong></p>