Page 1 sur 1

Ajout de balises BBCode personnalisées

Posté : lun. 6 déc. 2021 à 14h45
par SlyRaider
Bonjour à tous,

Vous pouvez poster sur ce topic vos demandes concernant les balises BBCode.
:idea: Pour rappel, le BBCode est un langage simplifié utilisé sur les forums pour éviter de taper du HTML directement. Lorsque vous envoyez votre message, le forum se charge de transformer votre BBCode en code HTML afin que votre navigateur comprenne comment l'interpréter. Les navigateurs ne comprennent que le HTML, le CSS et le JavaScript, pas le BBCode.

Sur demande, j'ai ajouté deux nouvelles balises BBCode au-dessus de la zone de rédaction d'un message :


SPOILER : permet de masquer un contenu (texte, image, vidéo...).

Code : Tout sélectionner

[SPOILER]Ce texte sera masqué par défaut ![/SPOILER]
SPOILER :
Ce texte sera masqué par défaut !




YOUTUBE : permet d'afficher une vidéo YouTube.

Code : Tout sélectionner

[YOUTUBE]https://www.youtube.com/watch?v=WilmJhD1gkc[/YOUTUBE]




Et je viens de rajouter LIGNE pour simplement tracer une ligne. :up:

Code : Tout sélectionner

[LIGNE]

Re: Ajout de balises BBCode personnalisées

Posté : lun. 6 déc. 2021 à 19h05
par Chamayoo
Excellents ajouts ! :crazy3:

Re: Ajout de balises BBCode personnalisées

Posté : mar. 16 août 2022 à 18h05
par SlyRaider
De nouveaux ajouts ont été faits en BBCode, utilisez-les si cela vous intéresse ! :D
  • Barrer du texte
  • Centrer du contenu
  • Créer des tableaux
  • Poster une image avec une légende



Pour barrer du texte, très simple :

Code : Tout sélectionner

[BARRER]Ce texte est barré ![/BARRER]
Ce texte est barré !



Pour centrer du contenu, tout aussi simple :

Code : Tout sélectionner

[CENTRER]
 :pac:  :blank:  :blank: 
Ces smileys et ce texte sont centrés.
[/CENTRER]
:pac: :blank: :blank:
Ces smileys et ce texte sont centrés.



Pour créer un tableau, un poil plus complexe :

Code : Tout sélectionner

[TABLE]
    [TR]
        [TD][b]NOM COLONNE 1[/b][/TD]
        [TD][b]NOM COLONNE 2[/b][/TD]
        [TD][b]NOM COLONNE 3[/b][/TD]
    [/TR]
    [TR]
        [TD]Ligne 1 - Cellule 1[/TD]
        [TD]Ligne 1 - Cellule 2[/TD]
        [TD]Ligne 1 - Cellule 3[/TD]
    [/TR]
[/TABLE]
NOM COLONNE 1 NOM COLONNE 2 NOM COLONNE 3
Ligne 1 - Cellule 1 Ligne 1 - Cellule 2 Ligne 1 - Cellule 3



Pour poster une image avec une légende, utilisez FIG au lieu de IMG :

Code : Tout sélectionner

[FIG=Lien_Image]Texte_Légende[/FIG]
[FIG=https://forums.tombraidercie.com/images/forums/tr1.jpg]Tomb Raider I[/FIG]
Tomb Raider I

Re: Ajout de balises BBCode personnalisées

Posté : mar. 16 août 2022 à 18h21
par TimJ
Je viens de découvrir les balises youtube que je recherchais ce matin, super !

Re: Ajout de balises BBCode personnalisées

Posté : mar. 16 août 2022 à 18h27
par SlyRaider
Yep, j'en ai ajouté pas mal. N'hésitez pas à me demander si vous voulez des balises particulières. :)

Elles sont toutes affichées au-dessus de la zone de texte (en mode "Éditeur complet & Aperçu") :

Image

Des descriptions détaillées de l'utilisation des balises sont disponibles sur ce topic.

Re: Ajout de balises BBCode personnalisées

Posté : jeu. 21 sept. 2023 à 10h53
par Aurelius
SlyRaider a écrit : lun. 6 déc. 2021 à 14h45 Vous pouvez poster sur ce topic vos demandes concernant les balises BBCode.
Coucou !!

Suggestion (très) sympa

J'aimerais qu'il soit possible grâce à la balise img de définir un ratio pour afficher une image en petit (ou en tout cas comme on veut) grâce à son url sans avoir à passer par un hébergeur tiers.

