[TUTORIEL] Poster des images sur le forum avec ImgBB

Vous créez ou partagez un tutorial, postez-le ici !
Répondre
Avatar du membre
Auteur du sujet
Joselito
Modérateur
Modérateur
Messages : 4277
Enregistré le : il y a 11 ans

[TUTORIEL] Poster des images sur le forum avec ImgBB

Message par Joselito »

Comment poster une capture d'écran ou n'importe quelle image ?
Une fonctionnalité essentielle à laquelle renoncent parfois les nouveaux utilisateurs du forum.
  • Cliquer sur le lien "Hébergement images" dans la barre des menus du site
  • La page du site "imgbb.com" s'ouvre, cliquer sur "COMMENCER L'ENVOI"
  • Une boîte de dialogue Windows s'ouvre, choisir l'image à uploader depuis le PC, valider en cliquant sur "Ouvrir"
  • Retour au site "imgbb.com", dans la listbox "Suppression automatique des images" choisir "Pas d'autosuppression"
  • Cliquer sur "ENVOYER"
  • Dans la listbox "Codes d'intégration", choisir "Lien complet HTML"
  • Pour être à l'aise, recopier le lien proposé dans le Bloc-Notes (un bouton "COPIE" apparait au survol du lien avec la souris).

    Code : Tout sélectionner

    <a href="https://ibb.co/XXXXXXX"><img src="https://i.ibb.co/YYYYYYY/Nom_de_l'Image_Uploadée.png" alt="test-720x492" border="0" /></a>
  • Dans le lien, on repère 2 URL = texte placé entre guillemets et débutant par "https://..."
  • Recopier la seconde URL (sans les guillemets) dans l'éditeur de message du forum.
  • Encadrer l'URL avec les balises "image". Par exemple en sélectionnant le texte puis en cliquant sur l'icone "Insérer une image" parmi les outils de l'éditeur.

    Code : Tout sélectionner

    [img]https://i.ibb.co/XXXXXXX/Nom_de_l'Image_Uploadée.png[/img]
  • Cliquer sur "Aperçu"
  • Bingo ! Figure 1.


Un peu plus sioux.
Pour éviter les lourdeurs, la largeur maximale des images sur le forum est de 500 pixels (à confirmer par un admin), par conséquent les images plus larges sont redimensionnées et perdent en lisibilité.
En amont, imgbb redimensionne aussi la version accessible par la seconde URL, à 640 pixels tout en conservant l'originale.

Pour que l'image puisse s'afficher, indirectement, en taille originale :
  • Dans la listbox "Codes d'intégration", choisir "Lien complet BBCode"
  • Recopier le lien dans l'éditeur du forum, n'ajouter pas de balise.

    Code : Tout sélectionner

    [url=https://ibb.co/XXXXXXX][img]https://i.ibb.co/YYYYYYY/Nom_de_l'Image_Uploadée.png[/img][/url]
  • Le résultat est identique en apparence mais en cliquant sur l'image, une page "imgbb.com" s'ouvre et affiche l'image originale ainsi que les codes d'intégration. Cliquer sur la Figure 2.
  • Pour faire propre et n'afficher que l'image sur un fond noir, remplacer la première URL du lien BBCode par celle de l'image originale récupéré dans la page susmentionnée (clic droit + "Copier le lien de l'image"). Cliquer sur la Figure 3.

    Code : Tout sélectionner

    [url=https://i.ibb.co/ZZZZZZZ/Nom_de_l'Image_Uploadée.png][img]https://i.ibb.co/XXXXXXX/Nom_de_l'Image_Uploadée.png[/img][/url]


Exemple avec une image de 720 x 492 pixels.

Figure 1 Image

Figure 2 Image

Figure 3 Image


Pour finir, l'URL vers l'image réduite à 640 pixels de large par "imgbb.com" : https://i.ibb.co/zF77tK2/test-720x492.png



...
Avatar du membre
ScapO
Modérateur
Modérateur
Messages : 2981
Enregistré le : il y a 15 ans

Message par ScapO »

Chapeau Monsieur chapeau !
I won't take no prisoners, won't spare no lives
Nobody's putting up a fight
I got my bell, I'm gonna take you to hell
I'm gonna get you, Satan get you


--> Décryptage des liens du forum : ThiWeb Live
Avatar du membre
Sharko
Habitué
Habitué
Messages : 540
Enregistré le : il y a 15 ans
Localisation : Au milieu de l'eau

Message par Sharko »

Y'en a un qui avait marre de modifier les messages ^^
« Écouter est une politesse qu'un homme d'esprit fait souvent à un sot mais que celui-ci ne rend jamais »
Avatar du membre
LaDidi21
Modérateur
Modérateur
Messages : 13030
Enregistré le : il y a 15 ans

Message par LaDidi21 »

@Sharko :
On n'aura plus à le faire... quand les membres liront les tutos :pensive:

-> Décryptage des liens du forum : extension "ThiWeb Crypt / Decrypt"™ ou Thiweb Live <-

Avatar du membre
Sharko
Habitué
Habitué
Messages : 540
Enregistré le : il y a 15 ans
Localisation : Au milieu de l'eau

Message par Sharko »

Je croise les doigts pour vous ! :sweat:

Epinglez-le, pour qu'il reste toujours à portée de main...
« Écouter est une politesse qu'un homme d'esprit fait souvent à un sot mais que celui-ci ne rend jamais »
ourea65
Habitué
Habitué
Messages : 146
Enregistré le : il y a 2 ans
Localisation : France

Message par ourea65 »

@Joselito
Grand merci pour et les tuto-s.
Même si je le dis avec de ratard.
Répondre

Qui est en ligne

Utilisateurs parcourant ce forum : Aucun utilisateur enregistré et 0 invité