Skärmbild på bildspel, växlande bilder med textremsa på startsida.

Bildspel eller rullande bilder i F&S-temat

Den här artikeln är en del av en wordpressutbildning för Friskis&Svettis. Den innehåller funktioner som är specifika för det wordpresstema som Friskis&Svettis använder.

Vi använder bildspel, växlande bilder eller ”rullande bilder” på två ställen på våra webbar:

  • På startsidan.
  • På sidan för en träningsanläggning.

Bilderna är stora, växlar med tonande övergång. Vi skriver en ”bildtext” på dem och kan länka dem till en sida, så att vi puffar användaren till en sida med mer info.

Förbered sidan i WordPress på att visa bildspel

På startsidan behöver vi inte göra något speciellt för att bildspelet ska kunna visas. Det styrs av att startsidan (som heter Home Page) använder sig av mallen ”Home Page” i boxen sidattribut.

Skärmbild: Välj sidattributet "Front Page" i WordPress på startsidan.

Välj mallen "Front Page" i WordPress sidattribut för startsidan, "Front Page"

På sidan för anläggningen förbereder vi genom två steg:

  1. Gå till sidan för anläggningen. Eller skapa en ny. Ge sidan det namn som du vill ska synas gentemot besökarna. Sätt Mall till ”Facility” i sidans Sidattribut.
  2. Skriv in en shortcode för att visa bild. Spara utkast/publicera.
Skärmbild från redigeringsläge i WordPress.

Lägg till bildspel i WordPress genom att skriva in en shortcode.

Det är alltså koden [facility-images name=”Friskishallen”] som förbereder sidan på att vi ska visa ett bildspel här. Namnet ”Friskishallen” ersätter du med namnet på din anläggning. Det visas inte utåt, bara för av WordPress internt för att hitta var bildspel kan visas. Var noga med att skriva namnet exakt likadant om du använder det på flera ställen.

Strax under bilden ser vi shortcode för att visa öppettider. Vi använder samma namn på anläggningen där för att inte förvirra oss själva.

Förbered bilder för bildspelet

Nu ska vi lägga in bilder som kan snurra runt i bildspelet. Välj bilder som är tydliga, syns bra och inte gör sidan plottrig. Fundera också över vilka andra bilder du tänker visa i bildspelet så att de passar ihop.

Välj ut bilder och beskär dem till exakt bredd/höjd: 530 x 330 pixlar innan du laddar in dem i WordPress. Döp gärna bilderna så att du vet att de är förberedda för bildspelet. Exempel: glad-kille-spinning-530×330.jpg.

Skärmbild på bildspel, växlande bilder med textremsa på startsida.

Exempel på bildspelssida.

Om du använder en dator där du inte har ditt favoritbildredigeringsprogram så kan du använda den gratis webbaserade bildredigeraren Pixlr.com.

I teorin kan du använda bildbeskärningsfunktionen i WordPress mediabibliotek men i praktiken funkar det inte bra. WordPress tror att du ska skära till bilden så att den passar till de standardstorlekar som den känner till. (Inloggad som admin kan du se standardstorlekarna under Admin-panelen > Inställningar > Media.)

Ladda upp bilderna i WordPress mediabibliotek: Admin-panelen > Media > Lägg till.

Lägg in förberedda bilder i bildspel

Gå till admin-panelen > Rullande bilder > Rullande bilder. Lägg till en ny (med ”add new”). Se exempel nedan.

Skärmbild av att lägga till en bild i bildspel i Friskis&Svettis-webb med WordPress.

Lägg till en bild i bildspelet.

De olika fälten:

Titeln i det stora översta fältet: Visas som en textremsa på bilden.

Synlig på sida: På vilken sida finns bildspelet som du ska visa bilden i? Hittar du inte sidan här? Felsök genom att kolla att sidan har rätt mall, enligt instruktionen ”Förebered sidan…”

Bild: Välj en av dina förberedda bilder i storlek 530×330 pixlar. Du kan använda samma bild på flera ställen men måste då skapa flera ”rullande bilder” som använder samma bild.

Undertitel: Visas också som textremsa efter titeln (skiljt åt med en pinne/stolptecken/pipe-tecken).

Text som länkas: Text i mindre grad som visas på mörk remsa längst ned till höger. Blir en länktext. Frivillig

Länka till sida: Till vilken sida ska länken leda? Frivillig.

Publicera nu eller tidsstyr publicering

Skärmbild från WordPress på tidsstyrd publicering av bild i bildspel.

Tidsstyr publicering och avpublicering av bild i bildspel.

Nästa steg är att antingen klicka på knappen ”publicera” (eller ”uppdatera” om du redan publicerat) om du vill göra bilden synlig direkt i bildspelet.

Du kan också tidsstyra publiceringen för att bilden ska bli synlig från en viss tidpunkt och eventuellt avpubliceras vid en annan tidpunkt. Kanske lämpligt för bilden som ska locka till spinningpasset innan julottan på juldagsmorgonen. 🙂

Kommentera

E-postadressen publiceras inte. Obligatoriska fält är märkta *

Connect with Facebook