Ok

En poursuivant votre navigation sur ce site, vous acceptez l'utilisation de cookies. Ces derniers assurent le bon fonctionnement de nos services. En savoir plus.

10.06.2009

Insérer des images, pour que le moins souvent, ça l'affiche mal

Vous n'avez besoin de personne pour insérer une image dans une note, mais il peut tout de même être utile de faire le point sur les différentes méthodes disponibles. Dans de prochaines notes, nous aborderons l'affichage de galeries et autres collections d'images, sans qu'il s'agisse d'album ou de photoblog.

Vous n'avez pas mis longtemps à savoir insérer une image. Dans l'éditeur de notes, vous cliquez sur l'icône représentant un arbre dans un cadre, et la fenêtre suivante s'ouvre alors à vos yeux éblouis.

HF_ins_image.jpgLa plupart du temps vous "Choisissez un fichier" en cliquant sur le bouton "Parcourir..." pour explorer votre machine, vos supports mémoire, afin de récupérer la belle image.

Éventuellement, vous ajoutez des "Tags" pour faciliter la recherche. C'est ce qui permettra de faire remonter votre image, et donc votre note quand quelqu'un fait une recherche sur le portail Hautetfort.

Viennent ensuite les "Propriétés d'affichage" qui vous permettront d'aligner l'image et le texte alentour.


Vous devez indiquer la taille de l'image. Par défaut, l'image affichée dans la note sera au format "vignette". La largeur est programmée pour 150 pixels, et la hauteur sera calculée pour respecter l'échelle du fichier d'origine. Avec "petite" c'est 100 pixels de large, avec "moyenne" c'est 240 pixels, et avec "large" c'est 500 pixels.

La capture ci-dessus utilise la taille "personnalisée". Cela vous permet d'être plus précis dans le choix de la largeur, mais aussi de privilégier une hauteur déterminée pour laisser le calcul de la largeur au process de conversion.

N'oubliez pas de cocher "Afficher en grand dans une nouvelle fenêtre" si vous souhaitez que l'on accède à l'image dans sa taille d'origine.


Comment fonctionne l'insertion directe ?

HF_tableau_de_bord_fichiers.jpgQuand j'ai cliqué sur "valider", le fichier qui s'appelle "HF_ins_image.jpg" sur mon ordinateur a été chargé sur le serveur Hautetfort. Une copie a été convertie à la largeur "vignette", et a été enregistrée dans un sous-répertoire de media sur mon blog, avec un nom attribué automatiquement. Le nom d'orgine servira de "libellé" dans l'interface d'administration. Le fichier d'origine est lui même converti avant d'être lui aussi enregistré sous un nom séquentiel dans un sous-répertoire de media lui aussi.

L'intérêt de cette méthode réside évidemment dans la facilité de création d'une vignette, et la gestion du lien hypertexte permettant l'affichage das la taille d'origine.

La limite, me semble-t-il, c'est la gestion du nom du fichier, et la difficulté de ré-utiliser une image. Ce n'est pas impossible, il suffit de procéder par copier coller à partir de la note d'origine, mais encore faut-il se rappeler de son titre, etc.


L'insertion indirecte

Dans la capture ci-dessus, vous avez noté la présence d'un onglet "Depuis l'URL". Vous ne chargez plus un fichier sur votre serveur, mais vous appelez une image dont vous connaissez l'adresse précise. Rien ne vous empêche d'utiliser une image déjà présente sur votre blog.

Ainsi la capture a aussi été chargée dans le répertoire "images" dans le format d'origine.

Vous ne pourrez pas modifier la taille de l'image, ou attribuer des tags, à moins de rentrer dans le détail du code HTML. Si vous affichez une vignette, vous devrez vous-même créer un lien hypertexte pour aller vers la taille d'origine.

C'est donc plus lourd pour les réglages, mais plus facile à administrer dans vos répertoires. C'est à vous de connaître vos priorités.


Modifier l'affichage d'une image

LignePapilles.com_ajo-blanco.gifJ'ai utilisé la méthode d'insertion directe pour l'image ci-contre. Le code HTML dans la note est donc le suivant :

<p><a href="http://geemee.hautetfort.com/media/02/01/694032570.gif"
target="_blank"><img src="http://geemee.hautetfort.com/media/02/01/1422836958.gif"
id="media-1808553" alt="LignePapilles.com_ajo-blanco.gif"
style="border-width: 0pt; margin: 0.2em 1.4em 0.7em 0pt; float: right;" /></a><br /></p>

Rien ne nous empêche cependant d'affecter des paramètres de styles à l'affichage de l'image. Dans l'exemple ci-dessous, vous verrez que l'image est encadrée d'une bourdure double, et que la marge intérieure du cadre permet de voir un arrière plan lui-même rempli par une image en mosaïque.

Enfin, un titre a été attribué à l'image, qui s'affichera en info-bulle au survol.

LignePapilles.com_ajo-blanco.gif

En voici le code détaillé :