Du genre (c'est un exemple arbitraire) :

Code : Tout sélectionner

[img=25]https//mon_image_4K/[/img]
Ce qui afficherait l'image avec une largeur maximum de 25% de la largeur de la fenêtre (ce qui est le + simple à coder à mon avis).

Code : Tout sélectionner

baliseCSS {
	max-width: 25%;
}
Ce qui ferait passer de ça : https://i.ibb.co/hDQ5vw8/image.png
à ça : https://i.ibb.co/rsJjjXP/image.png

Moi ça me changerait la vie si c'est possible :mrgreen:

En y réfléchissant un peu + ça peut poser de légers problèmes de responsive, donc on pourrait imaginer avoir plutôt un nombre de pixels pour le width (ex: img=250 pour width: 250px) avec un max-width: 100% par défaut (comme actuellement) pour être sûr que ça vienne pas gâcher la visualisation sur mobile et pour empêcher les abus (sans risquer de déformer des bannières sensées prendre la largeur). En imaginant qu'un img sans nombre ne change pas le comportement existant. Bref, je te laisse faire bien sûr comme tu veux si l'idée te convient !

Code : Tout sélectionner

baliseCSS_imgAvecNombreChoix_250 {
	width: 250px;
	max-width: 100%;
}

baliseCSS_imgParDefaut {
	width: auto;				
	max-width: 100%;
}
Ce qui reviendrait peut-être simplement à récupérer le contenu dans la balise (comme pour la balise url="") et à appliquer en JavaScript un truc du genre

Code : Tout sélectionner

imgDOM.style.width = choix ? "" + choix + "px" : "auto";
Merci !! :bravo3: :bravo3:

De plus, dans un tel cas, l'idéal serait d'automatiquement encadrer l'image par un lien vers l'image réelle dans un nouvel onglet (quoiqu'après ça empêche de l'encadrer avec un lien personnalisé... à voir, du coup... si tu veux t'amuser ça pourrait se faire via un bouton flottant sur l'image). Les utilisateurs avertis peuvent toujours faire clic droit / ouvrir l'image pour retrouver l'image entière, ou bien on fait le lien manuellement.

Par rapport à l'image mise en exemple, ça m'embêtait un peu d'externaliser la source (par rapport à son autrice) avant de voir que c'est le même problème sur TRForums (c'est de là d'où je l'ai prise donc je connais pas du tout la source en fait, et ça multiplie les versions des images en ligne inutilement)

Evidemment ça faciliterait aussi énormément le partage des screens (par exemple en prenant directement l'url des images stockées sur nos espaces personnels ou DVR)

Re: Ajout de balises BBCode personnalisées

Posté : jeu. 21 sept. 2023 à 21h30
par SlyRaider
Alors, la création de BBCode est quand même ultra limitée derrière. Mais j'ai mis en place un truc tout basique avec un attribut natif du HTML :

Code : Tout sélectionner

[mini=500]https://forums.tombraidercie.com/styles/lara-croft-go/theme/images/headerbar.jpg[/mini]


La valeur est exprimée en pixels. Si la largeur est trop large, un max-width: 100% est appliqué.

L'image est automatiquement entourée d'un lien permettant de l'ouvrir en taille réelle dans un nouvel onglet.

Je ne peux pas utiliser "img" car c'est une balise réservée de PhpBB et elle n'est pas modifiable. J'ai utilisé "mini" pour Miniature du coup, mais on peut changer.

Est-ce que ça te convient ? :)

Attention : Aujourd'hui, beaucoup de monde à la fibre, mais pensez que l'image s'affichera dans sa résolution d'origine (même si on choisit la taille, elle charge entièrement). Une image 4K pourrait prendre beaucoup de temps à charger et alourdir la page. Et s'il y en a plusieurs à charger, ça peut vite devenir compliqué sur un smartphone en 4G par exemple.

Re: Ajout de balises BBCode personnalisées

Posté : jeu. 21 sept. 2023 à 22h11
par Aurelius
Ah oui c'est parfait, merci beaucoup !!!
J'avais pas pensé au fait que ça puisse alourdir la page. Je vais l'utiliser avec parcimonie, pour afficher une image externe, mais pas pour mettre une vingtaine de screenshots ^^

En + ça marche avec les gif, ça c'est trop cool ^^

Re: Ajout de balises BBCode personnalisées

Posté : jeu. 21 sept. 2023 à 22h21
par SlyRaider
Nickel, je vais l'ajouter à la liste des BBCodes personnalisés sur ce topic. ^^

Re: Ajout de balises BBCode personnalisées

Posté : jeu. 21 sept. 2023 à 23h07
par Chamayoo
Super ! Ça vous nous faciliter le partage des images. :up:
Quelle serait la limite à ne pas dépasser, en terme de résolution ou pixels ? :)

Re: Ajout de balises BBCode personnalisées

Posté : ven. 22 sept. 2023 à 08h09
par Aurelius
SlyRaider a écrit : jeu. 21 sept. 2023 à 22h21 Nickel, je vais l'ajouter à la liste des BBCodes personnalisés sur ce topic. ^^
:bravo4: :bravo4: :bravo4:

Quelle serait la limite à ne pas dépasser, en terme de résolution ou pixels ? :)
La question est difficile car elle est différente selon si on parle de PNG/BMP ou d'un format compressé comme le JPG. Il faut s'en tenir au poids de l'image, c'est ce qui conditionne l'utilisation de la bande passante et la vitesse de chargement.

Mes screenshots Starfield à 1080p sont en PNG et font environ 3Mo. Je dirais qu'en 4G, on peut afficher 1 image comme ça en 1 seconde. Mais celui qui a 50Mo de forfait va vite morfler (mais bon, quelle idée de venir sur un forum si on a que 50Mo de forfait ^^ ). 10 images comme ça pourrait aller peut-être jusqu'à 10 secondes (parce qu'il y a tout le reste à gérer), ce qui est trop et grapille 30Mo de forfait...
Avec le même fichier en JPG compressé à 10%, je réduis 6x la taille donc 6x la vitesse théorique...
Avec une image 4K en PNG j'attends 8Mo, donc si on en aligne une dizaine, c'est vite la cata (temps d'affichage trop long et adieu forfait)

A vue de nez je dirais qu'il faut éviter de mettre + de 1 image 4K non compressée sur une même page, ou 4 images HD non compressées sur une même page et on peut monter à une vingtaine si elles sont compressées... (de façon générale il faut éviter qu'une page mette + de 5 secondes à s'afficher)

Après relativisons... tant qu'on fait pas ça de façon systématique pour partager une vingtaine de screens HD et que c'est pas sur toutes les pages du forum, ça devrait bien se passer :lol: Ca devrait poser aucun problème de partager quelques images promotionnelles vu que de toute façon elles sont généralement compressées par les réseaux sociaux.

Et beaucoup de forums de partage d'images rigoleraient bien de tout ça tant ils en ont rien à faire :lol: