• Image en lien.

    Lorsque l'on utilise l'icône "Image" pour publier ses images, le programme nous propose de choisir le format de l'image publiée dans l'article et une case permet d'ouvrir cette même image en plus grand, sur la même page.

    La photo agrandie en lien n'est affichée dans sa taille originale, malgré ce qui est écrit et elle s'affiche en fonction de la taille de votre écran: exemple:

    Je vais ouvrir l'icône "Image" et choisir une image de mes fichiers, de 4691x1080px; choix de la taille dans l'article: je vais prendre celui proposé (500x115px), pour simplifier et cocher la case ouvrir l'original au clic...

    Image en lien.

    Vous voyez ce que donne cette méthode en cliquant sur l'image affichée.

    Je vais ouvrir le code source ( icône <>) pour voir comment le programme a écrit ces paramètres:

     <p style="text-align: center;"><a href="http://ekladata.com/2-dsNuVQN-xNhwdHUQmf-BD3lfU.jpg"><img src="http://ekladata.com/2-dsNuVQN-xNhwdHUQmf-BD3lfU@500x115.jpg" alt="Image en lien." /></a></p>

    La taille de l'image affichée est de 500x115px, par l'écriture adresse@500x115.jpg.

    La taille de l'image est calculée en fonction de votre écran même si l'adresse correspond à une taille de 4691x1080px.

    Comment faire afficher cette image en lien dans sa taille d'origine ?

    Pour cela, l'affichage se fera dans une nouvelle page, ce que je trouve plus pratique puisque de toute manière, il faut cliquer sur la croix pour ne plus afficher l'image en lien.

    En reprenant le code source, nous allons pouvoir ajouter des décorations à l'image affichées: clic sur l'image ci-dessous puis clic sur l'image agrandie pour qu'elle s'affiche dans le format de votre image hébergée.

    <p style="text-align: center;"><a href="http://ekladata.com/2-dsNuVQN-xNhwdHUQmf-BD3lfU.jpg" target="_blank"><img style="width:60vw; border:0.4vh ridge white; box-shadow: 0.3vh 0.3vh 0.6vh black; border-radius:1vw;" src="http://ekladata.com/2-dsNuVQN-xNhwdHUQmf-BD3lfU.jpg" alt="Image en lien." /></a></p>

    Image en lien.

    Dans ce code modifié:

    target="_blank"  fait s'ouvrir l'image en lien dans une nouvelle page.

    style="width:60vw; donne une largeur de 60% de l'écran de lecture à notre image affichée, la hauteur est calculée automatiquement en fonction du ratio de votre image. Attention: l'adresse de l'image n'est plus paramétrée en @500x115 puisque la dimension est indiquée par width:60vw; ce qui permet d'utiliser des unités adaptatives et non fixes: 500 et 115 sont en pixels.

    border:0.4vh ridge white; donne une bordure de 0.4vh  d'épaisseur, en relief et blanche.

    box-shadow:0.3vh 0.3vh 0.6vh black; donne une ombre noire en bas et à droite, au flou de 0.6vh.

    border-radius:1vw; donne un arrondi régulier sur les 4 angles.

    Toutes ces valeurs sont en unités adaptatives ce qui les adapte à la résolution de l'écran de lecture.