Afficher une image html selon un test javascript

Fermé

Willma - Modifié le 29 avril 2020 à 22:31
Willma72 Messages postés 4 Date d'inscription jeudi 30 avril 2020 Statut Membre Dernière intervention 30 avril 2020 - 30 avril 2020 à 17:11

Bonjour tout le monde,

Amatrice de jeu de rôle je me suis lancée dans la création d'un forum de jeu de rôle sur forumactif. Je ne connais pas très bien la programmation, mais il me semble que la majorité est en HTML.
Mon problème est le suivant : si un utilisateur poste un message dans une catégorie, j'aimerai que son avatar soit affiché sur l'index. Pour cela j'ai

{catrow.forumrow.avatar.LAST_POST_AVATAR}

Je ne sais pas en quel langage c'est.
Mon code actuel est

<div class="lastposter">
          {catrow.forumrow.avatar.LAST_POST_AVATAR} 
</div>

Seulement, s'il n'y a aucun message de poster il ne trouve rien (ce qui est logique). J'aimerai donc pourvoir faire apparaître une image par défaut. J'ai testé ça, mais ça ne fonctionne pas

<div class="lastposter">
           <script type="text/javascript">
                    if (catrow.forumrow.LAST_POST != NULL) {
                              {catrow.forumrow.avatar.LAST_POST_AVATAR} 
                    }
                    else {
                              <img src="http://via.placeholder.com/100x100" />
                    }
          </script>
</div>

EDIT : Ajout du LANGAGE dans les BALISES DE CODE

Est-ce que quelqu'un aurait une idée de comment faire ?
D'avance merci à celui ou celle qui acceptera de m'aider.

A voir également:

Afficher une image en javascript
Image iso - Guide
Telecharger javascript - Télécharger - Langages
Comment agrandir une image - Guide
Acronis true image - Télécharger - Sauvegarde
Faststone image viewer - Télécharger - Visionnage & Diaporama

5 réponses

Réponse 1 / 5

jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
Modifié le 29 avril 2020 à 22:36

Bonjour,

Ton JS est faux,
A la limite

<div class="lastposter" id="imgAvatar">
          {catrow.forumrow.avatar.LAST_POST_AVATAR} 
</div>

var AVATAR  = '{catrow.forumrow.avatar.LAST_POST_AVATAR} ';
if ( !AVATAR  ) {
    document.getElementById('imgAvatar').innerHTML = ' <img src="http://via.placeholder.com/100x100" />'
}

Mais bon, la syntaxe de ton html ressemble à du Twig.
Il faudrait donc plutôt faire :

<div class="lastposter" id="imgAvatar">
    {% if (catrow.forumrow.avatar.LAST_POST_AVATAR) %}
          {catrow.forumrow.avatar.LAST_POST_AVATAR} 
   {% else %}
        <img src="http://via.placeholder.com/100x100" />
   {% endif %}
</div>

Réponse 2 / 5

Willma72 Messages postés 4 Date d'inscription jeudi 30 avril 2020 Statut Membre Dernière intervention 30 avril 2020
30 avril 2020 à 11:00

Bonjour Jordane,
Merci beaucoup de t'être penchée sur mon problème !

J'ai donc essayé ta seconde solution. Cependant il m'affiche ceci :

Or j'aimerai qu'il m'affiche ceci (c'est un montage pour montrer ce que je cherche à obtenir) :

Puisque cela ne fonctionnait pas j'ai testé ta première solution en l'écrivant comme ceci :

<div class="lastposter" id="imgAvatar">
          {catrow.forumrow.avatar.LAST_POST_AVATAR} 
</div>
var AVATAR  = '{catrow.forumrow.avatar.LAST_POST_AVATAR} ';
          if ( !AVATAR  ) {
                    document.getElementById('imgAvatar').innerHTML = ' <img src="http://via.placeholder.com/100x100" />'
}

Ce qui m'a donné ça, donc toujours pas ce que je recherchais :

Alors j'ai inversé pour écrire :

