Afficher l'alt d'une image utilisée en catégorie au lieu de l'image en question

[Heine]

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum :

Description du problème

Bonjour ! J'espère que vous allez bien.

Alors voilà mon petit soucis, j'utilise sur mon forum une image en titre de catégorie. Je trouve ce système simple pour pouvoir mieux mettre en valeur sur l'index, tout bêtement. Bien entendu, l'image a un alt qui correspond au nom de la catégorie, ce qui fait que dans le panneau de configuration c'est bien le titre qui est affiché, et pas l'image.

J'aimerai savoir s'il était possible de répliquer ça autre part ? Grossièrement, dans la liste des sujets ou quand on regarde un sujet, est normalement affiché l'arborescence des liens des forums qui ont menés à ce sujet en question. Sauf que là, petit problème : vu que c'est une image, c'est l'énorme image qui apparaît.

Alors je peux y toucher et la faire disparaître / rétrécir tout ça, mais j'aimerai savoir s'il était possible de remplacer cette image par son alt ? Histoire de quand même avoir le texte ?

Je n'ai pas mis de lien de forum ou quoi que ce soit vu que le problème ne le demande pas, si jamais. Si je me suis trompé désolé et je le mettrai, mais techniquement je ne pense pas qu'il y en ait besoin haha

Merci d'avance !

[Lixyr]

Bonjour,

Oui, c'est possible. En Javascript sans problème, mais j'aimerais quand même voir si la solution que j'ai trouvée en CSS fonctionne. Du coup, puis-je avoir le lien du forum concerné pour avoir vos classes ?

[Heine]

Bonjour !

Merci de la réponse rapide. Et désolé, je viens du coup de voir que j'ai posté mon topic en double on dirait ? Désolé désolé @-@

Voilà le lien sinon !

Encore merci !

[Lixyr]

Merci.

Dommage, mais on ne peut rajouter after et before sur les images, en CSS. Ca ne fonctionne pas, donc il faut passer par du JavaScript...

Donc rajoutez ceci dans vos feuilles Javascript (panneau > modules > gestion des codes JavaScript > nouveau code à afficher sur toutes les pages) :

Code:

$(function() {
   if ( $("#header-topic").length ) {
      $( "#header-topic a.nav img" ).each(function() {
         $(this).after($(this).attr("alt"));
         $(this).addClass("hideImg");
      });
   }
});

Et rajoutez ceci dans votre CSS (panneau > affichage > couleurs > feuille de style CSS) :

Code:

.hideImg {
  width: 0px;
}

Ensuite, à vous de modifier votre CSS pour que les liens dans le fil d'ariane soient à votre goût.

J'ai testé ici : https://mha-test.forumactif.com/t2-fzefzzefzeze
Ça fonctionne bien.

Par contre, si vous voulez un effet rétroactif sur tout le forum, il faudrait me le dire qu'on voit comment arranger ça.

[Heine]

Oh merci, c'est parfait ! Ça marche très bien. o/

Par contre je ne comprend pas : comment ça un effet retroactif ?

[Lixyr]

Effet rétroactif veut dire que ça fonctionne partout sur le forum, et pas seulement là où j'ai testé.

[Heine]

Ah, du coup oui en effet ! L'idée était vraiment que l'image de la catégorie n'apparaisse pas quand elle sert seulement de lien dans le fil d'ariane. Je pense que le reste du temps où c'est censé apparaître comme un réel titre on peut le laisser, en soit ça devrait toujours fonctionner !

Je vois d'ailleurs du coup que par exemple ici, quand ça cherche à faire apparaître les sous-forums, ça apparaît en tant qu'image aussi ! J'imagine qu'il me suffit d'entourer ce bloc d'une div et de faire une feuille javacript en plus ? Je suis pas forcément giga calé là dedans haha

Merci beaucoup de l'aide !

[Lixyr]

Oui, voilà, c'est ça. Vous entourez le bloc contenant les liens par une div qui contient une classe précise, et c'est cette classe qu'on appellera par JavaScript.

Donc à chaque fois que vous avez une navigation contenant ces images indésirables, entourez la navigation comme ceci :

Code:

<div class="navWithoutImg">
/* ici le reste du code contenant la navigation */
</div>


Et du coup pour le JavaScript, il suffit simplement de le mettre à jour. Remplacez celui que je vous ai fourni par celui-ci :

Code:

$(function() {
  if ( $(".navWithoutImg").length ) {
      $( ".navWithoutImg a.nav img" ).each(function() {
        $(this).after($(this).attr("alt"));
        $(this).addClass("hideImg");
      });
  }
});

Et ça devrait fonctionner partout où vous aurez mis la classe navWithoutImg.

L'idéal, c'est que n'importe qui peut utiliser cette astuce sur son forum en phpbb2.

[Heine]

Merci beaucoup, ça marche parfaitement ! o///