<p><a href="http://geemee.hautetfort.com/media/02/01/694032570.gif"
target="_blank">
<img src="http://geemee.hautetfort.com/media/02/01/1422836958.gif"
id="media-1808553" alt="LignePapilles.com_ajo-blanco.gif"
title="LignePapilles.com - Ajo Blanco"
style="border: 3px double #662600; margin: 0.2em 1.4em 0.7em 0pt;
padding: 5px;
background: transparent url(http://geemee.hautetfort.com/images/aspire/body-bg.jpg)
repeat scroll 0% 0%; float: right;" name="media-1808553" /></a></p>


Peut-on avoir des coins arrondis ?

Il semble que non. On peut toujours affecter ces paramètres au paragraphe qui contiendra l'image, mais les limites de la bordure seront celles du paragraphe, à moins de spécifier précisément les dimensions de la division. Cela commencerait à devenir compliqué à gérer.


Pourrait-on créer un style dans la CSS ?

Je ne suis pas certain qu'il soit possible d'affecter un élément de feuille de style à l'image seule. Et ce serait pourtant indispensable pour éviter les problème évoqués plus haut.


Nous verrons bientôt comment afficher des galeries d'images sur votre blog, sans que ces dernières n'y soient réellement.


Images extraites du blog de Lavande, www.lignepapilles.com

17:19 Écrit par Gee Mee dans Personnaliser son blog, Traitement d'image | Lien permanent | Commentaires (7) | Tags : insérer, image, border, bordure | |  del.icio.us | | Digg! Digg |  Facebook

Commentaires

haaaa le pb des coins arrondis... Je l'ai tant étudié. Y compris pour les colonnes...
Dans les prochaines versions des navigateurs, il est probable que ce soit enfin une fonction qui soit enfin aboutie. Dans l'immédiat seul un traitement de l'image au préalable est envisageable sérieusement. Pour ma part j'utilise un petit soft pour mac qui est picturesque qui me permet de petits effets dont je ne me sers pas tellement mais qui offre cette possibilité de faire des bords arrondis en deux temps trois mouvements.
Bien sûr ceux qui sont sur PC auront l'excellent (et gratuit) photofiltre, bien suffisant pour faire ce genre de petites (et plus grandes) choses.
Pour le paramétrage des photos sur Haut et fort dans le css, je pense qu'on doit pouvoir définir un style pour le cadre. En revanche je crains que cela ne s'applique sur toutes les images du blog y compris celles des colonnes ce qui là peut devenir gênant.

Écrit par : Lavande | 10.06.2009

Répondre à ce commentaire

Merci du commentaire Lavande.
Je ne connais pas le monde de la pomme, et je ne retrouve pas Photofiltre dans la liste des logiciels libres (ce qui ne veut pas dire qu'il n'est pas bon).
Des coins arrondis avec Gimp, ce n'est pas très compliqué. Il faut cocher l'option dans l'outil de sélection rectangulaire, régler l'angle, ajuster les dimensions. On coupe, pour coller sur un fond déjà prêt, ou on inverse la sélection pour appliquer une couleur, un motif ou gommer.
Pour l'intervention dans la CSS, il faut effectivement faire attention au niveau de hiérarchie, pour ne pas tout modifier sur le site.

Logiciels de graphisme libres » http://www.framasoft.net/rubrique166.html

Écrit par : Gee Mee | 11.06.2009

Répondre à ce commentaire

Voilà pour ceux que ça intéresse où télécharger photofiltre : http://photofiltre.free.fr/frames.htm
Chez Démolite les tuto pour utiliser l'outil sont aussi divers que variés ;-) http://www.demolitetuto.fr/?page_id=413

Écrit par : Lavande | 12.06.2009

Répondre à ce commentaire

Merci de ces précisions Lavande.
Impressionnant le nombre de tutoriels pour Photofiltre chez Demolitetuto !

Écrit par : Gee Mee | 19.06.2009

Voilà une note bien à propos pour... enchaîner sur la mienne à venir (quand?). Merci Gee Mee et Lavande

Écrit par : kielut | 19.06.2009

Répondre à ce commentaire

Le buffle est lent mais la terre est patiente. Nous saurons attendre Kielut. Et si jamais nous parlons de la même chose, sans doute nos différents points de vue permettront-ils à nos visiteurs de s'enrichir.
À bientôt.

Écrit par : Gee Mee | 19.06.2009

A propos du redimensionnement, attention à une chose : si votre image a été incorporée en vignette directement à partir de l'éditeur de notes, l'agrandir à l'aide des "poignées" ne servira pas à la rendre plus lisible ! En effet, cette méthode convertit l'image dans une dimension et donc une définition donnée, afin qu'elle soit juste lisible à la taille choisie.

Si vous vous rendez compte par exemple qu'un texte qui y figure n'est pas lisible, en l'agrandissant ainsi il sera toujours aussi flou. Dans ce cas-là, il est préférable de recommencer en choisissant "moyenne" ou plus, quitte à la réduire un petit peu ensuite. Attention j'ai dit "un petit peu", car elle pèsera aussi plus lourd, même si vous la réduisez : évitez donc de choisir une grande taille quand vous n'en avez pas besoin (cela alourdira le poids de votre blog inutilement).

Écrit par : See Mee | 20.06.2009

Répondre à ce commentaire

Les commentaires sont fermés.