Bilder på landningssidor

Du kan bifoga en eller flera bilder till en landningssida och visa dem i ditt tema. Bilderna placeras som en array på landningssidan, så du kan visa dem alla, bara den första eller en specifik sektion. Den här artikeln vänder sig till utvecklare och tematillverkare som arbetar direkt i Smarty-mallar, men även butiksägare kan ha nytta av avsnitten om uppladdning och alt-text.

Ladda upp bilder till en landningssida

1. Gå till Landningssidor i din admin
2. Klicka på Redigera på den landningssida du vill lägga till bilder på
3. Använd bildfältet för att ladda upp en eller flera bilder genom att dra in dem eller klicka för att välja från din dator
4. Skriv en kort beskrivning på varje bild. Beskrivningen används som alt-text och hjälper både skärmläsare och Google
5. Spara sidan

Visa bilder i ditt tema

Landningssidans bilder hämtas med getImages(), som returnerar en array av bildobjekt. Varje bild har en getSrc(width, height, type, format, quality)-metod som genererar en URL till en skalad version av bilden.

Visa den första bilden (korrekt mönster)

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

Visa alla bilder

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

Visa bara de tre första bilderna

<{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}>

Visa hjältebilden med fast beskärning, WebP och hög kvalitet

<{$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}>

Parametrar för getSrc()

• bredd och höjd: dimensioner i pixlar
• typ: fit (standard) håller hela bilden inom de angivna dimensionerna, box beskär bilden till de exakta dimensionerna
• format (valfritt): jpg, png eller webp. Om du inte anger något kommer Shoporama att välja det bästa formatet själv
• Kvalitet (valfritt): heltal mellan 0 och 100. Vanligtvis ger 80 till 90 en bra balans mellan storlek och skärpa

Andra användbara metoder för en bild

• getDescription(): bildbeskrivning, använd som alt-text
• getFilename(): bildens ursprungliga filnamn
• getWidth( ) och getHeight(): bildens originaldimensioner i pixlar
• getHtmlSize(width, height, type): returnerar bredd- och höjdattributen för img-taggen så att webbläsaren reserverar utrymme och sidan inte skiftar layout
• getInline(width, height, type, format, quality): returnerar bilden som base64 inline-data, t.ex. för förladdningar eller CSS-bakgrunder utan extra begäran

Open Graph-bild för delning

Open Graph-bilden är den bild som visas när landningssidan delas på Facebook, LinkedIn eller liknande. Det är ett separat fält och hämtas med getOpenGraphImage(), som returnerar antingen ett bildobjekt eller false.

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

Bästa praxis

• Ladda upp bilden i minst den storlek du vill visa den i. Shoporama skalar ner, inte upp
• Lägg till en beskrivning på bilden i admin. Då har du alt-text och bättre SEO direkt från start
• Packa alltid in getImages() i en {if}-kontroll innan du använder [0]. En tom array kommer annars att gå fel
• Använd getHtmlSize för att ställa in bredd- och höjdattribut så att sidan inte hoppar när bilder laddas
• Lägg till loading="lazy " på bilder längre ner på sidan, men inte på den första hjältebilden

Ofta ställda frågor

Jag har skrivit $landing_page->getImage(), men sidan bryts. Varför händer detta?

För att metoden inte finns. På landningssidor heter den getImages () i plural och returnerar en array. Om du bara vill använda en bild skriver du $landing_page->getImages()[0] efter att ha kontrollerat att det finns minst en.

Hur många bilder kan jag ladda upp till en landningssida?

Det finns ingen praktisk gräns. Men tänk på att varje ytterligare bild är en extra fil som kunden måste ladda ner. På en typisk landningssida räcker det med 1 till 5 bilder. Om du behöver visa ett stort galleri bör du överväga lazy loading.

Vilka filformat kan jag ladda upp?

Shoporama accepterar JPG, PNG och WebP. När bilden visas i butiken konverterar systemet automatiskt till det format och den storlek du begär i temat, så att du säkert kan ladda upp din originalbild i hög kvalitet.

Min beskrivning på bilden visas inte som alt-text, varför?

Beskrivningen kommer inte automatiskt ut i HTML, i ditt tema måste du själv hämta den med $image->getDescription()|escape och placera den i alt-attributet för img-taggen. Standardteman som Delaware gör redan detta åt dig.

Kan jag skapa ett galleri eller en lightbox?

Ja, det kan du göra. Invertera getImages() och skapa både en miniatyrbild och en stor version av samma bild med två olika getSrc()-anrop. Kombinera dem sedan i ett galleriskript som du själv väljer.

Hur får jag en bakgrundsbild för en hjälte på hela sidan från en bild på landningssidan?

Använd t.ex. getSrc(2000, 800, 'box', 'webp', 80) och ställ in bilden som en bakgrundsbild via inline-style på ett avsnitt. Komprimera kraftigt och välj WebP för att hålla nere filstorleken på mobilen.

Hur vet jag om en Open Graph-bild har laddats upp?

Anropa $landing_page->getOpenGraphImage(). Om den returnerar false har en separat OG-bild inte ställts in. Många väljer då att gå tillbaka till den första vanliga bilden med getImages()[0].

Blir jag straffad i Google PageSpeed för stora bilder på landningssidan?

Ja, om du serverar bilder i full upplösning till mobilen. Använd getSrc() för att begära en lämplig storlek, ange bredd och höjd för img-taggen och kombinera gärna med srcset för responsivitet. Se Optimera bilder för mobiler.

Måste jag ladda upp en ny bild för varje storlek jag vill visa?

Nej, det behöver du inte. Ladda upp en högupplöst version, till exempel 2000 pixlar på den längsta sidan, så genererar Shoporama alla de mindre versioner du begär i temat. De skalade bilderna cachas automatiskt så att de bara beräknas första gången.

Behöver du hjälp med detta? Kontakta oss på support@shoporama.dk.