Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

Version 1 Next »

Wenn ein Artikel kein Bild hat wird stattdessen ein Icon angezeigt. Dieses Icon ist keine Bilddatei sondern ein Zeichen aus dem Zeiechen-Schritsatz Font Awesome.

Wenn kein Artikelbild vorhanden ist wird also auf der product.html des Templates html-Code erzeugt, der diese 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 angezeigt wird.

Entweder sie kennen sich mit Less (hier im Handbuch beschrieben) aus oder verwenden folgende Ansätze:

1) Anderes Zeichen verwenden

Kopieren Sie folgende css-Regel in die Datei stylesheets.css Ihres Templates

.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: "\f030";
  font-size: 30px;
  color: #e0e0e0;
}

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/

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

2) Eigenes Bild statt eines Zeichen

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.

  • No labels