Bilder auf Landing Pages

Sie können ein oder mehrere Bilder an eine Landing Page anhängen und sie in Ihrem Thema anzeigen. Die Bilder werden als Array auf der Landing Page platziert, so dass Sie alle Bilder, nur das erste oder einen bestimmten Abschnitt anzeigen können. Dieser Artikel richtet sich an Entwickler und Themenersteller, die direkt in Smarty-Vorlagen arbeiten, aber auch Shop-Betreiber können von den Abschnitten zum Hochladen und zum Alt-Text profitieren.

Bilder auf eine Landing Page hochladen

1. Gehen Sie zu Landing Pages in Ihrer Verwaltung
2. Klicken Sie auf Bearbeiten auf der Landing Page, zu der Sie Bilder hinzufügen möchten
3. Verwenden Sie das Bildfeld, um ein oder mehrere Bilder hochzuladen, indem Sie sie hineinziehen oder per Mausklick von Ihrem Computer auswählen
4. Schreiben Sie eine kurze Beschreibung zu jedem Bild. Die Beschreibung wird als Alt-Text verwendet und hilft sowohl Bildschirmlesern als auch Google
5. Speichern Sie die Seite

Bilder in Ihrem Thema anzeigen

Die Bilder der Landing Page werden mit getImages() abgerufen, das ein Array von Bildobjekten zurückgibt. Jedes Bild hat eine getSrc(width, height, type, format, quality)-Methode, die eine URL zu einer skalierten Version des Bildes erzeugt.

Zeigen Sie das erste Bild an (korrektes Muster)

<{$images = $landing_page->getImages()}> <{if $images}> <{$image = $images[0]}> <img src="<{$image->getSrc(800, 400, 'fit')}>>" alt="<{$image->getDescription()|escape}>"> <{/if}>

Alle Bilder anzeigen

<{foreach $landing_page->getImages() as $image}>> <img src="<{$image->getSrc(800, 400, 'fit')}>" alt="<{$image->getDescription()|escape}>"> <{/foreach}>

Nur die ersten drei Bilder anzeigen

<{foreach $landing_page->getImages() as $image name=img}>> <{if $smarty.foreach.img.iteration <= 3}> <img src="<{$image->getSrc(600, 400, 'box')}>" alt="<{$image->getDescription()|escape}>"> <{/if}> <{/foreach}>

Heldenbild mit festem Ausschnitt, WebP und hoher Qualität anzeigen

<{$images = $landing_page->getImages()}> <{if $images}> <{$image = $images[0]}> <img src="<{$image->getSrc(1600, 700, 'box', 'webp', 85)}>>" alt="<{$image->getDescription()|escape}>>" loading="eager"> <{/if}>

Parameter für getSrc()

• width und height: Abmessungen in Pixel
• type: fit (Standard) behält das gesamte Bild innerhalb der angegebenen Abmessungen, box schneidet das Bild auf die exakten Abmessungen zu
• Format (optional): jpg, png oder webp. Wenn Sie nichts angeben, wählt Shoporama selbst das beste Format
• Qualität (optional): Ganzzahl zwischen 0 und 100. Normalerweise bieten 80 bis 90 ein gutes Gleichgewicht zwischen Größe und Schärfe.

Andere nützliche Methoden für ein Bild

• getDescription(): Bildbeschreibung, wird als Alt-Text verwendet
• getFilename(): der ursprüngliche Dateiname des Bildes
• getWidth() und getHeight(): die ursprünglichen Abmessungen des Bildes in Pixeln
• getHtmlSize(width, height, type): gibt die Breiten- und Höhenattribute des img-Tags zurück, so dass der Browser Platz reserviert und die Seite sich nicht im Layout verschiebt
• getInline(width, height, type, format, quality): gibt das Bild als base64 Inline-Daten zurück, z.B. für Preloads oder CSS-Hintergründe ohne zusätzliche Anfrage

Open Graph-Bild zum Teilen

Das Open Graph-Bild ist das Bild, das angezeigt wird, wenn die Landing Page auf Facebook, LinkedIn oder ähnlichem geteilt wird. Es ist ein separates Feld und wird mit getOpenGraphImage() abgefragt, das entweder ein Bildobjekt oder false zurückgibt.

<{if $og = $landing_page->getOpenGraphImage()}> <meta property="and:image" content="<{$og->getSrc(1200, 630, 'box', 'jpg', 85)}>"> <{/if}>

Beste Praxis