var AVATAR  = '{catrow.forumrow.avatar.LAST_POST_AVATAR} ';
          if ( !AVATAR  ) {
                    document.getElementById('imgAvatar').innerHTML = ' <img src="http://via.placeholder.com/100x100" />'
}
div class="lastposter" id="imgAvatar">
          {catrow.forumrow.avatar.LAST_POST_AVATAR} 
</div>

Donc pour le coup je ne comprends pas trop ce que je peux faire de plus. J'ai tenté de mettre des balises <script> autour des parties js mais rien à faire. Je suis désolée si la réponse est toute simple, je ne connais pas trop ces langages.

jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
30 avril 2020 à 11:18

J'ai tenté de mettre des balises <script> autour des parties js

heu.. oui.. c'est obligatoire...

Il faudrait que tu nous montres le code source html généré ( tu affiches la page dans ton navigateur puis tu fais ctrl + u )
- De la page avec l'avatar
- De la page sans l'avatar ( avec ma solution 2 )
- De la page sans l'avatar ( avec ma solution 1 ) (en ayant mis le code JS entre les balises <script> bien entendu )

Réponse 3 / 5

Willma72 Messages postés 4 Date d'inscription jeudi 30 avril 2020 Statut Membre Dernière intervention 30 avril 2020
Modifié le 30 avril 2020 à 14:50

Avec ce code là :

<div class="lastposter">
 {catrow.forumrow.avatar.LAST_POST_AVATAR} 
</div>

J'obtiens ça :

<div class="tlteCAT"><h2>Au commencement</h2></div></div></div><div class="categorie"><div class="stats stats1">1 sujets</div><div class="stats stats2">1 messages</div><div class="lastposter"><img loading="lazy" src="https://2img.net/u/3716/57/40/65/avatars/1-43.png"  alt="Forum test 1-43" /></div><div class="blokg"><div class="titreFRM"><a href="/f6-partie-administrative?tt=1">Partie administrative</a></div><div class="lastpost"><span><a href="/t1-votre-1er-sujet?tt=1" title="Votre 1er sujet">Votre 1er sujet...</a><br />Lun 27 Avr 2020 - 14:20<br /><strong><a href="/u1?tt=1" class="gensmall"><span style="color:#000099"><strong>Admin</strong></span></a></strong> <a href="/t1-votre-1er-sujet?tt=1#1" class="last-post-icon"><img class="sprite-icon_reply" src="https://2img.net/i/empty.gif" alt="Voir le dernier message" title="Voir le dernier message" /></a></span></div><div class="description"><img src="https://www.dubonheurenbarres.com/wp-content/uploads/2018/07/je-m-aime-je-suis.png" alt="Partie administrative" style="float:left" />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis sem quam. Fusce pretium mollis leo, quis ornare enim. Donec nunc nulla, rhoncus quis leo luctus, accumsan fermentum sapien. Aliquam tempor lectus magna, et sagittis elit condimentum sed. Vivamus ultrices sed dolor vitae vehicula. Integer interdum pretium dui. Integer blandit, augue ut vulputate porta, enim augue imperdiet dolor, sed tempor elit orci quis dui. Vestibulum tincidunt nisl a ultrices rutrum. Duis tristique ornare feugiat. Duis feugiat ante ut lacus vestibulum, nec pharetra augue malesuada. Maecenas gravida rhoncus ligula. Maecenas leo arcu, blandit porta laoreet ut, cursus sed dolor. Aliquam lectus lectus, imperdiet eu est at, varius fringilla dui. Nullam eu fringilla lectus, ac fringilla enim.<br /></div><div>Sur cette ligne il faut faire apparaître les sous-forums</div></div></div><div class="categorie"><div class="stats stats1">0 sujets</div><div class="stats stats2">0 messages</div><div class="blokg"><div class="titreFRM"><a href="/f7-personnage?tt=1">Personnage</a></div><div class="lastpost"></div><div class="description"><img src="https://www.bfmtv.com/i/0/0/720/605387662886dd5ad6a9fe2ccd375.jpg" alt="Personnage" style="float:left" /><br /><br /></div><div>Sur cette ligne il faut faire apparaître les sous-forums</div></div></div></div>

