Création et utilisation des sprite BBCODE sur RealityGaming

1899

1899

Ancien staff
Inscription
10 Août 2012
Messages
9 798
Réactions
4 482
Points
29 037
header.png

Bonjour à tous, bienvenue dans ce tutoriel où je vais vous apprendre l'utilisation des balises sprite BBCODE .

djamel7.png

Qu'est ce que le sprite BBCODE ?

Le sprite BBCODE est une balise permettant de choisir la zone à afficher sur une image et vous servira également à outrepasser la limite de 25 images dans un topic. De ce fait, vos topics peuvent être uniquement constitué d'images sans vous soucier pour autant de cette limite, de plus vos images ne pourront pas être récupéré par les gens, sauf si l'utilisateur fouille dans les ressources de la page.

Une petite démonstration ?

Voici mon image que je souhaite afficher avec du sprite :
Sans-titre-1.png

Voici le rendu maintenant avec l'utilisation des balises sprite :
Bonjour
, ceci est un
texte d'exemple
pour vous montrer
l'utilisation d'un sprite
BBCODE sur RealityGaming
. Ceci est vraiment
très utile pour réaliser
de beau topic.

Vous commencez à comprendre l'utilité d'un sprite BBCODE ?

Comment faire les sprite BBCODE

Commencez par créer un dossier où vous y mettrez toutes vos images que vous souhaitez afficher sous forme de sprite :
1cbf4533785642f49c16790b36d0299b.png


Une fois fait, rendez vous sur
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.
et cliquez sur le bouton Open à gauche. Une fois fait, sélectionnez votre fichier et sélectionnez toutes vos images contenu dans ce même fichier.
Vos images s'afficherons juste en dessous, maintenant passons à la configuration du sprite !
bb3f8e1e1a54481fb90a8cf900785db3.png


Layout : sélectionnez l'affichage qu'il vous convient, verticale, horizontale ou compacte (ce que j'utilise).
CSS/LESS : cela n'a pas vraiment d'importance, on retrouve ce qui nous intéresse dans les deux choix.
Style prefix : c'est pas utile dans notre tutoriel, c'est pour définir le nom de la class en CSS.
Padding : c'est l'espacement entre les images, j'ai choisi 0 afin d'être plus précis (dans ce cas, aucun espacement n'est ajouté).
Data URL : inutile, c'est un créer une URL data.

Une fois vos paramètres effectués, cliquez sur Save et sur Download en haut et ne fermez pas le site, vous en aurez encore besoin.
Votre image créée se téléchargera , il ne vous reste plus qu'à la mettre en ligne en utilisant "Transférer un fichier" lors de la création d'un topic. C'est très important de ne pas rater cette étape sinon vous risquerez de rencontrer quelques problèmes.

Une fois votre image mise en ligne, trouvez l'ID de votre image, pour ma part l'ID de mon sprite est 91939.
https://reality-gaming.fr/attachments/spritesheet-3-png.91939/

Maintenant, passons à l'intégration de votre sprite :
Retournez sur le site, et allez dans la catégorie CSS où vous retrouverez les lignes de code CSS .​
Code: 
.sprite-carr_ {
    width: 27px;
    height: 27px;
    background-position: 0 0;
}

Ces lignes de code sont les plus importantes .
Maintenant, passons à la balise :
[sprite=background-position, background-position, width, height]ID[/sprite]
Ce qui me donne :
[sprite=0, 0, 27, 27]91939[/sprite]
Pour au final afficher ceci :


djamel7.png

Le tutoriel est déjà terminé, si vous avez des questions à propos de ces balises, je suis disponible :p

Bonne journée :bye:​
 
Dernière édition:
Trier par date Trier par votes
Haut