Mettre des images sur le forum : mode d'emploi.

[tapache]

Voilà voilà. ^^ Comme on est sur un forum de dessin, quoi de plus normal que de vouloir afficher ses œuvres, n'est-ce pas ? Le problème se pose souvent pour les nouveaux : "comment je fais ?? 0_o' "
Donc, autant le faire une bonne fois pour toute. ^^

♦ Numériser un dessin papier
♦ Héberger l'image
♦ Afficher l'image sur le forum
♦ Image trop large pour le forum ?

Premièrement, il faut un dessin/une image/une œuvre d'art/une croûte/un gribouillon à afficher (rayez les mentions inutiles) ... J'imagine que tout le monde sait comment mettre une image papier sur un ordinateur ?... Bon, dans le doute, petit piqûre de rappel.

Comment numériser mon dessin ??
♦ Pour les veinards qui ont un scanner et Gimp :
- Ouvrir Gimp
- Menu "Fichier" => "Créer" => "Scanneur/appareil photo" . Normalement votre scanner est dans la liste, vous cliquez dessus, puis sur sélectionner, et vous vous laissez guider. ^^
- Une fois l'image dans Gimp, pensez à vérifier sa taille, les scanners sortent parfois des choses énormes. Un petit tour dans "Image" "Redimensionner l'image". Pour travailler, une largeur de 1000 pixel est (généralement) suffisante. Pour poster sur le forum, la largeur ne doit idéalement pas dépasser les 800px.

♦ Pour les autres, qui ont au moins un appareil photo :
- Prendre le dessin en photo (bon courage pour faire un minimum de reflets et d'ombres)
- Brancher l'appareil photo sur l'ordinateur
- Ouvrir la photo concernée avec Gimp.
- Comme pour le scan, faites attention à la taille de l'image... Vous pouvez aussi jouer avec les différents outils de gimp pour améliorer la qualité de l'image, ça aide parfois.

♦ Pour les malchanceux qui n'ont ni scanneur ni appareil photo : ... Trouvez un copain chez qui squatter !


C'est bien beau tout ça, mais comment je montre mon talent au monde entier ??
Voilà.Donc, on a notre image sur l'ordinateur, scannée ou faite directement en numérique. Maintenant, il faut la rendre accessible à tous, c'est à dire : la mettre sur le net !
Par chance, on a accès à de nombreux hébergeurs gratuits... à vous donc de faire votre choix. ^^ Personnellement, j'utilise Servimg, les explications seront donc faites pour cet hébergeur. ^^ (j'éditerai si des utilisateurs d'autres hébergeurs me font des impression d'écran adaptées et expliquent en quelques mots comment ça se passe chez leurs hébergeurs. ^^)