Avec ce code là (ta deuxième solution) :

<div class="lastposter" id="imgAvatar">
 <script type="text/javascript">
  {% if (catrow.forumrow.avatar.LAST_POST_AVATAR) %}
   {catrow.forumrow.avatar.LAST_POST_AVATAR} 
  {% else %}
   <img src="http://via.placeholder.com/100x100" />
  {% endif %}
 </script>
</div>

J'obtiens ça :

<div class="tlteCAT"><h2>Au commencement</h2></div></div></div><div class="categorie"><div class="stats stats1">1 sujets</div><div class="stats stats2">1 messages</div><div class="lastposter" id="imgAvatar"><script type="text/javascript">{% if (catrow.forumrow.avatar.LAST_POST_AVATAR) %}<img loading="lazy" src="https://2img.net/u/3716/57/40/65/avatars/1-43.png"  alt="Forum test 1-43" /> {% else %}<img src="http://via.placeholder.com/100x100" />{% endif %}</script></div><div class="blokg"><div class="titreFRM"><a href="/f6-partie-administrative?tt=1">Partie administrative</a></div><div class="lastpost"><span><a href="/t1-votre-1er-sujet?tt=1" title="Votre 1er sujet">Votre 1er sujet...</a><br />Lun 27 Avr 2020 - 14:20<br /><strong><a href="/u1?tt=1" class="gensmall"><span style="color:#000099"><strong>Admin</strong></span></a></strong> <a href="/t1-votre-1er-sujet?tt=1#1" class="last-post-icon"><img class="sprite-icon_reply" src="https://2img.net/i/empty.gif" alt="Voir le dernier message" title="Voir le dernier message" /></a></span></div><div class="description"><img src="https://www.dubonheurenbarres.com/wp-content/uploads/2018/07/je-m-aime-je-suis.png" alt="Partie administrative" style="float:left" />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis sem quam. Fusce pretium mollis leo, quis ornare enim. Donec nunc nulla, rhoncus quis leo luctus, accumsan fermentum sapien. Aliquam tempor lectus magna, et sagittis elit condimentum sed. Vivamus ultrices sed dolor vitae vehicula. Integer interdum pretium dui. Integer blandit, augue ut vulputate porta, enim augue imperdiet dolor, sed tempor elit orci quis dui. Vestibulum tincidunt nisl a ultrices rutrum. Duis tristique ornare feugiat. Duis feugiat ante ut lacus vestibulum, nec pharetra augue malesuada. Maecenas gravida rhoncus ligula. Maecenas leo arcu, blandit porta laoreet ut, cursus sed dolor. Aliquam lectus lectus, imperdiet eu est at, varius fringilla dui. Nullam eu fringilla lectus, ac fringilla enim.<br /></div><div>Sur cette ligne il faut faire apparaître les sous-forums</div></div></div><div class="categorie"><div class="stats stats1">0 sujets</div><div class="stats stats2">0 messages</div><div class="blokg"><div class="titreFRM"><a href="/f7-personnage?tt=1">Personnage</a></div><div class="lastpost"></div><div class="description"><img src="https://www.bfmtv.com/i/0/0/720/605387662886dd5ad6a9fe2ccd375.jpg" alt="Personnage" style="float:left" /><br /><br /></div><div>Sur cette ligne il faut faire apparaître les sous-forums</div></div></div>

Et avec ce code là (ta première solution) :

<div class="lastposter" id="imgAvatar">
 {catrow.forumrow.avatar.LAST_POST_AVATAR} 
</div>
<script type="text/javascript">
 var AVATAR  = '{catrow.forumrow.avatar.LAST_POST_AVATAR} ';
  if ( !AVATAR  ) {
   document.getElementById('imgAvatar').innerHTML = ' <img src="http://via.placeholder.com/100x100" />'
 }
</script>

J'obtiens ça :


