Anton Niklasson

Sverige – Ryssland

"Tårarna bara rinner, Rhenberg.."

Decisions, not options.

Wunderlist

Wunderlist

Jag har ofta problem med jag är alldeles för dålig på att göra det som jag borde göra. Att fastna framför Facebook är inte särksilt svårt. TVn är också ganska duktig på att störa mig.

Jag behöver något som hjälper mig ur det där, och istället ägnar min tid åt saker som faktiskt ger något. Som att plugga till exempel. Nu den senaste veckan har jag faktiskt tagit ett stort i rätt riktning. Jag har börjat användar Wunderlist. Programmet finns till flera stora plattformar. Android, iPhone o. iPad, OSX och Windows.

Egentligen är det mer än att man bygger listor. Listor som består av saker att göra, inget banbrytande koncept direkt. Man kan skapa flera olika listor, och döpa dom. Det går också att lägga till anteckningar, deadlines, alarm osv. Det som jag tycker är så bra är att det synkas till ”molnet”. Vilket gör att jag slipper sitta och fundera på vart jag skrev vad, och vart det har tagit vägen. Det jag skriver i min telefon finns sekunder senare både på webben och i skrivbordsappen. Inte nog med att det är praktiskt och enkelt, 6Wunderkinder har även lagt en stor del av sin energi på att göra det snyggt. Och det är de lyckats riktigt bra med!

 

Ta bort 3px ”buggpadding” på bilder!

Jag har stött på ett litet, men väldigt irriterande och konstigt, problem på vissa hemsidor jag jobbat med. Bilder får en konstig padding vid botten. Det kan väldigt enkelt förstöra en layout. Visst, det kanske inte är världens grej. Men när man väl upptäckt det förstoras mellanrummet något brutalt.

Lösningen till den här buggen, som jag nog får lov att kalla det, är väldigt enkel. Ge bilden, eller img-taggen för att vara mer exakt, följande CSS-kod så är problemet ur världen:

[crayon]
img { display: block; }
[/crayon]

Finasmode.se

Idag har jag avslutat ett kort litet projekt: Finasmode.se. Finasmode är en modeblogg som drivs av Josefin Eliasson.

Hon har tidigare bloggat på blogg.se, där hon inte trivdes särskilt bra. Nu har hon alltså tagit steget till en egen domän, och full kontroll.

Jag har installerat WordPress på hennes domän, och även designat ett WordPress-tema till sidan. Hon hade själv en  relativt klar bild om vad hon ville ha på sin sida, så därför var det i princip bara att köra igång.

Allting blir så mycket lättare för mig när de som vill ha en hemsida vet själva vad de vill ha. Det är lite som att köpa en present åt någon som vet exakt vad de önskar sig. Väldigt roligt.

Nu ligger alltså sidan online, och den är verkligen värt ett besök! Besök Finasmode.

Finasmode finns nu även med bland mina referenser, checka gärna dem också om det passar!

HTML i Email Är Svårt och Omständigt

Att vi får snygga och ”korrekta” emails är inte något som är särskilt konsigt. Men få vet nog hur mycket jobb som faktiskt ligger t ex ett nyhetsbrev ifrån PC För Alla. För det första tolkas ingenting som finns i head-taggar. För det andra är CSS inom <style> inte att lita på. Och för det tredje så fungerar inte de moderna tekniker med divar, floats osv.

För att applicera CSS i HTML-email krävs att du ger varje tagg sin egen style. Vilket är mycket tidskrävande.

Chris Coyier har en screencast i sitt videoarkiv som förklarar där han pratar om varför det är som det är, och vad vi kan göra för att få det hela att fungera. Mycket sevärt!

Slumpa Fram En Bild Med PHP

I temat White som jag jobbar med just nu bestämde jag mig för att slumpmässigt välja det foto som visas i headern. Jag valde också att göra det via PHP istället för javascript. På så vis är det optimerat för så många användare som möjligt. Om jag istället använt javascript, eller motsvarande, är det en del internetanvändare som inte kan se bilderna.

Den här lilla ”processen” görs i ett par steg vilka är dessa:

  1. Lokalisera och precisera den mapp du valt att placera bilderna i.
  2. Ange vilka format som ”sökningen” ska inkludera. I mitt fall är det jpg-, png- och gif-bilder.
  3. Lägg alla hittade bilder i en vektor
  4. Slumpa fram en av bilderna
  5. Visa bilden med passande html-kod

Jag tänkte göra det här så enkelt som möjligt. Såhär ser min kod ut:

$path = ”wp-content/themes/white/imgs/header/”;
$images = glob($path.”*.{jpg,png,gif}”, GLOB_BRACE);
shuffle($images);

echo "<img src='".$images[0]."'>";

