Ajouter une ligne de texte dans un slide sous l'image

[Agrepe]

Bonjour,
Je fais une suite à mon post à propos de la personnalisation d'une scroll barre sur mon slider.

Un foreach alimente le contenu du slide.
Les images s'affichent correctement, mais j'aurai besoin d'ajouter du texte sous mes images.

Voici le foreach:

<div>    
    <?php foreach($ListAmis as $element){    
            {          
        $idAmis = $element;
        $nameAmis = JFactory::getUser($idAmis)->username;
        $FriendsIds=ES::user($idAmis);
        }
        ?>                         
                <a style="margin:10px 2px 10px 4px;border-radius:20%;" href="/fr/profil/<?php echo $idAmis;?>
                <?php echo '<img src="' . $FriendsIds->getAvatar(large) . '" style="border-radius:10px;height:148px;padding:2px;background:#fff;border:1px solid #d2d2d2;" />'; ?> 
                </a>

    <?php }  ?>            
</div>

j'ai tenté de déposer des passages à la ligne, des div ... mais à chaque fois les informations viennent de poser à côté et pas sous l'image.

Je joins ce que j'ai:




Et ce que je souhaiterai avoir.



Quelqu'un aurait-il une idée ?

Cordialement.

Eric

[lomart]

Bonjour,
Il faut sans doute créer des blocs parents qui contiennent l'image et la légende

https://www.w3schools.com/tags/tag_figcaption.asp

[Agrepe]

Bonjour Loïc,
J'y ai bien pensé, et même essayé, mais d'es que j'ajoute une balise, cela pose le texte à côté et pas en dessous.

Alors j'ai pensé reproduire la boucle (En faite deux boucles l'une après l'autre), cela fonctionne, mon problème maintenant est que la zone de texte fasse la même largeur que l'image.

J'ai fait:

<a style="display:block-inline;width:148px;text-align:center;padding:2px;"
                href="/fr/profil/<?php echo $idAmis;?><?php echo"-";?><?php echo $nameAmis; ?>" 

                <?php echo $nameAmis; ?>
                </a>

Mais je n'arrive pas à caler la largeur de la zone (148 px) qui accueille le texte.

Cordialement.

Eric

[lomart]

Mettre un max-width:148px ?

<figure style="display:block-inline;max-width:148px;text-align:center;padding:2px;">
  <a href="...." >
    <img src="..." alt="..." style="width:100%">
    <figcaption>le nom</figcaption>
  </a>
</figure>

non testé !