Bilder på landningssidor

Du kan tilknytte et eller flere billeder til en landingsside og vise dem i dit tema. Billederne ligger som et array på landingssiden, så du kan vise alle, kun det første eller et bestemt udsnit. Denne artikel henvender sig til udviklere og temamagere, der arbejder direkte i Smarty-templates, men butiksejere kan også have glæde af afsnittene om upload og alt-tekst.

Upload billeder til en landingsside

1. Gå til Landingssider i din admin
2. Klik Rediger på den landingsside du vil tilføje billeder til
3. Brug billedfeltet til at uploade et eller flere billeder ved at trække dem ind eller klikke for at vælge fra computeren
4. Skriv en kort beskrivelse på hvert billede. Beskrivelsen bruges som alt-tekst og hjælper både skærmlæsere og Google
5. Gem siden

Vis billeder i dit tema

Landingssidens billeder hentes med getImages(), der returnerer et array af billed-objekter. Hvert billede har metoden getSrc(bredde, højde, type, format, kvalitet), der genererer en URL til en skaleret version af billedet.

Vis det første billede (korrekt mønster)

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

Vis alle billeder

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

Vis kun de første tre billeder

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

Vis hero-billede med fast crop, WebP og høj 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}>

Parametre til getSrc()

• bredde og højde: målene i pixels
• type: fit (default) bevarer hele billedet inden for de angivne mål, box beskærer billedet til de eksakte mål
• format (valgfrit): jpg, png eller webp. Sætter du intet, vælger Shoporama selv det bedste format
• kvalitet (valgfrit): heltal mellem 0 og 100. Typisk 80 til 90 giver god balance mellem størrelse og skarphed

Andre nyttige metoder på et billede

• getDescription(): billedets beskrivelse, brug som alt-tekst
• getFilename(): billedets oprindelige filnavn
• getWidth() og getHeight(): billedets oprindelige mål i pixels
• getHtmlSize(bredde, højde, type): returnerer width- og height-attributter til img-tagget, så browseren reserverer plads og siden ikke layout-shifter
• getInline(bredde, højde, type, format, kvalitet): returnerer billedet som base64 inline-data, fx til preloads eller CSS-baggrunde uden ekstra request

Open Graph-billede til delinger

Open Graph-billedet er det billede der vises, når landingssiden deles på Facebook, LinkedIn eller lignende. Det er et separat felt og hentes med getOpenGraphImage(), der returnerer enten et billed-objekt eller false.

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

Best practice

• Upload billedet i mindst den størrelse du vil vise det i. Shoporama skalerer ned, ikke op
• Sæt en beskrivelse på billedet i admin. Så har du alt-tekst og bedre SEO ud af kassen
• Wrap altid getImages() i et {if}-tjek inden du tilgår [0]. Et tomt array vil ellers gå galt
• Brug getHtmlSize til at sætte width og height-attributter, så siden ikke hopper når billederne loader
• Tilføj loading="lazy" på billeder længere nede på siden, men ikke på det første hero-billede

Ofte stillede spørgsmål

Jeg har skrevet $landing_page->getImage(), men siden går i stykker. Hvorfor?

Fordi metoden ikke findes. På landingssider hedder den getImages() i flertal og returnerer et array. Vil du kun bruge ét billede, så skriv $landing_page->getImages()[0] efter et tjek på at der findes mindst ét.

Hvor mange billeder kan jeg uploade til en landingsside?

Der er ingen praktisk grænse. Men husk at hvert ekstra billede er en ekstra fil kunden skal hente. På en typisk landingsside er 1 til 5 billeder rigeligt. Skal du vise et stort galleri, så overvej lazy loading.

Hvilke filformater må jeg uploade?

Shoporama tager imod JPG, PNG og WebP. Når billedet vises i shoppen, konverterer systemet automatisk til det format og den størrelse du beder om i temaet, så du kan trygt uploade dit oprindelige billede i høj kvalitet.

Min beskrivelse på billedet vises ikke som alt-tekst, hvorfor?

Beskrivelsen kommer ikke automatisk ud i HTML. I dit tema skal du selv hente den med $image->getDescription()|escape og placere den i alt-attributten på img-tagget. Standardtemaer som Delaware gør det allerede for dig.

Kan jeg lave et galleri eller en lightbox?

Ja. Iterer getImages() og lav både en thumbnail og en stor version af samme billede med to forskellige getSrc()-kald. Saml dem så i et galleri-script efter eget valg.

Hvordan får jeg en helsides hero-baggrund af et landingsside-billede?

Brug fx getSrc(2000, 800, 'box', 'webp', 80) og sæt billedet som background-image via inline-style på en sektion. Komprimer kraftigt og vælg WebP for at holde filstørrelsen nede på mobil.

Hvordan ved jeg om der er uploadet et Open Graph-billede?

Kald $landing_page->getOpenGraphImage(). Returneres false, er der ikke sat et særskilt OG-billede. Mange vælger så at falde tilbage til det første almindelige billede med getImages()[0].

Får jeg straffet i Google PageSpeed for store landingsside-billeder?

Ja, hvis du serverer fuldopløsnings-billeder til mobil. Brug getSrc() til at bede om en passende størrelse, sæt width og height på img-tagget, og kombiner gerne med srcset for responsive. Se optimering af billeder til mobil.

Skal jeg uploade et nyt billede til hver størrelse jeg vil vise?

Nej. Upload én version i høj opløsning, fx 2000 pixels på den længste side, så genererer Shoporama alle de mindre versioner du beder om i temaet. De skalerede billeder caches automatisk, så de kun beregnes første gang.

Har du brug for hjælp? Kontakt os på support@shoporama.dk.