Neu Ebay Designvorlage BILDER

[gemano24]

Hallo Ihr Lieben,

ich benötige mal einen HTML spezialisten! Wie mache ich das mit den Bildern, damit wenn nur ein Bild vom Artikel vorhanden ist auch nur ein Bild angezeigt wird, oder wenn 2 Bilder da sind dann nur 2 Bilder.

Also, mein HTML-Code sieht so aus:

<input type="radio" id="img1" name="img-group-1" checked="">
<label for="img1" class="imglabel"> <img src="{{ Vorgang.Bilder.Dateiname.Bild | Bild: 1 | Groesse: 500,360 }}"> </label>
<input type="radio" id="img2" name="img-group-1"
<label for="img2" class="imglabel"> <img src="{{ Vorgang.Bilder.Dateiname.Bild | Bild: 2 | Groesse: 500,360 }}"> </label>
<input type="radio" id="img3" name="img-group-1"
<label for="img3" class="imglabel"> <img src="{{ Vorgang.Bilder.Dateiname.Bild | Bild: 3 | Groesse: 500,360 }}"> </label>
<input type="radio" id="img4" name="img-group-1"
<label for="img4" class="imglabel"> <img src="{{ Vorgang.Bilder.Dateiname.Bild | Bild: 4 | Groesse: 500,360 }}"> </label>
<a href="#zoom1"><img class="animate scale zoom-in" id="img-big1" src="{{ Vorgang.Bilder.Dateiname.Bild | Bild: 1 | Groesse: 500,360 }}" </a>
<a href="#zoom2"><img class="animate scale zoom-in" id="img-big2" src="{{ Vorgang.Bilder.Dateiname.Bild | Bild: 2 | Groesse: 500,360 }}" </a>
<a href="#zoom3"><img class="animate scale zoom-in" id="img-big3" src="{{ Vorgang.Bilder.Dateiname.Bild | Bild: 3 | Groesse: 500,360 }}" </a>
<a href="#zoom4"><img class="animate scale zoom-in" id="img-big4" src="{{ Vorgang.Bilder.Dateiname.Bild | Bild: 4 | Groesse: 500,360 }}" </a>
<a href="#tumb1"><img class="zoom-img animate scale" id="zoomImg1" src="{{ Vorgang.Bilder.Dateiname.Bild | Bild: 1 | Groesse: 500,360 }}" </a>
<a href="#tumb2"><img class="zoom-img animate scale" id="zoomImg2" src="{{ Vorgang.Bilder.Dateiname.Bild | Bild: 2 | Groesse: 500,360 }}" </a>
<a href="#tumb3"><img class="zoom-img animate scale" id="zoomImg3" src="{{ Vorgang.Bilder.Dateiname.Bild | Bild: 3 | Groesse: 500,360 }}" </a>
<a href="#tumb4"><img class="zoom-img animate scale" id="zoomImg4" src="{{ Vorgang.Bilder.Dateiname.Bild | Bild: 4 | Groesse: 500,360 }}" </a>

wo genau muss eigentlich dieser Code eingefühgt werden:

{% assign existiertBild = Vorgang.Bilder.Dateiname.Bild | ExistPicture: 2 -%}
{% if existiertBild -%}
<img src="{{ Vorgang.Bilder.Dateiname.Bild | SelectPicture: 2 | PictureSize: 75, 75 }}" >
{% endif -%}

Vielen Dank

Gruß
Marko

 

[F. Werthmann]

Hallo Marko,
in unseren Templates (JTL-Adpet und JTL-Tyro) haben wir das ganze wie folgt gelöst.


<!--Hier wird die Bildergalerie eingebunden -->
{% assign existiertZweitesBild = Vorgang.Bilder.Dateiname.Bild | ExistiertBild: 2 -%}
<div class="gallery">
<input name="gallery_switch" id="id1" checked="checked" type="radio">
<div class="item">
<img src="{{ Vorgang.Bilder.Dateiname.Bild01 | Groesse: 360,360}}">
</div>
{% if existiertZweitesBild -%}
<!-- Hier wird die Anzahl der Bilder festgelegt-->
{% for i in (2..5) %}
{% assign existiertBild = Vorgang.Bilder.Dateiname.Bild | ExistiertBild: i -%}
{% if existiertBild -%}
<input name="gallery_switch" id="id{{ i }}" type="radio">
<div class="item">
<img src="{{ Vorgang.Bilder.Dateiname.Bild | Bild: i | Groesse: 360,360}}">
</div>
{% endif -%}
{% endfor -%}
{% endif -%}
</div>
{% if existiertZweitesBild -%}
<div class="thumbnails">
<!-- Hier wird die Anzahl der Bilder für die Thumbnails festgelegt.-->
{% for i in (1..5) %}
{% assign existiertBild = Vorgang.Bilder.Dateiname.Bild | ExistiertBild: i -%}
{% if existiertBild -%}
<div class="thumbnail-wrapper">
<div class="thumbnail-item">
<label border="1" for="id{{ i }}">
<img src="{{ Vorgang.Bilder.Dateiname.Bild | Bild: i | Groesse: 75, 75}}">
</label>
</div>
</div>
{% endif -%}
{% endfor -%}
</div>
{% endif -%}
<!--Ende Bildgalerie -->


Damit solltest du dein Problem gelöst haben. Wenn nur ein Bild im Artikel existiert, dann wird auch nur eins angezeigt.

 

[gemano24]

Sorry, habe nicht mitbekommen, dass hier auf meine Frage geantwortet wurde. Ich habe schon selber eine Lösung gefunden als keiner sich nach 5 Tagen gemeldet hat. Für deine Antwort sage ich jedoch: " VIELEN DANK!"

 

[Rico Giesler]

Du darfst den anderen User auch gern deine Lösung hier präsentieren.