...
Wenn ein Artikel kein Bild hat wird stattdessen ein Icon angezeigt. Dieses Icon ist keine Bilddatei sondern ein Zeichen aus dem ZeiechenZeichen-Schritsatz Font Awesome.
Wenn kein Artikelbild vorhanden ist wird also zB auf der product.html des Templates html-Code erzeugt, der diese dieses Zeichen anzeigt.
Der erzeugt Code verwendet die css-Klasse no-image-icon. In der Datei Template.css des Templates legt die entsprechende css-Regel fest, dass ein bestimmtes Zeichen angezeigt wird.
Entweder sie kennen sich mit Less (hier im Handbuch beschrieben) aus oder verwenden folgende Ansätze:
...
Kopieren Sie folgende css-Regel in die Datei stylesheetsstylesheet.css Ihres Templates
| Code Block |
|---|
.image .no-image .no-image-icon:before {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit; text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
content: "\f030f03e";
font-size: 30px500px;
color: #e0e0e0;
}
.image .no-image .no-image-icon {
padding: 0 0 0 0;
} |
Der Wert für \f03e für content bestimmt, welches Zeichen angezeigt wird.
Verfügbare Zeichen finden Sie unter https://fontawesome.com/v4.7/icons/
Sie können auch die Grösse, Farbe etc anpassen.
Die Regel padding: 0 0 0 0; entfernt das Polster oben und unten.
Vorteil dieser Lösung ist, dass Sie einfach zu verwenden ist und im gesamten Shop wirkt, also nicht nur auf der Artikelseite selbst sondern auch in den Kategorien
21a) Eigenes Bild statt eines Zeichenper css einbinden
Sie könnnen für content auch ein Bild-Url angeben content: url(/media/images/info/noimage.gif);
2) HTML des Templates bearbeiten
In diesem Fall müssen Sie alle Dateien Ihres Templates in welchem Artikel-Bilder verwendet werden bearbeiten. Also die Artikelseite selbst, Kategorie-Listings, Boxen, Pages usw. Im Beispiel Änderung der product.html des Templates
Suchen Sie nach no-image-icon und bearbeiten Sie das umliegende html Ihren Anforderungen entsprechend.