• Laden Sie das Bild mindestens in der Größe hoch, in der Sie es anzeigen möchten. Shoporama skaliert nach unten, nicht nach oben
• Fügen Sie dem Bild in der Verwaltung eine Beschreibung hinzu. Dann haben Sie von Anfang an einen Alt-Text und bessere SEO
• Schließen Sie getImages() immer mit einer {if}-Prüfung ein, bevor Sie auf [0] zugreifen. Ein leeres Array wird sonst schief gehen
• Verwenden Sie getHtmlSize, um Breiten- und Höhenattribute zu setzen, damit die Seite beim Laden der Bilder nicht springt.
• Fügen Sie loading="lazy" für Bilder weiter unten auf der Seite hinzu, aber nicht für das erste Heldenbild.

Häufig gestellte Fragen

Ich habe $landing_page->getImage() geschrieben, aber die Seite bricht ab. Warum ist das so?

Weil die Methode nicht existiert. Auf Landing Pages heißt sie getImages() im Plural und gibt ein Array zurück. Wenn Sie nur ein Bild verwenden möchten, schreiben Sie $landing_page->getImages()[0], nachdem Sie überprüft haben, dass es mindestens ein Bild gibt.

Wie viele Bilder kann ich auf eine Landing Page hochladen?

Es gibt keine praktische Begrenzung. Denken Sie aber daran, dass jedes zusätzliche Bild eine weitere Datei ist, die der Kunde herunterladen muss. Für eine typische Landing Page sind 1 bis 5 Bilder ausreichend. Wenn Sie eine große Galerie anzeigen müssen, sollten Sie das "Lazy Loading" in Betracht ziehen.

Welche Dateiformate kann ich hochladen?

Shoporama akzeptiert die Formate JPG, PNG und WebP. Wenn das Bild im Shop angezeigt wird, konvertiert das System automatisch in das Format und die Größe, die Sie im Thema angegeben haben, so dass Sie Ihr Originalbild sicher und in hoher Qualität hochladen können.

Meine Bildbeschreibung wird nicht als Alt-Text angezeigt, warum?

Die Beschreibung erscheint nicht automatisch in HTML, in Ihrem Theme müssen Sie sie selbst mit $image->getDescription()|escape ermitteln und in das alt-Attribut des img-Tags einfügen. Standard-Themes wie Delaware tun dies bereits für Sie.

Kann ich eine Galerie oder ein Leuchtpult erstellen?

Ja, das können Sie. Invertieren Sie getImages() und erstellen Sie sowohl ein Thumbnail als auch eine große Version desselben Bildes mit zwei verschiedenen getSrc()-Aufrufen. Kombinieren Sie diese dann in einem Galerie-Skript Ihrer Wahl.

Wie erhalte ich einen ganzseitigen Heldenhintergrund aus einem Landing Page-Bild?

Verwenden Sie z. B. getSrc(2000, 800, 'box', 'webp', 80) und setzen Sie das Bild als Hintergrundbild über inline-style auf einen Abschnitt. Komprimieren Sie stark und wählen Sie WebP, um die Dateigröße auf mobilen Geräten gering zu halten.

Woher weiß ich, ob ein Open Graph-Bild hochgeladen wurde?

Rufen Sie $landing_page->getOpenGraphImage() auf. Wenn der Wert false zurückgegeben wird, wurde kein separates OG-Bild eingestellt. Viele Nutzer entscheiden sich dann dafür, mit getImages()[0] auf das erste reguläre Bild zurückzugreifen.

Werde ich bei Google PageSpeed für große Landing Page-Bilder bestraft?

Ja, wenn Sie Bilder in voller Auflösung für mobile Geräte bereitstellen. Verwenden Sie getSrc(), um eine geeignete Größe anzufordern, legen Sie die Breite und Höhe des img-Tags fest, und kombinieren Sie es mit srcset für responsive. Siehe Optimierung von Bildern für Mobilgeräte.

Muss ich für jede Größe, die ich anzeigen möchte, ein neues Bild hochladen?

Nein, das müssen Sie nicht. Laden Sie eine hochauflösende Version hoch, z.B. 2000 Pixel auf der längsten Seite, und Shoporama generiert alle kleineren Versionen, die Sie im Thema anfordern. Die skalierten Bilder werden automatisch zwischengespeichert, so dass sie nur beim ersten Mal berechnet werden.

Brauchen Sie Hilfe? Kontaktieren Sie uns unter support@shoporama.dk.