Affichage conditionnel et tile

Bonjour a tous,

Je me casse les dents sur un affichage conditionnel d'image depuis service apps pour ceux qui connaissent.

Dans l'idée si ma div = une valeur, affichage ou nom d'une image, cela fonctionne en "line".
Par contre, dès que j'essaie de passer en "tile" pour le mode vignette, ma div aura toujours le nom.

Voici mon code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<div class="DataViewer-details" style="cursor: pointer; text-align:center; overflow: hidden; background: #fff; border-radius: 7px;">
    <div class="cover" style="position: absolute; left:0; top:0; height:80px; width:100%; z-index:10; background: rgba(0, 0, 0, 0.15); opacity:0;  border-radius: 7px; border: 4px solid #ffffff;">
        <br>
    </div>
 
    <div class="text" id="Inkscape" style="display:none;position: absolute; left:0; top:0; height:125px; width:100%; z-index:1; height:auto;"><img class="fr-draggable" src="activities/com/5f5a0772a5787/resources/upload/514ce3c409ba48b50ba69d0a74dbdb74f7ddec22.png.png" style="width: 60px; height: 60px; text-align:center; margin: 10px 0 10px 0;"></div>
    <div class="text" id="doodle" style="display:none;position: absolute; left:0; top:0; height:125px; width:100%; z-index:1; height:auto;"><img class="fr-draggable" src="activities/com/5f5a0772a5787/resources/upload/54fb248d838a018315e3a4bd29214cfff66d5ce8.png.png" style="width: 60px; height: 60px; text-align:center; margin: 10px 0 10px 0;"></div>
    <div class="text" id="gimp" style="display:none;position: absolute; left:0; top:0; height:125px; width:100%; z-index:1; height:auto;"><img class="fr-draggable" src="activities/com/5f5a0772a5787/resources/upload/2597973602f48fabcf9d7f08daf0c36c07d99dd3.jpg.jpeg" style="width: 60px; height: 60px; text-align:center; margin: 10px 0 10px 0;"></div>
 
    <div style="text-align:center; position: absolute; left:0; top:80px; width:100%; padding: 0 5px 0 5px;">
        <h4 style="line-height: 1;"><small><a class="title" id="service" title="#[FIELD('Service')]#"><strong>#[FIELD('Service')]#</strong></a></small></h4>
    </div>
</div>
<script type="text/javascript">
    console.log("toto");
    service = document.getElementById("service").innerText;
    console.log("tata" + service);
    if (service == "Inkscape")
    {
        console.log("VAL : " + service);
        document.getElementById("Inkscape").style.display = "block";
        document.getElementById("doodle").style.display = "none";
        document.getElementById("gimp").style.display = "none";
 
    };
    if (service == "Doodle")
    {
        console.log("VAL : " + service);
        document.getElementById("Inkscape").style.display = "none";
        document.getElementById("doodle").style.display = "block";
        document.getElementById("gimp").style.display = "none";
 
    };
    if (service == "gimp")
    {
        console.log("VAL : " + service);
        document.getElementById("Inkscape").style.display = "none";
        document.getElementById("doodle").style.display = "none";
        document.getElementById("gimp").style.display = "block";
 
    };
 
</script>

En résultat, si ma première vignette égale le bon contenu, toutes mes autres vignettes auront le même résultat.
Voici mon petit log :

Pièce jointe 600670

Y'a t'il une solution pour passer à la lecture du tag suivant et donc afficher l'image suivante ?

Je sais pas si j'ai été clair.

Merci d'avance, et bon dimanche.

Edit : le type tile ou line ne change rien, cela ne marche que à plat