Comment gérer les images

Exemple d'image centrée

• css style img.centered

<p align="center">
  <img src="{{ base_url }}/images/trading_in_python.png" alt="Trading In Python" class="centered"/>
</p>

• css class noborder

<p align="center">
  <img src="{{ base_url }}/images/trading_in_python.png" alt="Trading In Python" class="noborder"/>
</p>

• css class noborder + tooltip

<p align="center" title="Ici le tooltip">
  <img src="{{ base_url }}/images/trading_in_python.png" alt="Trading In Python" class="noborder"/>
</p>

Description

img.noborder dans :

• \docs\css\extra.css

Type d'image le plus employé

Noter le sous-titre, pas cliquable si cela ne sert à rien

Figure 1 – Le style le plus employé

<figure style="text-align: center;" title="Ici le tooltip">
  <img src="{{ base_url }}/images/trading_in_python.png" class="noborder" width="600" />
  <figcaption><em>Figure 1 – Le style le plus employé</em></figcaption>
</figure>

Image Bouton

On clique et il y a un lien :

Figure 1 – Le style le plus employé

<figure style="text-align: center;">
  <a href="https://www.trading-et-data-analyses.com/p/plateforme-de-trading-technique.html" target="_blank" title="Palteforme de Tading Technique - Le Blog">
    <img src="{{ base_url }}/images/trading_in_python.png" class="noborder" width="450" />
    <figcaption><em>Figure 1 – Le style le plus employé</em></figcaption>
  </a>
</figure>

Image cliquable avec sous-tire et tooltip

Avec son lien elle devient cliquable :

Figure 1 – Cliquez pour agrandir

<figure style="text-align: center;">
  <a href="{{ base_url }}/images/trading_in_python.png" target="_blank" title="Titre de l'image">
    <img src="{{ base_url }}/images/trading_in_python.png" alt="Capture d'écran" class="centered" width="450" />
  </a>
  <figcaption><em>Figure 1 – Cliquez pour agrandir</em></figcaption>
</figure>

• css class noborder + tooltip

Figure 1 – Cliquez pour agrandir

<figure style="text-align: center;">
  <a href="{{ base_url }}/images/trading_in_python.png" target="_blank" title="Titre de l'image">
    <img src="{{ base_url }}/images/trading_in_python.png" alt="Capture d'écran" class="noborder" width="450" />
  </a>
  <figcaption><em>Figure 1 – Cliquez pour agrandir</em></figcaption>
</figure>

Images glightbox

Github glightbox

• Caroussel d'images
• Le comportement de la flèche du navigateur est différent

<a href="{{ base_url }}/images/trading_in_python_2.png" class="glightbox" data-gallery="galerie">
  <img src="{{ base_url }}/images/trading_in_python_2.png" alt="Image 2" width="200" />
</a>

Lightbox la plus utilisée

Figure 1 – Cliquez pour agrandir

<figure style="text-align: center;">
    <a href="{{ base_url }}/images/trading_in_python_2.png" class="glightbox" data-gallery="galerie" title="Titre de l'image">
        <img src="{{ base_url }}/images/trading_in_python_2.png" alt="Image 2" width="200" />
    </a>
    <figcaption><em>Figure 1 – Cliquez pour agrandir</em></figcaption>
</figure>

Test ultime

Figure 1 – Cliquez pour agrandir

Premiers tests

On va chercher l'image chez Googlg User Content

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiODEvTzbXj7c-ktOe-d3F0GOqrJlw1LrNt8vUZWihYKb1eKK8oxYmfJgFsKh83DtJMIhYc3n-oc8s7LA1-aQNhOI-_i_w-zKovaI9LP1NYi6brVSpAr3VGDTH8hHmq43iR1GuZCK0u3mKoZL3O6-T1w_7w86awVn3mEzoyOlHgXgPFKY28dt67QGFxZ1fi/w640-h336/2025-04-18_10h43_0811.png

• Image

• Image avec lien url

• html copié directement depuis blogger

TradingInPython - Plateforme de Trading en Python - Téléchargez gratuitement