- Inscription
- 13 Janvier 2012
- Messages
- 6 126
- Réactions
- 19 186
- Points
- 29 755
↑ Cette erreur te semble familière ?
↑Compte tenu des situations régulières où vous avez besoin d'ajouter plus d'images que la limite imposée, nous vous permettons... par le biais d'un nouveau BB-code... de pouvoir "contourner" de façon intelligente cette restriction.
La restriction mise en vigueur sur le site à propos des images n'est pas pour vous embêter, c'est une question de fluidité du service.
Je vous préviens, pour certains ça peut paraître incompréhensible ce que je vais décrire, mais rassurez-vous... une fois que vous l'avez réussi une fois, ça vous paraîtra tout de suite plus facile.
Le BB-code repose sur les principes du sprite CSS, qu'est-ce qu'un "sprite CSS" ?
Requis :openweb.eu.org a dit:
- Un générateur de sprites CSS
(dans le tutoriel j'utilise
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.
mais il en existe beaucoup d'autres ; exemple
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.
)Afin d'être le plus claire possible, on va prendre pour exemple la présentation d'un code sur un jeu, il nous faut donc des boutons de console.
Vos images sont sur votre ordinateur :
Sélectionnez-les toutes, et créez une archive .zip
/!\ Une archive .zip est requise, pas une archive .rar
Allez sur le site générateur de sprites CSS :
→ Transférez votre archive.
Ensuite ne touchez pas les configurations présentes sur la page, sauf... à la rigueur... celles-ci :
Ces options vous permettent :
- De choisir la direction de génération du sprite : Vertical | Horizontal
- De choisir l'espacement entre les différentes images
→ Générez le sprite et le CSS.
Vous obtiendrez quelque chose de semblable :
→ Téléchargez l'image sprite.
Le résultat de l'image sprite :
Comme vous pouvez le constater, toutes les images (icônes) que j'avais au début sur mon ordinateur ont été fusionnées en une seule et unique image.
Félicitations,
Passons aux choses sérieuses, vous avez obtenu une portion de texte nommée "Règles de CSS" : conservez-la, vous en avez besoin !
Utilisation du BB-code :
- Uploadez l'image sprite en tant que pièce jointe sur votre sujet/message.
- La pièce jointe apparaît en bas, ouvrez son lien dans un nouvel onglet et récupérez son identifiant dans l'URL. (exemple : j'ai http://reality-gaming.fr/attachments/csg-5255b71d5e3ea-png.7921/. L'ID est donc 7921.)
- Nous avons notre code CSS généré préalablement :
Code:
.sprite-PS3_L1{ background-position: 0 0; width: 27px; height: 27px; }
.sprite-PS3_L2{ background-position: 0 -37px; width: 27px; height: 27px; }
.sprite-PS3_R1{ background-position: 0 -74px; width: 27px; height: 27px; }
.sprite-PS3_R2{ background-position: 0 -111px; width: 27px; height: 27px; }
.sprite-carre{ background-position: 0 -148px; width: 27px; height: 27px; }
.sprite-croix{ background-position: 0 -185px; width: 27px; height: 27px; }
.sprite-rond{ background-position: 0 -222px; width: 27px; height: 27px; }
.sprite-triangle{ background-position: 0 -259px; width: 27px; height: 27px; }Désignation des différentes valeurs :
- background-position: (position du sprite)
- La position sur l'axe X du début de l'image.
- La position sur l'axe Y du début de l'image.
- width & height: (dimensions du sprite)
- La hauteur de l'image qu'on souhaite afficher. (surnommé width)
- La largeur de l'image que l'on souhaite afficher. (surnommé height)
Il vous suffit d'utiliser le BBCode sprite de la façon suivante, dans l'ordre des paramètres : background position, puis width, puis height :
Code:
[sprite="Première valeur background position, Seconde valeur background position, width, height"]ID de votre pièce jointe[/sprite]On obtiens donc pour chacune de nos images :
Code:
[sprite="0,0,27,27"]7921[/sprite]
Code:
[sprite="0,-37,27,27"]7921[/sprite]
Code:
[sprite="0,-74,27,27"]7921[/sprite]
Code:
[sprite="0,-111,27,27"]7921[/sprite]
Code:
[sprite="0,-148,27,27"]7921[/sprite]
Code:
[sprite="0,-185,27,27"]7921[/sprite]
Code:
[sprite="0,-222,27,27"]7921[/sprite]
Code:
[sprite="0,-259,27,27"]7921[/sprite]Ce qui donne en pratique ceci :
Bouton L1.
Bouton L2.
Bouton R1.
Bouton R2.
Bouton Carré.
Bouton Croix.
Bouton Rond.
Bouton Triangle.
Toutes les images sont affichées séparément, or nous n'avons qu'une seule et unique image d'utilisé, elle est simplement découpée selon la règle des sprites CSS... tout ceci adapté en BB-code XenForo.
Exemple d'une utilisation pratique :
Code invincible :
Vous pouvez donc utiliser autant de fois que vous voulez les images présentes dans votre sprite, et donc vous pouvez utiliser cette méthode pour créer des tutoriaux plus long et riches en ressource.
Même si ce BB-code ne sera, à mon avis, pas énormément utilisé, le simple fait qu'il puisse servir à une personne est suffisant pour le rendre utile. De plus, l'intégration de ce BB-code sur le site pourrait nous offrir des possibilités futures en terme d'intégration d'image dans des tutoriaux/pages créé(e)s par le staff.
Bonne lecture à tous
