Bilder på destinasjonssider

Du kan legge til ett eller flere bilder på en landingsside og vise dem i temaet ditt. Bildene plasseres som en matrise på landingssiden, slik at du kan vise alle bildene, bare det første eller en bestemt del av dem. Denne artikkelen er rettet mot utviklere og temaprodusenter som jobber direkte i Smarty-maler, men butikkeiere kan også ha nytte av avsnittene om opplasting og alt-tekst.

Last opp bilder til en destinasjonsside

1. Gå til Landingssider i administratoren din
2. Klikk på Rediger på destinasjonssiden du vil legge til bilder på
3. Bruk bildefeltet til å laste opp ett eller flere bilder ved å dra dem inn eller klikke for å velge fra datamaskinen din
4. Skriv en kort beskrivelse på hvert bilde. Beskrivelsen brukes som alt-tekst og er til hjelp for både skjermlesere og Google
5. Lagre siden

Vis bilder i temaet ditt

Bilder på destinasjonssiden hentes med getImages(), som returnerer en matrise med bildeobjekter. Hvert bilde har en getSrc(width, height, type, format, quality)-metode som genererer en URL til en skalert versjon av bildet.

Vis det første bildet (riktig 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 bilder

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

Vis bare de tre første bildene

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

Vis heltebilde med fast beskjæring, WebP og høy 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}>

Parametere for getSrc()

• width og height: dimensjoner i piksler
• type: fit (standard) holder hele bildet innenfor de angitte dimensjonene, box beskjærer bildet til de nøyaktige dimensjonene
• format (valgfritt): jpg, png eller webp. Hvis du ikke angir noe, velger Shoporama selv det beste formatet
• Kvalitet (valgfritt): heltall mellom 0 og 100. Vanligvis gir 80 til 90 en god balanse mellom størrelse og skarphet

Andre nyttige metoder for et bilde

• getDescription(): bildebeskrivelse, brukes som alt-tekst
• getFilename(): det opprinnelige filnavnet til bildet
• getWidth( ) og getHeight(): bildets opprinnelige dimensjoner i piksler
• getHtmlSize(width, height, type): returnerer bredde- og høydeattributtene til img-taggen, slik at nettleseren reserverer plass og siden ikke forskyves i layouten
• getInline(width, height, type, format, quality): returnerer bildet som base64 inline-data, f.eks. for forhåndsinnlasting eller CSS-bakgrunner uten ekstra forespørsel

Open Graph-bilde for deling

Open Graph-bildet er bildet som vises når landingssiden deles på Facebook, LinkedIn eller lignende. Det er et eget felt og hentes med getOpenGraphImage(), som returnerer enten et bildeobjekt eller false.

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

Beste praksis

• Last opp bildet i minst den størrelsen du ønsker å vise det i. Shoporama skalerer ned, ikke opp
• Legg til en beskrivelse på bildet i admin. Da har du alt-tekst og bedre SEO med en gang
• Pakk alltid inn getImages() i en {if}-sjekk før du får tilgang til [0]. En tom matrise vil ellers gå galt
• Bruk getHtmlSize til å angi bredde- og høydeattributter slik at siden ikke hopper når bilder lastes inn
• Legg til loading="lazy " på bilder lenger ned på siden, men ikke på det første heltebildet

Ofte stilte spørsmål

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

Fordi metoden ikke finnes. På destinasjonssider heter den getImages () i flertall og returnerer en matrise. Hvis du bare vil bruke ett bilde, skriver du $landing_page->getImages()[0] etter å ha sjekket at det finnes minst ett.

Hvor mange bilder kan jeg laste opp til en destinasjonsside?

Det er ingen praktisk grense. Men husk at hvert ekstra bilde er en ekstra fil som kunden må laste ned. På en typisk landingsside er 1 til 5 bilder nok. Hvis du trenger å vise et stort galleri, bør du vurdere lazy loading.

Hvilke filformater kan jeg laste opp?

Shoporama godtar JPG, PNG og WebP. Når bildet vises i butikken, konverterer systemet automatisk til formatet og størrelsen du ber om i temaet, slik at du trygt kan laste opp originalbildet ditt i høy kvalitet.

Beskrivelsen min på bildet vises ikke som alt-tekst, hvorfor?

Beskrivelsen kommer ikke automatisk ut i HTML, i temaet ditt må du hente den selv med $image->getDescription()|escape og plassere den i alt-attributtet til img-koden. Standardtemaer som Delaware gjør allerede dette for deg.

Kan jeg opprette et galleri eller en lysboks?

Ja, det kan du. Inverter getImages() og lag både et miniatyrbilde og en stor versjon av det samme bildet med to forskjellige getSrc()-anrop. Kombiner dem deretter i et galleriskript etter eget valg.

Hvordan får jeg en helsideheltbakgrunn fra et landingssidebilde?

Bruk f.eks. getSrc(2000, 800, 'box', 'webp', 80) og sett bildet som et bakgrunnsbilde via inline-style på en seksjon. Komprimer kraftig og velg WebP for å holde filstørrelsen nede på mobilen.

Hvordan vet jeg om et Open Graph-bilde har blitt lastet opp?

Ring $landing_page->getOpenGraphImage(). Hvis den returnerer false, er det ikke angitt et eget OG-bilde. Mange velger da å gå tilbake til det første vanlige bildet med getImages()[0].

Blir jeg straffet i Google PageSpeed for store bilder på destinasjonssiden?

Ja, hvis du serverer bilder i full oppløsning til mobilen. Bruk getSrc() til å be om en passende størrelse, angi bredden og høyden på img-taggen, og kombiner gjerne med srcset for responsivitet. Se optimalisering av bilder for mobil.

Må jeg laste opp et nytt bilde for hver størrelse jeg ønsker å vise?

Nei, det trenger du ikke. Last opp én høyoppløselig versjon, for eksempel 2000 piksler på den lengste siden, og Shoporama vil generere alle de mindre versjonene du ber om i temaet. De skalerte bildene bufres automatisk, slik at de bare beregnes første gang.

Trenger du hjelp? Kontakt oss på support@shoporama.dk.