<div class="tlteCAT"><h2>Au commencement
</h2>
</div>
</div>
</div><div class="categorie"><div class="stats stats1">1 sujets
</div><div class="stats stats2">1 messages
</div><div class="lastposter" id="imgAvatar"><img loading="lazy" src="https://2img.net/u/3716/57/40/65/avatars/1-43.png"  alt="Forum test 1-43" /> 
</div>
<script type="text/javascript">
var AVATAR  = '<img loading="lazy" src="https://2img.net/u/3716/57/40/65/avatars/1-43.png"  alt="Forum test 1-43" /> ';
if ( !AVATAR  ) {
  document.getElementById('imgAvatar').innerHTML = ' <img src="http://via.placeholder.com/100x100" />'
}
</script>
<div class="blokg"><div class="titreFRM"><a href="/f6-partie-administrative?tt=1">Partie administrative
</a>
</div><div class="lastpost"><span><a href="/t1-votre-1er-sujet?tt=1" title="Votre 1er sujet">Votre 1er sujet...
</a><br />Lun 27 Avr 2020 - 14:20<br /><strong><a href="/u1?tt=1" class="gensmall"><span style="color:#000099"><strong>Admin
</strong>
</span>
</a>
</strong> <a href="/t1-votre-1er-sujet?tt=1#1" class="last-post-icon"><img class="sprite-icon_reply" src="https://2img.net/i/empty.gif" alt="Voir le dernier message" title="Voir le dernier message" />
</a>
</span>
</div><div class="description"><img src="https://www.dubonheurenbarres.com/wp-content/uploads/2018/07/je-m-aime-je-suis.png" alt="Partie administrative" style="float:left" />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis sem quam. Fusce pretium mollis leo, quis ornare enim. Donec nunc nulla, rhoncus quis leo luctus, accumsan fermentum sapien. Aliquam tempor lectus magna, et sagittis elit condimentum sed. Vivamus ultrices sed dolor vitae vehicula. Integer interdum pretium dui. Integer blandit, augue ut vulputate porta, enim augue imperdiet dolor, sed tempor elit orci quis dui. Vestibulum tincidunt nisl a ultrices rutrum. Duis tristique ornare feugiat. Duis feugiat ante ut lacus vestibulum, nec pharetra augue malesuada. Maecenas gravida rhoncus ligula. Maecenas leo arcu, blandit porta laoreet ut, cursus sed dolor. Aliquam lectus lectus, imperdiet eu est at, varius fringilla dui. Nullam eu fringilla lectus, ac fringilla enim.<br />
</div><div>Sur cette ligne il faut faire apparaître les sous-forums
</div>
</div>
</div><div class="categorie"><div class="stats stats1">0 sujets
</div><div class="stats stats2">0 messages
</div><div class="blokg"><div class="titreFRM"><a href="/f7-personnage?tt=1">Personnage
</a>
</div><div class="lastpost">
</div><div class="description"><img src="https://www.bfmtv.com/i/0/0/720/605387662886dd5ad6a9fe2ccd375.jpg" alt="Personnage" style="float:left" /><br /><br />
</div><div>Sur cette ligne il faut faire apparaître les sous-forums
</div>
</div>
</div>
</div>

Je ne savais pas s'il fallait préciser un langage dans les balises <code> parce que si je le mettais ça m'écrivait tout sur une seule ligne à scroller en largeur donc je trouvais ça moins lisible

EDIT : Ajout du LANGAGE dans les balises de code (encore ..... ) pour avoir la coloration syntaxique ( à toi de remettre en forme le code pour les retours à la ligne)

jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
30 avril 2020 à 14:53

Donc visiblement ce n'est pas du TWIG.

Donc, dans ton troisième code, on voit que ta variable n'est pas vide.
Il affiche donc l'image d'origine.
Par contre, si la variable est vide, il affiche bien l'image que tu souhaites.
Ce code fonctionne donc...

Réponse 4 / 5

