Bygg ut ditt Anax Flat tema med stöd för bilder

Du skall lägga till LESS-moduler som hjälper dig att presentera bilder på olika sätt. För att visa att det fungerar bygger du en blogg “Dagens Bild”.

#Förkunskaper

Du har jobbat igenom exemplen “Figure and figcaption” samt “Figure and figcaption med media queries” och du har tillgång till en modul som stylar figure-elementet.

Du har koll på hur man gör en blogg i Anax och du har koll på shortcodes för FIGURE.

Du har integrerat Cimage och snygga länkar och du vet var du kan läsa på om möjligheterna med Cimage.

Du har sedan tidigare två repon med Anax Flat och Anax Flat tema som ligger i katalogen me/anax-flat respektive me/anax-flat/theme. Båda är taggade i minst version 4.0.0.

#Introduktion

Det handlar om att skapa en struktur i LESS för bilder och sedan visa hur man kan använda den genom att skapa bildtungt innehåll i Anax.

Se till att din design, inklusive bilderna, är responsiv, inom rimliga gränser.

Använd Cimage för att beskära, skala om och/eller processa bilderna. Din sida skall inte ladda större bilder än vad som är nödvändigt eller rimligt.

#Krav

1. Till ditt tema, lägg till en LESS modul som ger dig en responsiv grund till elementet <figure>. Du kan utgå/kopiera från exemplet om du vill. Se till att de media queries du använder fungerar tillsammans med ditt eget tema.

2. Bygg en testsida content/images.md där du visar att din LESS-struktur fungerar genom att visa upp bilder i olika storlekar. Lägg sidan i menyn och använd shortcoden [FIGURE] när du visar bilderna.

3. På din testsida, lägg till två ytterligare bilder som är skärmdumpar, snapshots av delar av din skärm eller av applikationer.

4. Skapa en blogg under content/blogg där bloggens tema är “Dagens Bild”. Lägg till länken i din meny.

5. Gå ut och fotografera (minst) 3 foton med din kamera och skapa ett blogginlägg för varje bild. I varje blogginlägg visar du bilden ur olika aspekter, minst fyra olika varianter, och beskriver kort med text om själva bilden och dess omständigheter (hur den togs, varför, med vilken kamera och inställningar). Använd Cimage för att beskära eller förändra bilden. Håll allt kort och enkelt, det är fokus på att presentera bilderna i olika format.

6. Bilderna i bloggen skall fungera responsivt, med media queries.

7. Committa och taggar de båda repona som version 5.0.0. Pusha upp repona till GitHub, inklusive taggarna. Gör en dbwebb publish för att kolla att allt fungerar.

#Extrauppgift

Det finns inga extrauppgifter.

#Tips från coachen

Lycka till och hojta till i forumet om du behöver hjälp!

#Revision history