• Orthorexique 1

    Une demande de renseignements sur un code  d'agrandissement d'images, par un blogueuse que est une experte en texte mais moins en image, m'amène à revenir sur des bases avant de proposer le code final.

    1er point: avoir un blog assez large pour proposer des montages assez lisibles.

    2 ème point: savoir héberger et récupérer les adresses de vos images, de préférence sur Ekla.

    3 ème point: savoir dimensionner une image à partir de son adresse.

    4 ème point: savoir comment écrire un code html/CSS en code-source (icône<>).

    5 ème point: de préférence, savoir utiliser les unités adaptatives.

    6 ème point: Utiliser les attributs pour modifier l'apparence de votre image. (voir autre page car sujet trop vaste)

    7 ème point: Ecrire les codes CSS qui vont vous permettre des animations (survol, clic).(voir autre page car sujet trop vaste)



    1/ Paramétrer la largeur de votre blog Ekla:

    L'onglet:Apparence/modifier le thème vous propose de définir les valeurs de structure de votre page de blog.

    La largeur de la page de "Format de blog" propose plusieurs unités (flèche déroulante de la case); il est préférable de choisir 100% de façon à ce que votre blog remplisse la totalité de la largeur de l'écran de votre visiteur, quelle que soit celle-ci.

    Le choix des colonnes latérales (menu 1) ou non , à droite ou à gauche, des marges qui vont définir la largeur de votre zone article (Contenu): largeur blog-largeur menu1=largeur contenu.

    La largeur de Contenu est celle dont vous allez tenir compte pour la largeur des montages.



    2/ Héberger vos images et récupérer leurs adresses.

    Le plus simple, à mon avis, est de créer un ou des galeries (album photos), par l'onglet Contenu/nouvelle galerie.

    Comme ces galeries s'affichent dans l'ordre alphabétique et dans l'ordre numérique croissant, je vous conseille, pour avoir toujours en première ligne, la dernière galerie créee, de nommer votre première galerie du genre:z50, la seconde par z49, la troisième par z48, etc; ainsi, la première en haut de liste sera la dernière créée.

    Une fois créée et nommée, vous avez une case:Editer, qui vous ouvre vos fichiers; à vous d'aller chercher celui de vos images à héberger.

    L'hébergement peut se faire pour une image ou plusieurs, avec un maximum de poids de 10 Mo; pour héberger un image, la sélectionner dans votre fichier et l'envoyer, dans le format de votre appareil photo, sans trop vous casser la tête pour en réduire le poids (pour le moment !)

    Pour héberger plusieurs images à la fois, sélectionnez la première (qui s'illumine), maintenez la touche clavier Ctrl enfoncée et sélectionnez vos autres images à héberger (<10Mo).

    Dans chaque galerie, vous trouvez un onglet: Options qui vous permet de définir le nombre de vignettes par ligne, leur taille. Pour ma part, je suis à 10 vignettes par ligne dans le format par défaut.

    Lorsque vous avez hébergé vos images et que leurs vignettes s'affichent, clic gauche sur une vignette pour l'afficher en grand; clic droit dessus et choisir: "Copier l'adresse de l'image".

    Cette adresse est à copier dans une feuille de bloc-note et surtout pas dans une feuille de traitement de texte qui va rendre illisible cette adresse par le code-source; il en est de même pour les codes html/CSS de vos montages.



    3/ Dimensionner vos images hébergées.

    Si vous cliquez droit sur une vignette/copier l'adresse de l'image, vous obtiendrez quelque chose comme ça:

    http://ekladata.com/KyNI4ScM1D1A0C03WccM7FrUySE@100x100.jpg

    Si vous cliquez gauche sur une vignette, pour l'afficher en grand puis clic droit sur l'image agrandie/copier l'adresse de l'image, vous obtiendrez quelque chose comme ça:

    http://ekladata.com/KyNI4ScM1D1A0C03WccM7FrUySE.jpg

    Comme vous le voyez, l'adresse est la même mais la taille de la vignette est définie par l'ajout de @100x100

    Cette écriture va vous permettre de définir la taille de votre image et d'en réduire le poids dans votre article.

    Ces valeurs sont en pixels: @ largeurxhauteur   Vos image ayant un rapport largeur/hauteur (ratio) bien défini, attention de bien le conserver pour ne pas déformer vos images.

    Les ratios actuels sont plutôt 16/9 ou 16/10 et les anciens 4/3, selon l'évolution des écrans (PC, télé, téléphone...)

    Dans mon exemple, mon image hébergée mesure 1920px par 1080px (réglage de mon appareil photo); si je veux afficher mon image, dans mon blog, en 800px par 450px, je vais écrire son adresse:

    http://ekladata.com/KyNI4ScM1D1A0C03WccM7FrUySE@800x450.jpg



    4/ Ouvrir la fenêtre code-source:

    Votre zone article d'article ne sait lire que du texte, le code source sait lire du texte mais aussi les codes HTML et CSS, dont les adresses de vos images ... et de vos codes montage.

    Ainsi, si vous écrivez le code <img src="http://ekladata.com/KyNI4ScM1D1A0C03WccM7FrUySE@800x450.jpg"> dans la zone article, vous obiendrez la même écriture.

    Si vous écrivez le code en fenêtre code-source (<>), vous obiendrez:

    Pour un code de montage, je vous conseille de commencer par un code fourni, chez moi ou ailleurs sur le net, et de le bricoler à partir de cette base.



     

     5/ Les unités adaptatives:

    L'intérêt n'est pas pour vous mais pour le visiteur qui utilise un média de résolution variable: l'affichage se fera selon son média et il verra la même chose que vous (ou adaptée).

    Pour ma part, j'utilise des unités viewport, acceptées par la plupart des navigateurs et qui sont acceptées dans tous les attributs, contrairement au %.

    Une unité viewport peut avoir 2 valeurs:

    — soit en prenant en référence la largeur de l'écran de lecture: vw -> viewport width et 1% de la largeur de l'écran de lecture.

    — soit en prenant en référence la hauteur de l'écran de lecture: vh -> viewport height et 1% de la hauteur de l'écran de lecture.

    Mon écran mesurant 1920px par 1080px (résolution); 1vw=1% de 1920px=19.2px et 1vh=1% de 1080px=10.8px.

    Vous pouvez utiliser des décimales de ces valeurs: 0.1vw=1.92px ...

     

    Vous pouvez utiliser les 2 ou n'en utiliser qu'une (c'est mon choix, dans la plupart des cas).

    Avec 2 valeurs et considérant que votre écran est au ratio 16/9, si vous écrivez: width:20vw; height:20vh;

    Avec 1 valeur, il vous faut calculer selon le ratio de votre image: ex, en 16/9: width:16vw; height:9vw/width:8vw; height:4.5vw/width:12vw; height:6.75vw...



    Les deux derniers points mentionnés sont trop vastes pour être traités sur cette déjà longue page.