[TUTO] Insérer des images, des vidéos ou des fichiers téléchargeables dans vos posts

Bonjour à tous

Ce tutoriel a pour vocation d'aider les nouveaux membres à insérer des images, vidéos et mettre des fichiers en ligne via les outils mis à disposition sur biblio3d.

I. Insérer une image déjà en ligne sur internet

1. En utilisant le BBcode

1.1 Il vous suffit d'ajouter

Code:

[img]...[/img]

Par exemple, si je prends cette imagehttps://static.pexels.com/photos/534164/pexels-photo-534164.jpeg , il faut écrire ceci :

Code:

[img]https://static.pexels.com/photos/534164/pexels-photo-534164.jpeg[/img]

1.2 Dans le cas où votre image est plus large que 800 px, réduisez-là pour éviter qu'elle dépasse du forum. Dans notre cas, l'image originale étant en résolution 1920x1080, elle est bien trop grande pour le forum (ayez pitié des utilisateurs avec un petit écran 17" ou utilisateurs de tablettes).



C'est pour cette raison qu'il est nécessaire de réduire la résolution à max 800 pixels de large. Par conséquent, la résolution de mon image devra être réduite proportionnellement à 800x 554 px pour un affichage optimal (attention, garder les proportions).

Pour ce faire, pas besoin de modifier l'image originale et la recharger. Il suffit d'ajouter (800px,554px) dans le BBcode comme suit :

Code:

[img(800px,554px)]https://static.pexels.com/photos/534164/pexels-photo-534164.jpeg[/img]

Et vous obtiendrez ceci :




1.3 (facultatif) Si vous voulez donner la possibilité aux visiteurs de voir l'image en pleine résolution, il faut ajouter un lien cliquable.
Récupérez le lien direct de l'image https://static.pexels.com/photos/534164/pexels-photo-534164.jpeg et ajoutez-le avec le code

Code:

[url=...]...[/url]

Code:

[url=https://static.pexels.com/photos/534164/pexels-photo-534164.jpeg][img(800px,554px)]https://static.pexels.com/photos/534164/pexels-photo-534164.jpeg[/img][/url]

Vous obtiendrez ceci :




2. En utilisant l'interface de rédaction

2.1 Cliquez sur le bouton "insérer image" de l'interface de rédaction.



Collez le lien de votre image et validez.


2.2 Pour redimensionner les images trop grandes, entrez une largeur de 800 et la hauteur en gardant les proportions originales (554 dans notre cas).

II. Insérer une image depuis votre ordinateur sur le web

La seule manière d'afficher une image depuis votre ordinateur sur un site, c'est de la rendre disponible en ligne via un hébergement. Pour ce faire, je vous propose d'utiliser www.imageupload.co.uk pour les raisons suivantes :
- pas d'inscription nécessaire
- très ergonomique (épuré, fonction glisser-déposer, ...)
- possibilité de charger plein d'images en une fois
- plein d'options

1.1 Pour commencer, faites glisser la ou les images depuis le Finder/explorateur vers la page imageupload.



1.2 Ensuite, cliquez sur "commencer l'envoi" et attendez la fin du chargement.

1.3 Une fois que c'est fait, le menu déroulant "Codes d'intégration" vous donne accès à une série d'applications différentes.

• Liens du visualisateur : génère un lien vers votre image, visualisable mais protégée contre l'enregistrement direct depuis le navigateur.
  
• Liens direct : génère un lien direct vers l'image, sans aucune interface.
  
• Codes HTML : pour ceux qui codent le HTML.
  
• Intégration BBCode : génère le BBCode qui permet d'afficher l'image en pleine résolution sur le forum.
  
• Lien BBCode original : génère le BBCode qui permet d'afficher l'image en pleine résolution sur le forum avec un lien cliquable vers l'image originale.
  
• Lien BBCode intermédiaire : génère le BBCode qui permet d'afficher l'image en en taille moyenne sur le forum avec un lien cliquable vers l'image originale. (conseillé)
  
  
• Lien BBCode miniature : génère le BBCode qui permet d'afficher l'image en petit sur le forum avec un lien cliquable vers l'image originale. (fortement conseillé)
  

Il ne vous reste plus qu'à copier/coller le code souhaité dans votre message sur le forum.

IV. Insérer une vidéo YouTube / Dailymotion

1. En utilisant le BBcode (YouTube)

1.1 Copier l'URL de la vidéo à partir du site YouTube / Dailymotion.

Dans mon exemple, je vais prendre cette vidéo YouTube : https://www.youtube.com/watch?v=XYSKjI3UmNw

L'identifiant de la vidéo est la partie de l'URL juste après "watch?v=".

1.2 Ajoutez le code

Code:

[youtube]...[/youtube]

Code:

[youtube]XYSKjI3UmNw[/youtube]

Pour obtenir :




2. En utilisant le BBcode (Dailymotion)

2.1 Même principe que pour pour YouTube, à la seule différence que l'identifiant de la vidéo est au début du lien.


3. Via l'interface de rédaction

3.1 Copier l'URL de la vidéo à partir du site YouTube / Dailymotion.

Dans mon exemple, je vais prendre cette vidéo Dailymotion: https://www.dailymotion.com/video/x21k108


3.2 Dans l'interface de rédaction de biblio3d, cliquez sur si vous partez de Youtube, ou si vous partez de Dailymotion.

Copiez le lien dans le dialogue qui s'ouvre et validez.

Il en résultera :

Code:

[dailymotion]x21k108[/dailymotion]

Et vous obtiendrez :

VI. Insérer un lien vers un fichier téléchargeable

1. Généralités

1.1 Un fichier ne peut être accessible via un lien de téléchargement que dans la mesure où il est hébergé en ligne. Certains hébergeurs ne garderont vos fichiers que pendant une durée déterminée à terme de laquelle votre fichier sera effacé du serveur, et par conséquent il ne restera plus qu'un lien "mort" complètement inutile. Si vous voulez que votre fichier soit accessible dans la durée, assurez-vous donc que l'hébergeur ne le supprimera pas !

1.2 Les fichiers ainsi hébergés ne peuvent être chargés que un par un. Il n'est donc pas possible d'héberger un dossier car il peut contenir plusieurs fichiers. Il est cependant possible d'archiver ce dossier pour ne faire un seul fichier archive ZIP, RAR (conseillé) ou éventuellement un conteneur ISO, DMG, ...

Pour ce faire, faites un clic droit sur le dossier que vous souhaitez archiver et explorez le menu contextuel pour y parvenir.


2. Charger un fichier depuis bilio3d

2.1 Vous trouverez le plugin "joindre un fichier" juste en-dessous de l'interface de rédaction de message.



2.2 Parcourez et envoyez votre fichier. Une fois chargé, votre fichier sera lié à votre message en tant que pièce jointe.


3. Autres solutions gratuites d'hébergement

Il existe de nombreuses solutions payantes et gratuites pour héberger des fichiers. La liste ci-dessous ne reprend que des solutions gratuites (avec possibilité d'upgrade vers un compte payant). Cette liste est non exhaustive.

3.1 Mise en ligne directe sans compte :

https://www.wetransfer.com/
- Taille de fichier max 2 Go
- lien désactivé après 7 jours

http://www.megashares.com/
- possibilité de protéger les fichiers par mot de passe

http://dl.free.fr/
- lien désactivé après 30 jours
- possibilité de supprimer le fichier en ligne
- possibilité de protéger le fichier par mot de passe

http://www.sendspace.com/
- taille de fichier max 300 Mo


3.2 Mise en ligne via compte utilisateur :

https://www.archive-host.com/
- ... (pas testé)

http://beta.localhostr.com/
- ... (pas testé)

http://www.box.net/
- ... (pas testé)


3.3 Stockage en ligne via Cloud Computing

https://www.dropbox.com/
- nécessite un compte dropbox
- pas de limitation quant à la taille des fichiers, mais avec un nouveau compte gratuit, vous êtes limité à un espace de stockage en ligne de 2 Go au total
- pas de limitation quant à la durée, sauf si vous supprimez le fichier de votre compte pour faire de la place
- possibilité de supprimer le fichier en ligne

https://drive.google.com
- nécessite un compte google (gmail, ...)
- pas de limitation quant à la taille des fichiers, mais vous êtes limité à un espace de stockage en ligne de 15 Go au total
- pas de limitation quant à la durée, sauf si vous supprimez le fichier de votre compte pour faire de la place
- possibilité de supprimer le fichier en ligne

https://www.icloud.com/
- nécessite un compte Apple (apple, mac, itunes, ...)
- ... (pas testé)

https://onedrive.live.com/
- nécessite un compte Microsoft (MSN, hotmail, live, outlook, ...)
- pas de limitation quant à la taille des fichiers, mais vous êtes limité à un espace de stockage en ligne de 15 Go au total
- pas de limitation quant à la durée, sauf si vous supprimez le fichier de votre compte pour faire de la place
- possibilité de supprimer le fichier en ligne