Regenerate thumbnails räddar dina bilder
Nu har WordPress 2.9 vart ute ett tag och många har hunnit implementera the_post_thumbnail i sina bloggar. Det finns bara ett litet problem. Eller “problem” som det egentligen bör benämnas, allt har en lösning.
Många bilder som är uppladdade tidigare än 2.9, eller rättare sagt innan du aktiverade thumbnails-funktionen kan vägra att fungera. Läs hela inlägget →
Ny uppdatering av Cynatic, äntligen som vissa skulle sagt
Efter fyra versioner, en månad och 15 utkast så har jag nu kodat ihop en ny version av webbplatsen. Den svåraste klienten är dig själv helt klart!
Vad är ändrat?
- Allt omkodat från grunden
- Breddat sidan och fixat om boxarna
- Mer individuella sidor och grafik
- Modernare utseende, även om den är byggt på samma färger som innan
- Mer mot en webbplats istället för blogg enligt mig
Oh no, please don’t make me fix it
Större version om du klickar på bilden.
Snälla! Gör om! Jag vill inte fixa koden! Jag gör ny istället, snälla …
Uppföljning på the_post_thumbnail, skapa en egen definition
En liten snabb uppföljning på mitt inlägg om the_post_thumbnail() där jag skrev lite om grunderna i den nya funktionen.
Problemet som finns är om man utvecklar ett tema så finns det ingen chans att veta vad en användare definierar som storlek i sina inställningar. Det finns två sätt att komma ifrån detta, antingen använder du get_option(); där du kan hämta thumbnail_size_w, thumbnail_size_h, medium_size_w, medium_size_h, thumbnail_crop med mera och läsa av och manipulera det som användaren definierat.
Eller så punktmarkerar du en egen storlek och kommer bort från problemet med att användaren troligtvis gör fel i sina inställningar.
Vad du gör är att i functions.php är att du skapar din egna bild-dimension för just miniatyrer. Detta är enkelt och gör att du har större kontroll på bilderna, du kan ange flera olika bildstorlekar som passar in exakt vart du vill ha dem och du slipper problem med användardefinierade storlekar.
[php]add_image_size( namn, width, height, crop);[/php]
Översättning:
[php]add_image_size( ‘min-egna-bild’, 650, 250, true );[/php]
Vad som kommer hända är att du kan, istället för att använda thumbnail/medium/large i funktionen the_post_thumbnail(), kan använda min_egna_bild istället.
Det enda problemet detta ger är att användaren måste mata in en tillräckligt stor bild för att täcka ytan av denna bilden, det vill säga större än 650×250. Men – du får bättre kontroll och ett bättre flöde i ditt tema.
Att använda the_post_thumbnail() i WordPress 2.9
WordPress släpptes för en stund sedan i version 2.9 och med släppet följde en efterlängtad funktion med för de som utvecklar teman, nämligen the_post_thumbnail(). WordPress Codex är dock ganska sena med en bra Wiki-artikel på ämnet så jag tänkte skriva ihop en liten bas-guide till hur den nya funktionen kan användas.
Vad som inte berättas utan krävdes en del sökande för min del är att funktionen först måste aktiveras från functions.php (filen ligger i samma mapp som ditt tema finns i) för att fungera. Anledningen vad jag gissar på är bakåt-kompatibilitet så att funktionen inte används där det inte stöds.
[code lang="php"]add_theme_support( 'post-thumbnails' );
Lägg in raden i functions.php. Stäng dock inte filen än, vi måste också definiera storleken på miniatyr-bilderna. Detta görs med funktionen set_post_thumbnail_size(). Funktionen tar ett par argument int width, int height, bool hardcrop.
[code lang="php"]set_post_thumbnail_size( 250, 150, true );
Använder mig personligen av raden ovan, här sätts höjd och bredd till 250x150 och hardcrop till sant. Hardcrop är dock för mig ett frågetecken än så länge då det inte verkar göra till eller från det jag har testat. Dess egentligen funktion är att beskära bilden snarare än att förändra storleken på den, vilket ger fler valmöjligheter i fråga om höjd/bredd på bilderna man laddar upp än om vi bara skulle förändra dess storlek.
När du experimenterar med storlekarna så rekommenderas det att du installerar tillägget Regenerate thumbnails så du slipper editera om alla miniatyrer i varje inlägg.
För att hämta din miniatyr så måste du först definiera den i en bloggpost, efter att du sparat functions.php och går in i editorn så märker du en ny ruta som heter Post Thumbnail, definiera din miniatyr i den.
Nu är det dags att hämta bilden i vår loop. Jag rekommenderar att du kontrollerar så att inlägget har en minityr först och främst.
[code lang="php"]if ( has_post_thumbnail() ) { the_post_thumbnail(); }
Nu är det dags att utforska the_post_thumbnail(). Funktionen tar en mindre uppsjö med argument, för det första kan du definiera din miniatyr med ett namn: thumbnail, medium, large där thumbnail är standardvärdet i funktionen.
Exempel:
the_post_thumbnail('medium'); hämtar och skriver ut mediumstorleken av bilden.
Är du inte nöjd med standardvärdet av storleken på bilden eller behöver lägga in en css-klass? Funktionen tar även arrays med olika argument.
Ett exempel är:
[code lang="php"]the_post_thumbnail( array(300, 300), array('class' => 'min-class-ett min-class-tva') );
Som du ser så gör jag om miniatyren till en storlek av 300x300 och ger den två klass-attribut, min-klass-ett och min-klass-tva. Du kan även lägga in andra värden som rel, title, alt med mera för större kontroll.
Cache och att uppdatera bilder med jQuery
Tänk dig att du har ska fixa bildeditering på sidan du utvecklar. Tänk att du vill att användaren ska kunna förändra små delar av bilden i webbläsaren och för att få det att gå så smidigt som möjligt så vill du uppdatera bilden utan att webbläsaren laddar om.
Problem: Webbläsarens cache sparar bilden och hämtar den gamla, det går tyvärr inte ens att lita på no-cache/no-store meta-taggarna.
Lösningen: Uppdatera bilden med en query-sträng.
Tänk dig att du har följande HTML:
[code lang="html"]<div>
<img src="bild.jpg" alt="" title="" id="image" />
<input type="button" value="update" id="update" />
</div>
Du vill nu att bilden ska uppdateras så fort någon trycker på knappen. För enkelhetens skull så använder vi jQuery.
[code lang="javascript"]
$('#update').click( function () {
$('#image').attr('src', 'bild.jpg');
});
Javascriptkoden ovan ska enligt reglerna byta ut bild.jpg mot bild.jpg, det vill säga uppdatera bilden från servern igen. Det är vid detta momentet cache-funktionen spökar.
Vad vi gör då är att vi lägger till en querysträng i slutet av bilden.
[code lang="javascript"]
$('#update').click( function () {
var timestamp = new Date().getTime();
$('#image').attr('src', 'bild.jpg?t='+timestamp);
});
Vi lägger alltså till en tidsstämpel som sätts till epoch/unixtid och lägger till den som en sträng efter bilden. Bilden kommer alltså hämtas som bild.jpg?t=123445345 där siffrorna alltid ändras och aldrig är unika.
Vad detta innebär i praktiken är att webbläsaren luras att tro att bilden som hämtas alltid är unik och inte är samma som redans finns lagrad - det vill säga att bilden kommer alltid att förnyas, oavsett cache.
Hur en design går rakt åt fanders
Kan inte hjälpa att smått känna igen mig ibland … Sjukt bra illustration! (via @lillbra)
Web Hack Night Sundsvall
Som student i Sundsvall med ganska lågt pengaflöde är det ganska enerverande att se vad som pågår nere i de större städerna (okey, bältet mellan Sthlm och Gbg verkar vara extra aktivt) med diverse WP-fika, Webb-kaffe, allmänna webb-nörd konferenser/möten.
Jag fick då en idé som jag föreslog en blivande webbnörd Jansson, varför inte någon gång i månaden eller varannan månad köra ett Webbhack. Folk som är intresserade kan träffas över någon kaffe eller fyra med laptopsen i knäet och hacka till något kul antingen till träffen eller under träffen. Möjligheterna är enorma med olika teman varje kväll eller bara att brainstorma.
Min tanke att köra kvällen mellan förslagsvis 19.00 fram till 00.00 eller så länge som möjligheten finns. Platsen bör vara någonstans med WiFi, beanbags och möjlighet till kaffeapparat.
Tänkte gå ut med detta bland studenter först och främst då mitt kontaktnät är störst där, men gillar du idén och är från Sundsvalls-området så tveka inte att hojta till. Träffen är värdelös utan folk som vill komma!
Det vore helt perfekt att kunna träffa likasinnade och umgås lite i staden som enbart inhyser statliga myndigheter, och allt tråkigt och stelt som kommer med definitionen.
Idéer, frågetecken eller vill du se detta hända? Skrik till i kommentarerna eller kontakta mig.
Att bli en Webbdesigner, en e-bok
Länge har personer, både i min närhet och personer som jag träffar i vardagslivet, frågat mig vad exakt en webbdesigner gör. Främst har jag definerat vår yrkesroll som väldigt bred och en slags jack-of-all-trades – kunskapen är bred och rör många områden – men främst handlar det om att skapa webbplatser.
Antionio Rivieras har nu definerat rollen i sin nya e-bok som handlar just om hur man blir webbdesigner men ännu viktigare, vad rollen som webbdesigner är.
Boken, som är lätt och behändig, tar upp grunderna inom yrket – hur man lär sig, vart man börjar, inkomster och vilka val som är viktiga inledningsvis.
Du kan enkelt köpa boken via SMS från bliwebbdesigner.se, det kostar inte mycket och är verkligen värd pengarna!
Tillgänglighet via JavaScript
Har funderat på detta ett tag, hur fungerar Javascript för blinda eller för andra som använder olika hjälpmedel för att ta sig runt på internet.
Att använda ramverk så som jQuery kan vara en lösning så att det finns en naturlig fallback på alla funktioner som konstrueras.
Ska klura lite på detta till helgen, men vad har ni lärt er, sett och läst? Finns det några bra och utförliga resonemang när det gäller ämnet JavaScript och tillgänglighet?
Kreativ24 – efterspel och tankar
I det stora hela är jag glad att jag vart med om evenemanget. Fick lära mig sjukt mycket om olika ingångssätt på problem, men främst fick jag – som ett stort ego-boost – min egna kompetens och kunskap bekräftad.
Det Kreativ24 handlade om var att under 24 timmar exakt lösa ett problem som tre stycken uppdragsgivare ville ha löst. Då vi var 30 personer så delades vi upp i sex grupper, det vill säga två grupper per uppgift. Så lite tävling blev det ändå, främst delen att undanhåll info från den andra gruppen så våra egna briljanta idéer blev “unika”.
Redan innan början av evenemanget så anade jag ett problem, vid genomgången sa arrangörerna att vi inte skulle få behålla eller få någon som helst avkastning från våra produkter. Uppdragsgivarna är de som äger de vi skapar. Jag har oftast en annan syn på saker. Nåväl, konstruktion av webb betyder ingenting utan källkod eller källfiler.
Kanske beror det också på att det var första året som evenemanget kördes, men uppdragen var generellt ganska bleka. Förutom för produktlösningen, som vanligt på Mittuniversitetet.
Låt mig förklara detta närmare. Produktlösningen var en anpassning och ett nytänk på medicinförpackningar, som både äldre kan öppna och barn inte kan öppna. Intressant? Mycket.
De två andra uppdragsgivarna vart en kommunikationsförbättring av Sjukvården samt en kommunikations/marknadsföringsplan för sex små bygdegårdar i Jämtland.
Jag gjorde det senare med webbplats, viral marknadsföring, SEO och tillgänglighet.
En sak som slår mig är skillnaden, hur ska man ens kunna jämföra marknadsföringsplan med produkt? Något abstrakt mot en fysisk sak? En produkt förstår en femåring medans en plan hur marknadsföringen kan se ut är massa text på ett papper och kräver folk som förstår och vet hur och varför en sådan finns.
Jag tror många som deltog håller med om att uppdragen annat än produkten riktad mot Industridesigners (oftast de som får mest och är otroligt bortskämda på campus Sundsvall) var otroligt bleka och svårt att spinna vidare på (eller får någon slags kontakt/erbjudande/etc) efter evenemanget.
Allt som allt så är jag främst glad över att jag ingick i en bra grupp, vi var otroligt kreativa med våra idéer och drog många skratt och mycket eftersnack från publiken när vi berättade om dem. Sjukt kul, mycket info som kommer leva med mig – men tills nästa år får vi hoppas på bättre uppdrag och kanske ett omtänk angående hur verket kan användas efter dagarna.
Strul med Backtype Connect och profilbilder
Backtype Connect är ett WordPress plugin som används för att spåra kommentarer och liknar mångt och mycket Disqus, vilket jag inte hyser mycket kärlek för, men har också skillnaden att den kan integrera kommentarer och tweets från andra källor utan att gå över helt till deras system.
Skulle bara vilja ge en heads-up om att tillägget har ett mindre problem med profilbilder, rättare sagt get_avatar() funktionen i WordPress.
Hämtas avataren senare i temat du använder, det vill säga efter kommentarerna på en sida, och man precis har bytt bild via Gravatar så kommer den äldre bilden visas istället utan möjlighet att uppdatera på grund av Backtypes cache-funktion. Detta verkar enbart hända ifall du väljer att visa Backtypes importer efter kommentarerna.
Troligtvis är detta bara en temporär krock (tills nästa version, även om senaste unstable inte visar på någon fix) och kommer lösas inom kort. Tänk bara på att aldrig kalla get_avatar(); efter att Backtype Connect vart i farten. Problemet beskrivs mer deras getsatisfaction.
Uppdaterat 1 Dec 2009: Problemet verkar lösa sig med en workaround som finns på deras GetSatisfaction.
Snåriga skatte- och inkomstregler deluxe
Under studenttiden har jag främst utvecklat projekt gratis åt diverse studentföreningar eller fått en projektanställning hos diverse klienter som önskade sig en webblösning. Problemet är att nu håller jag på att närma mig en brytpunkt där min tid inte längre kommer tas upp av studerande utan jag måste hitta en försörjningsmetod.
Min tanke rent och slätt är att om jag inte hittar ett fast jobb så skaffar jag en F-skattesedel och frilansar tills jag hittar ett fast jobb. Varför inte frilansa hela tiden är kanske frågan som ställs, den är enkel att svara på – säkerhet! Sen om det tar fart så kanske det inte spelar någon som helst roll och frilansningen blir mitt “jobb”.
Anyways – första steget är ju att söka F-skattesedel. Vilket kändes som det enklaste i världen – tills jag kom till ord som “pensionsinkomst”, “momsplikt”, “beräknad vinst” och schablonavdrag. Panik res i mitt inre angående hur allt det där kommer lösas. Speciellt när jag fick för mig att skatt betalas in i förväg på det du tror du kunna tjäna (?). Vad händer då om det inte går så bra initialt?
Skulle behöva en “ekonomi för dummies” eller liknande titel för att sätta mig in i hur allt fungerar till punkt och pricka, det känns som att allt går under ifall något missas och Skatteverket knackar på din dörr.
Nåväl, allt är inskickat och jag hoppas att jag gjort rätt och fattat allt rätt. Verksamt.se är en riktigt guldtjänst för den som är sugen på en bra överblick hur det fungerar.
Varför prefix på radius och shadow?
Egentligen mer en fråga eller rättare sagt hur tänker man här.
Varför har både Geckoutvecklarna (Firefox) och utvecklarna av Webkit bestämt sig för att använda sig utav -moz respektive -webkit för de experimentella implementeringarna utav CSS3 specifikationen?
Låt oss kolla lite på vad vi har att jobba med, box-shadow, text-shadow med mera. Alla dessa funktioner kommer att vara standard i CSS3 final. Nu vid draft är det, som vanligt, diskussioner om hur implementering ska se ut och hur det det bör renderas, tolkas och skrivas. Sure – det går jag med på.
För både box-shadow och text-shadow så är tolkningen av parametrarna likadana. IE stödjer naturligtvis inte funktionen än, men det spelar ingen roll just nu.
Borde vi inte kunna skippa -moz/-webkit? Borde inte båda webbläsarna naturligt reagera på kommandot utan prefixet också?
Två sajter jag vill utveckla nu men inte hinner
Just nu finns det två saker jag skulle vilja ta mig tid att fixa till och fixa upp. För det första är CSS:ART vilket är tänkt mer som en upplevelse, kul grej och inspirationssajt. Det som i så fall skulle ingå är en slumpgenerator, en jävla massa blockelement och CSS-regler. Som det ser ut i huvudet är det coolt, snyggt och väldigt onödigt.
Den andra delen är lite mer seriös. WP-functions.com köptes för ett antal månader sedan in på fyllan. Idén är en slags databas och registrering för funktioner inom WordPress-communityn för att hantera (och dess främsta mål undvika) kollisioner. Jag har efter dess fått svårt att bestämma vilken riktning sidan ska ta, så idéer finns – men definitionen och målet saknas.
Dygnet bör utökas till 48timmar är mitt förslag. Alternativt att forskare kommer på ett sätt att radera vårt behov av sömn. Sömlöst viloläge någon? När någon del inte används så sover den?