Den nuvarande sidan använde ett kommersiellt tema och ARC ville växla till ett annat tema från samma företag. De behövde hjälp med att installera temat, omorganisera och specialanpassa temat till sitt innehåll samt utveckla ett par nya funktioner.

Deras webbsida är väldigt nyhetsdriven och det nya temat var bättre anpassat för detta. Utmaningen låg i att omorganisera innehållet på ett smart och logiskt sätt, samt att lyfta fram den viktigaste informationen på framsidan.

Vi skapade en ny sida för administrativa inställningar som var mer anpassad till ARCs innehåll och sidstruktur. Med denna får de mer kontroll över vad som visas på framsidan, utan att behöva ändra något i temats kod.

Den andra större delen av projektet bestod av att skapa ett internt system där projektets huvudaktörer kan utbyta idéer. Detta hade tidigare gjorts med hjälp av LinkedIn och Dropbox, men önskemålet var att integrera kommunikationen på den nya sidan. För denna delen använde vi det kraftfulla WordPress-tillägget BuddyPress, med vilket ARC kan skapa grupper för olika aktörer, där de kan ställa och svara på frågor, dela filer och skicka privata meddelanden.

Sammantaget var det ett spännande projekt, speciellt att jobba med ett kommersiellt tema som grund och sedan modifiera och bygga funktioner ovanpå det.

Besök ARCs webbsida

Nu har vi dock gjort slag i saken och åsidosatt lite tid åt oss själva och jobbat igenom julian.se!

En ny form och design, en genomarbetning av innehållet och lite nya funktioner här och där. Då vi använder WordPress för väldigt många av våra kundprojekt, föll det sig logiskt att bygga om sidan med WP som grund – förra versionen var faktiskt hederlig gammal HTML med PHP-sidor, utan adminsystem.

Förutom nya funktioner för sidan utåt, har vi även fokuserat på att utveckla interna funktioner,  t ex ett projektregister med skisser, filer och noteringar, där vi snabbt kan filtrera baserat på typ av jobb.

Det finns en del bitar vi fortfarande slipar på, ojämna kanter, sidor som kanske pekar fel, gamla nyheter och poster som behöver migreras från andra system, men vi är glada över att kunna presentera en ny version av webbsidan och kommer jobba på att utöka den med tiden.

Problemet var att alla dessa olika datatyper använder bilder på olika sätt.

Kundprojekt använder sig av funktionen för utvald bild som finns i WordPress sedan version 2.9.

Nyheter, å andra sidan, använder ofta en uppladdad bild, men inte en specifikt utvald bild.

Sidan är även flerspråkig (vi använder oss av WPML) och för en nyhet som översätts så använder vi ofta samma bild som orginal-inlägget – men den bilden laddas inte upp på nytt utan plockas från mediearkivet, vilket gör att den inte existerar i den översatta nyhetens galleri.

Slutligen finns det datatyper som kanske inte har några bilder alls.

Vi behövde därför en funktion som söker efter olika typer av bilder – hittar den en, skrivs den ut, annars letar den efter nästa möjliga.

1. Visa utvald bild, annars sök efter uppladdad bild
2. Visa uppladdad bild, annars sök efter bild i texten
3. Visa bild från texten, annars visa standard-bild
4. Visa standard-bild

För utvald bild använde vi standardfunktionen the_post_thumbnail; för uppladdade bilder get_children; för att kolla efter bilder i texten, använde vi den populär funktionen catch_that_image och slutligen för de inläggen utan bilder visade vi en standardbild som vi lagt i temat.

Funktionen ser ut såhär:

function julian_custom_image() {
  global $post, $posts;
  $first_img = '';
  ob_start();
  ob_end_clean();
  $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
  $first_img = $matches [1] [0];
  //Run a query, which gets tested and used for the second option below
  $attachments = get_children( array('numberposts' => 1, 'post_parent' => get_the_ID(), 'post_type' => 'attachment', 'post_mime_type' => 'image') );

  //1. Post thumbnail
  if ( has_post_thumbnail()) {
    echo '<a href="' . get_permalink() . '" title="' . the_title_attribute (array('echo' => 0) ) . '">';
    the_post_thumbnail('thumbnail', array('class' => 'alignleft'));
    echo '</a>';
  }
//2. Attached image
  elseif (!empty($attachments)) {
    foreach ( $attachments as $attachment_id => $attachment ) {
    $image_attributes = wp_get_attachment_image_src( $attachment_id ); // returns an array
    echo '<a href="' . get_permalink() . '"><img src="' . $image_attributes[0] . '" alt="" /></a>';
    }
  }
  //3. Scraped image
  elseif (!empty($first_img)) {
    return '<div class="cat-img-scraped"><div><a href="' . get_permalink() . '"><img src="' . $first_img . '" alt="" /></a></div></div>';
  }
  //4. Default image
  else {
    echo '<a href="' . get_permalink() . '"><img src="' . get_template_directory_uri() . '/images/post-default-image.jpg" alt="" /></a>';
  }
}

Lite problematik uppstod vid #3, hur vi skulle göra med en bild-URL som plockats ur texten. Alla övriga bilder visas i 100x100px format, dock får vi med funktionen för #3 bara en URL och kan inte på ett enkelt sätt visa en möjlig tumnagelsversion av den bilden.

De bilder vi visar i inlägg är för det mesta max 250px breda och 400px höga, så vad vi gjorde för #3 var att placera bilden i en DIV, men bara visa en del med hjälp av CSS. Hela bilden laddas, men då den inte är speciellt mycket större i orginalformat, blir det inte så mycket resursslöseri. I vårt fall använde vi följande CSS:

.cat-img-scraped {
  float: left;
  margin: 5px 20px 20px 0;
  padding: 5px;
  border: 1px solid #ddd;
}
.cat-img-scraped div {
  height: 100px;
  width: 100px;
  overflow: hidden;
}
.cat-img-scraped img {
  border: none;
  padding: 0;
  margin: 0;
}

Vi kan enkelt kalla funktionen med:

<?php echo julian_custom_image() ?>

i vårt tema och får ett enhetligt upplägg på bilder när vi visar olika datatyper.