Page 1 sur 1

[TUTORIEL] Poster des images sur le forum avec ImgBB

Posté : 15 aou 2024 18:55
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



...

Re: [TUTORIEL] Poster des images sur le forum avec ImgBB

Posté : 15 aou 2024 19:44
par ScapO
Chapeau Monsieur chapeau !

Re: [TUTORIEL] Poster des images sur le forum avec ImgBB

Posté : 16 aou 2024 00:18
par Sharko
Y'en a un qui avait marre de modifier les messages ^^

Re: [TUTORIEL] Poster des images sur le forum avec ImgBB

Posté : 16 aou 2024 08:54
par LaDidi21
@Sharko :
On n'aura plus à le faire... quand les membres liront les tutos :pensive:

Re: [TUTORIEL] Poster des images sur le forum avec ImgBB

Posté : 16 aou 2024 13:34
par Sharko
Je croise les doigts pour vous ! :sweat:

Epinglez-le, pour qu'il reste toujours à portée de main...