Länge sedan ett lördagsprojekt kördes igång, nu vart det dags igen. Sambo som jobbade, fem öl, lite havssaltad choklad och dåligt utbud på TV ledde till att jag knackade ihop ett snabbt bildgalleri vilket senare utvecklade sig till ett plugin vilket jag tänkte dela med mig av.

Så, varför bygga ännu ett galleritillägg till WordPress när det redan existerar 1000-tals? Jo, ingenting passar mig och 99% har något slags fel och passar inte alls mina behov på avskalad enkelhet.

Felen som finns i de befintliga är bland annat att det innehåller 90% fler funktioner än vad som egentligen behövs, krångligt UI som kräver 100 inställningar innan man är redo och köra, egna menyer och shortcodes som inte direkt är användarvänliga och känns klumpiga.

Vad skiljer då detta tillägget mot de flesta andra? För det första så finns det inga direkta inställningar, ladda upp alla bilder i ett inlägg eller en sida, tryck på knappen och du är klar. Det skapar automatiskt två nya bildstorlekar vilka lägger sig prydligt bredvid varandra. Inkludering av Fancybox vilket ger bilderna en lightboxeffekt samt möjlighet att bläddra genom galleriet.

http://www.youtube.com/watch?v=QcG4IdYWdNc&hd=1

Installation

1. Ladda ned, packa upp och lägg i mappen wp-content/plugins
2. Aktivera tillägget
3. Lägg till ett nytt inlägg eller en ny sida, ladda upp dina bilder, du behöver inte infoga dem i inlägget, och tryck på Cynatic WP Gallery-knappen i editormenyn.
4. Klart!
5. Alternativ: Editera cwp-gallery.php, ändra $width = 560; till $width = 600; för att öka bredden på bilderna.

Lite saker att känna till om projektet

1. Nej, problem med IE6 och IE7 kommer inte fixas eller lösas.
2. Gamla bilder som redan är uppladdade kommer inte fungera, ladda upp dem igen eller ladda hem ett tillägg som formar om bilderna – ex. Regenerate Thumbnails.
3. Buggar? Konstigheter? Det finns säkert en hel del. Snacka om dem i kommentarerna nedan.
4. Tillägget är inte testat i Internet Explorer, enbart senaste versionerna av Chrome, Firefox och Safari.
5. Fungerar bra med TwentyEleven (använd bredd 560) och TwentyTen (använd bredd 600).
6. Varje bild har ett val för att exkludera bilden från galleriet.

Uppdateringar

2011-07-18, lade till en saknad css-klassen. Fixade exkludering av bilder.

Ladda ner Cynatic WP Gallery

Demo med bredden 560px

Idag upptäckte jag något som kommer gäcka och irritera många när CSS3 blir mer allmänt använt. Box-shadow och transparenta bilder går inte ihop.

Önskad effekt i exemplet ovan är att använda rundade hörn med en subtil skuggning runt. Men eftersom box-shadow enbart sätter skugga runt boxen och inte under så kommer den transparenta bilden tappa i effekt om den används.

Notera att padding är satt på 3px runt bilden i exemplet.

Exempel på hur du använder box-shadow

box-shadow: <horisontal offsett> <vertikal offsett> <blur> <färg>;

För att använda box-shadow redan nu så använd -moz-box-shadow samt -webkit-box-shadow.

Lösningen involverar mer CSS3

Hur man löser problemet är egentligen lika briljant som enkelt. Du använder ett annan CSS3 metod: border-radius.

På bilden i mitt exempel så sätter jag border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; för att följa mitt rundade hörn.

Kommer följa upp denna bloggpost med mer ingående analys av både box-shadow och border-radius.

Sidan, och uppdateringen, verkar klart bättre och är personligen redan på gång att leta nya ikoner till en del webbprojekt jag har.