Ajouter une image dans le fond du forum en fonction du sujet

[MrRedlou]

Détails techniques

Version du forum : ModernBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : https://www.entraide-videastes.com/

Description du problème

Bonjour à vous,

Je sais que le titre du sujet n'est pas vraiment explicite, mais c'est difficile de l'expliquer autrement.

En gros, ma question c'est : Est-il possible de mettre une image aux endroits indiqués sur la capture, mais que cette image soit propre au topic sur lequel on se trouve ?

C'est à dire qu'elle n'apparaîtrait pas partout sur le forum, mais bien sur un sujet en particulier, afin de l'illustrer...

Et éventuellement, cette image suivrait le scrolling de la page, comme ça on la verrait descendre en même temps qu'on fait défiler les réponses aux sujets.

Est-ce que c'est possible ?

Je vous remercie.

[MrRedlou]

Petit up !

[Kardo]

Bonjour,
Je ne savais pas trop comment approcher le sujet, mais j'ai eu une idée qui pourrait aboutir à quelque chose,
Il faudrait ajouter une classe au corps de la page en fonction de l'ID du Topic, et ensuite choisir une image pour chaque classe,
J'ai testé en ajoutant ce script et ce css dans viewtopic_body :

Code:

<script>
$( ".conteneur_container_IE" ).addClass( "my-custom-class-{TOPIC_ID}" );
</script>
<style>.my-custom-class-{TOPIC_ID}{ background-color: #{TOPIC_ID}00;}</style>

Le script se contente d'ajouter une classe au container principal, liée à l'ID du topic affiché, et le css ajoute juste une couleur de fond qui change en fonction de ce même ID, c'est assez simpliste mais c'est surtout pour donner des idées, par exemple si tu arrives à créer des url perso pour tes images, tu peux ajouter à la place de

Code:

background-color

, quelque chose du genre

Code:

background-image:url('adresse-de-mon-image-{TOPIC_ID}.png');

[Adam_sfp]

Bonjour

Pour compléter la solution de @Kardo sans passer par les templates en utilisant
Exécuter un code javascript en fonction d'un sujet
https://forum.forumactif.com/t310825-executer-un-code-javascript-sous-certaines-conditions

Cdt.

[MrRedlou]

Merci de votre aide !

Est-il possible de n'avoir l'image qu'en un seul exemplaire sur un seul côté ?

Ah je sais je vous embête !

En tout cas vous m'aidez à bien avancer !

[Kardo]

Re, toujours au même endroit,

Code:

<script>
$( ".conteneur_container_IE" ).addClass( "my-custom-class-{TOPIC_ID}" );
</script>
<style>.my-custom-class-{TOPIC_ID}{
   background-image: url(https://images.unsplash.com/photo-1508138221679-760a23a2285b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80), url(https://cdn-media.rtl.fr/cache/rQwYMu3pakcZ6yEbvK84CA/880v587-0/online/image/2017/0630/7789172554_la-voie-lactee-au-dessus-de-siding-spring-en-australie.jpg);
   background-size: 50% auto, 50% auto;
   background-position: top left, top right;
   background-repeat: repeat-y, repeat-y;

  }</style>

Une fois de plus, les images sont juste des placeholders, libre à toi de mettre ce que tu veux, et change les différentes propiétés suivant le résultat que tu veux obtenir,
Pour le scroll : background-attachment : propriété_bg_1, propriété_bg_2; https://developer.mozilla.org/fr/docs/Web/CSS/background-attachment

Pour la taille  j'ai mis la valeur y sur auto pour ne pas déformer l'image, et je ne répète l'image que verticalement, mais une fois de plus ce ne sont que des pistes pour que tu puisses arriver à faire ce que tu veux.

[Chacha]

Bonjour, Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message. Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »

[Chacha]

Bonjour, Nous n'avons plus de nouvelle de l'auteur de ce sujet depuis plus de 7 jours. Nous considérons donc ce problème comme résolu ou abandonné. La prochaine fois, merci de nous tenir au courant de l'évolution de votre problème, ou pensez à faire un UP régulièrement ! Ce sujet est archivé afin de ne pas perdre les réponses apportées.