Image

Das Image-Element dient zum Platzieren von statischen oder dynamischen Bildern innerhalb des Templates.

Einstellungen

Image

Bestimmt aus welcher Quelle ein Bild geladen wird.
Das Bild kann entweder aus der Shopware-Medienverwaltung geladen werden oder über eine Variable aufgelöst werden.

Wird sowohl eine Variable, als auch eine Mediendatei gewählt, dient die Mediendatei nur als Vorschaubild im Designer. Das tatsächlich dargestellte Bild wird dann immer aus der Variable aufgelöst.

Width

Die Breite des Bildes lässt sich in Pixel bestimmen.
Die Höhe errechnet sich automatisch anhand der Breite des Bildes.

Um das Bild herum wird ein Ausrichtungsrahmen erzeugt, der immer die volle Breite der umgebenden Column hat. Innerhalb dieses Rahmens kann das Bild ausgerichtet werden, sofern es nicht breiter als der Rahmen selbst ist.

Die Breite des Bildes kann unabhängig von der eingestellten Größe nicht breiter werden als der Ausrichtungsrahmen abzüglich Padding.

Horizontal Alignment

Bestimmt die horizontale Ausrichtung des Bildes innerhalb des Ausrichtungsrahmens.

• left: Das Bild wird linksbündig am Ausrichtungsrahmen ausgerichtet.
• center: Das Bild wird zentriert im Ausrichtungsrahmen ausgerichtet.
• right: Das Bild wird rechtsbündig am Ausrichtungsrahmen ausgerichtet.

Die Optionen haben nur einen Effekt wenn das Bild schmaler ist als der Ausrichtungsrahmen abzüglich Padding.

Padding

Bestimmt den minimalen Abstand zwischen Bild und Ausrichtungsrahmen.

Padding Top

Abstand zwischen Oberkante des Ausrichtungsrahmens und Bildes.

Padding Right

Minimaler Abstand zwischen rechter Kante des Ausrichtungsrahmens und Bildes.

Padding Bottom

Abstand zwischen Unterkante des Ausrichtungsrahmens und Bildes.

Padding Left

Minimaler Abstand zwischen linker Kante des Ausrichtungsrahmens und Bildes.

Border

Weist dem Button einen sichtbaren Rahmen zu.
Anzeigeeinstellungen des Rahmens können über das "Border Settings"-Menü vorgenommen werden.

Das Feld unterstützt auch die Eingabe eines CSS-Strings im Format:

<line-width> <line-style> <color>

Border Radius

Bestimmt die Abrundung der Ecken des Bildes. Der Wert kann nur in Pixel angegeben werden.
Der Effekt bezieht sich auf das Bild ansich und nicht den Ausrichtungsrahmen.

Um die Ecken komplett abzurunden nutzen Sie einen hohen Wert, wie 1000px.
Wenn das Quell-Bild im quadratischen Format vorliegt können so auch kreisrunde Bilder dargestellt werden.

Link URL

Spezifiziert eine URL auf die das Bild bei Klick verlinken soll. Bleibt das Feld frei wird kein Link erzeugt.
Es ist auch möglich Twig-Code in das Feld einzufügen um dynamische URLs zu erzeugen.

Link Rel Attribute

Bestimmt das "rel"-Attribut welches auf dem generierten Link angewendet wird.
Für mehr Informationen siehe:
Button > Link Rel Attribute

Link Target Attribute

Bestimmt das "rel"-Attribut welches auf dem generierten Link angewendet wird.
Für mehr Informationen siehe:
Button > Link Target Attribute

Container Background Color

Bestimmt die Hintergrundfarbe des gesamten Elements. Das Bild wird mit dieser Farbe hinterlegt.