• Ajouter automatiquement une légende aux images

    Voilà encore un tuto qui fait suite à une demande faite sur le forum officiel. Vous êtes plusieurs à vouloir mettre une légende sous vos images et ce, de manière simple. (Voir les exemples en bas de la page)

    Voilà qui est chose faite! Un petit script qui se chargera de faire le boulot pour vous, une classe affectée à l'image, le texte de légende et c'est parti mon kiki 

    Mise en place du script

    Voici le script à placer dans un module simple HTML de vos menus. Au risque de me répéter, il faut que le javascript soit activé sur votre compte pour que cela fonctionne.

    Par ailleurs, il fait appel à des fonctions de Mootools et est par conséquent fonctionnel sur les blogs Eklablog. Pour ceux qui souhaiteraient l'utiliser sur d'autres sites/blogs, il leur faudrait inclure les sources de Mootools.

    Fonctionnement du script

    Ce script encapsule votre balise img dans une div (classe content_imgbox) et ajoute une seconde div (txt_imgbox) dans laquelle est placée le contenu de la balise alt de votre image.

    Le script transforme le code de la page en faisant passer le code HTML de  l'état 1 à l'état 2 (voir ci-dessous)

    Etat 1
    Etat 2

     

    Application aux images

    Il vous suffit de rajouter la classe "imgbox"  et de renseigner le contenu de la balise alt de votre image.

    Vous pouvez le faire directement au niveau du code HTML ou alors comme ci-dessous en cliquant sur Insérer / Editer l'image

    Tapez votre légende dans Description de l'image Mettez la classe imgbox à la ligne Classe (Pour cela, cliquez sur la flèche puis sur Valeur)

    Mettez à jour et raffraichissez votre page.

    Donnez un Look avec le CSS

    Comme vous avez pu le constater plus haut, chacun des élément est accessible facilement pour modifier le css.

    La boite qui contient l'ensemble est accessible avec le sélecteur css .content_imgbox
    L'image, avec .content_imgbox img
    La zone de texte avec .txt_imgbox 

    Votre imagination fera le reste.....

    Allez, comme vous avez été très sage, je vous donne trois exemple de CSS.

     Résultat CSS Correspondant