Brottsplatskartan v3 lanserad

Efter att ha fått tuffa på i ungefär ett år utan tillsyn har jag under de senaste veckorna piffat till brottsplatskartan.se. Allt är inte klart ännu, men jag tycker ändå det är dags att låta besökarna ta del av den nya formen.

En av grundideerna jag hade när jag startade sajten var att man på språng skulle kunna få information om vad som händer runtomkring där man för tillfället är. Lite dåligt har det därför varit att sajten fungerat riktigt dåligt i mobiltelefoner eller surfplattor. Grunden för den tillpiffning jag gjort av av sajten bygger därför på tanken/begreppet/fenomenet “Responsive Web Design”, som gör att webbplatsen ser bra ut både i en mobiltelefon, på en surfplatta och på en vanlig bärbar eller stationär dator. Att se det in action känns nästan som magi!

Så, eftersom jag tycker det är så roligt att utforska nya tekniker och metoder så har jag passat på att använda följande fiffiga grejjer vid skapande av nya brottplatskartan:

  • HTML5 istället för… jag minns inte vad, men 4 transitional skulle jag tro
  • Responsive Web Design för att göra den härligt tillgänglig överallt, baserat på mallar från Less Framework 4
  • LESS för att göra CSS både mer kraftfullt och lätthanterligt
  • W3.org:s Geolocation API för att avgöra var en besökare kommer ifrån och ge besökaren en direkt länk till deras – troligtvi och förhoppningsvis – korrekta län
  • Implementering av Schema.org:s scheman för geografisk placering och för platsinfo. Införandet av detta gör att platsen och datumet för varje varje händelse på sajten går att utläsa maskinellt. Google kan t.ex. använda denna information för att anpassa sökresultatet.
  • Användandet av webbapplikationsramverket CodeIgniter för att snabbt slutföra jobbet med sajten. CodeIgniter har varit mycket kul att jobba med och ramverket gör att jag organiserar min kod bättre och att jag automatiskt får tillgång till ett gång vettiga och bra funktioner, t.ex. cachning av webbsidorna och snyggare url:er.
  • Tjänsten CloudFlare används för att snabba upp sajten, göra den mer säker och ge mig ytterligare statistik om mina användare.
  • Google Web Fonts få att få ett typsnitt med lite mer karaktär till sajtnamnet och taglinen.

Sen tidigare används även följande standardgrejjer för att driva sajten:

  • HTML, CSS, JS – det är ju trots allt en webbplats!
  • VPS hos GleSys
  • Ubuntu som OS
  • Apache som webbserver
  • MySQL som databas
  • PHP som programmeringsspråk
  • jQuery för att förenkla JavaScriptanvändandet
  • AddThis- och Facebook-delningsknappar för att öka spridningen av sajten
  • Google Analytics för statistik
  • Google Maps för att visa kartor
  • Google Geocoding API för att försöka avgöra platsen för varje händelse

Så. Vill du kolla nya sajten så är det bara att klicka iväg dig till brottsplatskartan.se. Kommentera gärna det här inlägget om du tycker något om den nya formen!

WordPress: function to format teaser different from body

On many sites that I develop I want to show articles that contains both a teaser  text and a body text, and I want to be able to format the teaser different than the body. So…I made a function to accomplish this.

What the function does is that it wraps everything in the post before the “read more”-tag in a div with the class "post-teaser", and everything else in a div with the class "post-body". Then it’s a piece of cake to add som styles to those divs with CSS.

I like it and use it a lot. And here it is:

/**
 * This is a nifty little finction that makes is possible to
 * format teaser and body differently
 *
 * It will output:
 * - teaser/text before the read-more-thingie wrapped in div.post-teaser
 * - body/text after the read-more-thingie wrapped in div.post-body
 * - ..but only if each one exists. so you can get teaser + body, or only teaser, or only body
 *
 * @author Pär Thernström
 *
 */
function ma_teaser_and_body($post_id = NULL) {

 global $post, $more;
 $post_org = $post;
 $more_org = $more;

 if (!$post_id) {
 $post_id = $post->ID;
 }

 $post = get_post($post_id);
 setup_postdata($post);

 // Get teaser/text before the "read me"
 $content = $post->post_content;
 if ( preg_match('/<!--more(.*?)?-->/', $content, $matches) ) {
 // more-tag exists
 $more = 0;
 ob_start();
 the_content("", true);
 $teaser = ob_get_clean();
 } else {
 $teaser = "";
 }

 // Get the content/text after "read me"
 $more = 1;
 ob_start();
 the_content(NULL, true);
 $body = ob_get_clean();
 if ($teaser) {
 $teaser = "<div class='post-teaser'>$teaser</div>";
 }

 if ($body) {
 $body = "<div class='post-body'>$body</div>";
 }

 $post = $post_org;
 $more = $more_org;
 setup_postdata($post);
 echo $teaser . $body;

}

Changelog
27 mar 2011: Updated code a bit due to a problem that occured when no more-tag existed in post.

wp_list_pages: customize the look of pages that have children

Here’s a quick tip for WordPress and the use of wp_list_pages to create menus.

On a web site you often have pages with sub-pages/children and often you want to style these pages a bit different. Perhaps add a plus-sign or an arrow in front of the page. When I was working with Nice Navigation for WordPress I noticed that this was not possible by default in WordPress. It is however pretty easy to fix. Just add this code to your functions.php:

add_filter('page_css_class', 'nice_navigation_page_css_class', 10, 2);
/**
 * adds class "page-has-children" to all pages that have children
 * @param array $class.    The page css class being modified, passed as an array from Walker_Page
 * @param object $page.    The page object passed from Walker_Page
 * @return array            Returns the new page css class.
 */
function nice_navigation_page_css_class($class, $page) {
 // check if current page has children
 $children = get_pages('child_of='.$page->ID);
 if (sizeof($children) > 0) {
  $class[] = "page-has-children";
 }

 return $class;
}

Now every page outputted by wp_list_pages have the class “page-has-children” and you can style them any way you want.