Det är koden i sin helhet. Enkelt, eller hur? Men för er som inte riktigt hänger med tar jag det rad för rad.

På rad 1 lägger vi hel sökvägen till mappen med bilderna i en variabel med namnet path. Ligger koden i samma mapp som bilderna: sätt path till ingenting, dvs “”. Ligger koden i mappen ovanför blir det “images/” osv.

Rad 2 är själva kärnan i det här, och där händer det en hel del. Variabeln images tilldelas resultat av anropet till funktionen glob(). I det här fallet är det en vektor. Den första parametern vi skickar till glob() är vår path tillsammans med "*.{jpg,png,gif}". Den här koden betyder: Hitta filer med ändelserna jpg, png och gif. Stjärnan (*) visar att vi inte har några “filter” på filernas namn. Parameter nummer två är en så kalllad flagga. Det ger oss möjlighet att berätta för funktionen att vi vill göra något lite annat än vad som förväntas. GLOB_BRACE berättar att vi vill bryta upp allting inom { och } och tolka det som tre olika "sökningar".

Nu har vi alltså alla bilder ifrån mappen i vår vektor images. Nu ska vi välja ut en av dem. Funktionen shuffle() gör precis vad det låter som. Precis som shuffle-funktionen i din iPod så blandas hela listan, eller vektorn. Det första elementet i vektorn är nu alltså slumpmässigt utvalt.

Då behöver vi bara visa bilden med passande html-kod. Jag har valt att skriva ut koden direkt, men det självklart lika bra att returnera koden.

echo “<img src=’”.$images[0].”’>”;

Där har du det, enkelt men effektivt: Hur man slumpar fram en bild med PHP.

Använd get_the_content() Och Behåll Formateringen

I WordPress finns det en funktion som heter the_content. Den skriver ut, inte helt oväntat, den aktuella postens innehåll. För att kunna använda själva innehållet i kod måste du därför använda funktionen get_the_content, som i sin tur inte skriver ut innehållet. Den returnerar istället innehållet. Något som är en aning krångligt med get_the_content, och som jag inte riktigt förstår poäng av, är att alla html-formatering försvinner vid returneringen.

Såhär gör du för att behålla all formatering:

  1. Öppna (eller skapa) functions.php
  2. Klistra in följande kod:

function get_the_content_with_formatting ($more_link_text = ‘(more…)’, $stripteaser = 0, $more_file = ”)
{
$content = get_the_content($more_link_text, $stripteaser, $more_file);
$content = apply_filters(‘the_content’, $content);
$content = str_replace(‘]]>’, ‘]]&gt;’, $content);

return $content;
}

 

Sim-sala-bim! Nu kan du hämta det formaterade innehållet i din kod via get_the_content_with_formatting()!

Hur Använder Jag More-taggen I En Custom Post Types?

Under tiden jag byggde om den här sidan för att köra WordPress stötte jag på ett problem. Ett problem som jag är helt säker på att många andra också brottats med.

Problemet uppstod när jag ville bryta av en post m h a more-taggen. I WordPress egna standardposter är det inga som helst problem, där fungerar det utmärkt. Men när jag skapat en posttyp, en custom post type, blir det knasigt. Det är precis som att WordPress inte ser more-taggen, som faktiskt ligger där.

Upplägget ser ut såhär: Mina referenser, och mina downloads, är egna posttyper. Och på respektive sida vill jag kunna bestämma vad som visas i ”flödet” av downloads och referenser. Jag visar en utdrag m h a funktionen the_excerpt() och låter sedan användaren klicka sig in i varje posts singelsida. Där visas sedan hela inlägget via the_content(). Problemet är nu att the_excerpt() plockar ut en förutbestämd längd av hela innehållet, istället för att ta allting som ligger före min more-tagg. Jag har för mig att det är 50 första orden. Visst, det går att låta WordPress plocka ut ett utdrag, men det blir inte alltid så bra som man skulle vilja ha det.
Det är precis som att WordPress inte ser den more-tagg som jag lagt in för att visa vad jag vill ha som utdrag.

Såhär löser du problemet:

  1. Öppna den fil som innehåller loopen som krånglar. I mitt fall ligger den dels i page-downloads.php och dels i page-referenser.php
  2. Hitta den del i loopen som ser ut som följande: <? the_excerpt() ?>
  3. Klistra in följande på raden precis ovanför: <? global $more; $more = 0; ?>

Tips: Som en parameter i the_excerpt() kan du välja att skicka med länktexten som läggs till efter utdraget. Jag brukar använda t ex the_excerpt(‘Läs mer’)

Sådär, då var problemet löst! Är det några som helst problem med det här – kommentera det här inlägget så ska jag göra mitt bästa för att hjälpa dig!