Le lien que j'ai mis plus haut (allez, je le remets pour le plaisir : Servimg ) vous amène normalement sur une page qui vous demande un email et un mot de passe. Normal, il faut s'inscrire. (c'est rapide, gratuit, et on ne se fait pas pourrir son adresse mail, je vous rassure. ^^) Une fois que c'est fait, on peut "uploader" (c'est à dire héberger sur internet) des images sur le site et surtout, les retrouver plus tard.
On arrive donc sur une page qui ressemble à ceci :



J'ai rajouté des numéros en rouge, pour pouvoir mieux expliquer.
1. : C'est par là que vous allez chercher votre image. En cliquant sur "Parcourir", il vous suffit d'aller là où vous avez enregistré votre image et de la sélectionner, le tour est joué ! (on peut aussi reprendre une image depuis une URL, c'est à dire une image qui est déjà sur le net)
2. : l'option pour redimensionner l'image. Pratique si on ne veut pas se faire de doublon (une haute qualité pour le plaisir des yeux perso', et une basse qualité pour le net), l'hébergeur réduira automatiquement votre image à la taille voulue, il suffit de dérouler. On peut même lui demander de ne pas redimensionner. ^^
3. : vous pouvez organiser comme vous le voulez vos images dans votre session Servimg et entre autre créer des catégories pour ranger vos dessins. par défaut, il n'y a pas de catégorie supplémentaire.
4. : C'est bon, tout est comme il faut ? Y'a plus qu'à envoyer l'image alors !!

Après avoir cliqué sur envoyer, suivant la taille de votre image, il faudra un certain temps pour que la page suivante s'affiche. On patiente gentiment sans stresser l'ordinateur...
Quand la page s'affiche enfin...
" Au secours c'est quoi tous ces codes bizarres ?! "
Pas de panique, on y vient !

Bon okay, mon image est sur internet. Je fais comment pour l'afficher maintenant ??
Rien de très compliqué, il suffit de choisir le bon code.

La page ressemble normalement à ça :


Une fois de plus, j'ai rajouté les numéros en rouge pour mieux expliquer.
1. : Image. Le code dans le cadre en-dessous est le lien vers la page Servimg affichant l'image. C'est donc le même lien que celui "Taille réelle" juste au-dessus, et il n'est d'aucune utilité sur un forum... enfin pas si on veut afficher l'image directement. Donc : on l'oublie !
2. : BBCode. Ah, là, ça devient un peu plus intéressant... (oui, le BBCode est le code utilisé sur a majorité des forums. Les curieux sont invités à aller consulter la page wikipedia sur le BBCode ) ... mais pas dans notre cas, pour de multiples raisons. le code dans le cadre sous "Miniature" affichera une petite image cliquable, qui amènera sur la page Servimg. On n'affiche donc pas directement notre image sur le forum. La deuxième, elle, affiche une grande image, cliquable, qui amènera elle aussi sur la page Servimg. On peut éventuellement prendre le code, mais il ne faudra pas le coller simplement dans le message.
3. : HTML. Aucun intérêt pour nous, la plupart des forums refusent le code HTML pour des raisons de sécurité et de stabilité de leurs pages. Pour information, ce code peut être utile si on veut insérer nos images sur une page web que l'on crée et code soi-même.
4. : Liens Directs. Enfin !! On a décroché le saint Graal... *0* Celui-là nous intéresse, surtout ici. C'est donc ce lien qui relie directement à l'image, et à l'image seule qu'on va copier, et utiliser par la suite.

Maintenant, direction le forum (c'est à dire ici...) et la boite de texte pour écrire un nouveau message... (au passage, si vous voulez afficher vos dessins, merci de faire un sujet dans la section Galeries)...
Allez courage j'ai presque fini de vous embêter avec mes explications à rallonge.

Il suffit de mettre dans son message, là où on veut que l'image apparaisse, le code suivant :

Code:

[spoiler][img]LienQueJeViensDeCopierSurMonHébergeur[/img][/spoiler]

En remplaçant bien évidemment "LienQueJeViensDeCopierSurMonHébergeur" par... le lien qu'on vient de copier sur l'hébergeur. ^^ (mais si, rappelez-vous, ce dont je parlais quelques lignes plus haut ! ^^ )

Eeet... Voilà.

(Je me permets de rappeler que, bien que je n'aie pas mis ici les images en spoiler pour un souci d'ergonomie, il est obligatoire de mettre les images à l'intérieur des balises [spoiler ][/spoiler ] )



Au secours ! Mon image est plus large que le fofo ! /éoè\

Eh oui, parfois ça arrive... Et c'est le drame ! (bon, peut-être pas à ce point, mais quand même ! c'est frustrant.

Imaginons donc que je veuille afficher cette image dans le forum :

Spoiler:

Argh ! ça ne rentre pas ! Je vais devoir la redimensionner, la réhéberger, me casser la tête et j'ai la fleeeeemme !
Eh bah NON ! \o/ C'est là qu'intervient le miracle du html !

Au lieu d'insérer mon image comme ceci :

Code:

[spoiler][img]lien-de-mon-image[/img][/spoiler]

Je vais l'insérer comme ceci :

Code:

[spoiler]<img src="lien-de-mon-image" width="100%">[/spoiler]

Ce qui donnera :

Spoiler:

Le secret de l'histoire, c'est le petit attribut "Width" de la balise img (avec des chevrons et non des crochets, en HTML) qui ajustera automatiquement la largeur de l'image à 100% de la largeur de son conteneur (autrement dit, à la largeur pil poil du forum !)
À ça on peut ajouter autour une petite balise url pour renvoyer vers le lien de l'image en taille réelle... ^^

[melpeintre]

voila qui est clair!! merci tap!!! super explications!!!

[tapache]

Mais de rien ! ;)

J'ai fait un petit ajout concernant la largeur des images... ce qui peut être utile quand on affiche des images depuis DA par exemple. ^^