Willma72 Messages postés 4 Date d'inscription jeudi 30 avril 2020 Statut Membre Dernière intervention 30 avril 2020
Modifié le 30 avril 2020 à 15:15

Cependant l'affichage de l'image par défaut ne se fait pas dans le cas où je n'ai pas de post. En effet, dans la première partie on voit bien que ma div avec la classe "lasposter" correspondant à l'affichage de l'avatar du dernier posteur est bien entre ma div avec ma classe "stats2" et celle avec la classe "blockg" comme prévu

<div class="stats stats2">1 messages
</div>
<div class="lastposter" id="imgAvatar">
  <img loading="lazy" src="https://2img.net/u/3716/57/40/65/avatars/1-43.png"  alt="Forum test 1-43" /> 
</div>
<script type="text/javascript">
  var AVATAR  = '<img loading="lazy" src="https://2img.net/u/3716/57/40/65/avatars/1-43.png"  alt="Forum test 1-43" /> ';
  if ( !AVATAR  ) {
   document.getElementById('imgAvatar').innerHTML = ' <img src="http://via.placeholder.com/100x100" />'
  }
</script>
<div class="blokg">

Mais ce n'est pas le cas dans mon second bloc qui lui n'a pas de post. Dans ces cas là je passe directement de la div avec ma classe "stats2" à celle avec "blockg" sans avec ma div avec "lastposter" entre les deux.

<div class="stats stats2">0 messages
</div><div class="blokg">

Or c'est entre ces deux balises que j'aimerai pouvoir voir une image par défaut dans ma div avec "lastposter". Est-ce que tu aurais une idée de pourquoi ça ne fonctionne pas ?

jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
30 avril 2020 à 15:47

tu as plusieurs DIV lastposter ?
Il te faut donc un ID différent par DIV et modifier le JS pour qu'il s'adapter à l'ID concerné

Le code COMPLET de la page est nécessaire pour que je puisse essayer de t'en dire plus.

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 5

Willma72 Messages postés 4 Date d'inscription jeudi 30 avril 2020 Statut Membre Dernière intervention 30 avril 2020
Modifié le 30 avril 2020 à 17:14

Je ne sais pas si tu connais un peu le fonctionnement de forumactif mais le principe c'est que la description des catégories avec les sous-forums se fait dans une page séparée du reste. Il doit s'appliquer à chaque élément de l'arborescence.
Donc à chaque fois qu'il y a un forum dans la catégorie il doit logiquement répéter le code

Le code est le suivant :

<!-- BEGIN catrow --><!-- BEGIN tablehead -->
<div class="tlteCAT">{catrow.tablehead.L_FORUM}</div>

<!-- END tablehead -->
<!-- BEGIN cathead -->
<!-- END cathead -->
<!-- BEGIN forumrow -->

<div class="categorie">
 <div class="stats stats1">{catrow.forumrow.TOPICS} sujets</div>
 <div class="stats stats2">{catrow.forumrow.POSTS} messages</div> 

 <!-- BEGIN avatar -->
  <script type="text/javascript">
    var AVATAR  = '{catrow.forumrow.avatar.LAST_POST_AVATAR} ';
          if ( !AVATAR  ) {
                    document.getElementById('imgAvatar').innerHTML = ' <img src="http://via.placeholder.com/100x100" />'
}
  </script>
<div class="lastposter" id="imgAvatar">
          {catrow.forumrow.avatar.LAST_POST_AVATAR} 
</div>
 <!-- END avatar -->
 
 <div class="blokg">
  <div class="titreFRM">
                 <a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
           </div>
  <div class="lastpost">{catrow.forumrow.LAST_POST}</div>
 
  <div class="description">{catrow.forumrow.FORUM_DESC}</div>
  <div>Sur cette ligne il faut faire apparaître les sous-forums</div>
 </div>


<!-- END forumrow -->
</div>
<!-- END catrow -->

Discussions similaires

Retrouver l'image originale après avoir fait des modifications ?

programme qui n'affiche pas le mot secret

=Si la cellule A1 a du texte = B1 devient couleur

Discussions similaires

Newsletters