New project online: kuechenstud.io

Posted on January 22, 2013 by Guido

After a long time of planing and working yesterday the new “Küchenstudio” website was launched. Now the 4 podcasts, produced by Philip Banse, have a new home. “Küchenradio”, “Medienradio”, “Studienwahl-TV” and “Datenschau” are now under one platform with the same straight and clear design.

The whole website was done in association with kosmar and we used the “Podlove Podcast Publisher” by eteubert.

My work was to create a WordPress Theme with Podlove Podcast Publisher integration. Setup a Multisite WordpPress installation and migrate all the content from the old websites including comments, ratings etc. One important part was to make sure, that after the launch all old links to media-files, episodes and feeds working well. So at least I configured the rewrite on the old servers.

It’s still something to do but have a look: kuechenstud.io

Open Streetmap Categories WordPress Plugin

Posted on August 15, 2012 by Guido

Today i wrote my first WP plugin. Here you can see it in action.

The plugin embed an OpenStreetMap map to a page by using the OpenLayer API with a simple shortcode. For every category in your blog a different layer on your map show markers for every article with an geotag. You just have to save the lon and lan parameters in a custom field. It’s possible to use different marker images for every category.

In the plugin settings page you can make some basic settings like:

map dimensions
map center point
initial zoom faktor
exclude categories
article custom field for marker lon and lat parameters
marker popup content
marker images path

You can download the plugin here: http://kito.github.com/OSM-Categories/ and i added it also to WordPress Developer Center – just waiting for the request confirmation.

WordPress Youtube shortcode for lightbox playing

Posted on August 10, 2012 by Guido

This solution to embed a YouTube-Player in your WordPress-Theme was used to show just a preview image and on click play the video in a lightbox. For the lightbox I used the Easy-Fancybox Plugin.

Here is my theme function:

function youtube_shortcode_handler( $atts, $content = null ) {
   extract( shortcode_atts( array(
      'size' => 'big',  // the image size, just for css styling
      'id' => 'tOhU7wqWV3E', // the youtube ID
      // ...etc
      ), $atts ) );  

  // check for highest resolution preview image from youtube, the @ disables warnings
  if(@file_get_contents('http://img.youtube.com/vi/'. $id .'/maxresdefault.jpg')) {
    $youtube_img = 'http://img.youtube.com/vi/'. $id .'/maxresdefault.jpg';
  }
  // if highest resolution dosn't exists check for the next
  else if(@file_get_contents('http://img.youtube.com/vi/'. $id .'/hqdefault.jpg')) {
    $youtube_img = 'http://img.youtube.com/vi/'. $id .'/hqdefault.jpg';
  }
  // no high resolution preview images - take the default
  else {
    $youtube_img = 'http://img.youtube.com/vi/'. $id .'/0.jpg';
  } 
  // check for content as title
  if($content) $title = '<div><h2><span>'. $content .'</span></h2></div>'; else $title= '';
  // return html markup    
  return '<div class="youtube '.$size.'"><a href="http://www.youtube.com/embed/'. $id .'?autoplay=1&wmode=transparent">'. $title .'<div><img src="'. $youtube_img .'" alt="'. $content .'"></div></a></div>';    
}

add_shortcode( 'youtube', 'youtube_shortcode_handler' );

Now you can use this shortcode in your editor:

This will generate the following markup and you can easy style it with CSS. I know the markup can be much more simple, but this was for a special case.

<div class="youtube medium">
  <a href="http://www.youtube.com/embed/2gq8cwj-Exc?autoplay=1&wmode=transparent">
    <div><h2><span>DER HOBBIT Trailer German Deutsch | FullHD 2012</span></h2></div>
    <div><img src="http://img.youtube.com/vi/2gq8cwj-Exc/maxresdefault.jpg" alt="DER HOBBIT Trailer German Deutsch | FullHD 2012"></div>
  </a>
</div>

DER HOBBIT: EINE UNERWARTETE REISE – offizieller Trailer #2 deutsch HD

This is the result of the shortcode below without any additional styling. Here you can find a real example with some styling and a play button: http://www.optegra-deutschland.de/ueber-uns/movies/

Don’t forget to enable Easy-Fancybox for YouTube on the plugin settings page.

WordPress responsive images

Posted on August 9, 2012 by Guido

As I worked on my last projects I found a little problem for responsive WordPress-Themes. By default WordPress adds width and height parameters to every image tag. This is very disruptive for responsive themes, because you don’t want a fixed image size. In your CSS file you set image max-width: 100%, so the images are scaling on different viewport sizes. The width parameter prevents this. It’s easy to remove these parameters by adding this function to your theme functions.php file:

function remove_thumbnail_dimensions( $html ) {
  $html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );
  return $html;
}

add_filter( 'post_thumbnail_html', 'remove_thumbnail_dimensions', 10 );
add_filter( 'image_send_to_editor', 'remove_thumbnail_dimensions', 10 );

I found this trick here: http://css-tricks.com/snippets/wordpress/remove-width-and-height-attributes-from-inserted-images/ and the original is here: http://wpdailybits.com/blog/remove-the-width-and-height-attributes-from-wp-image-uploader/539

Thanks a lot!

New Projects Update

Posted on August 9, 2012 by Guido

The last new project post was long time ago. Of course I was on holidays too, but however somethings were finished:

Be Excellent Relaunch

Responsive WordPress Theme, design and concept by Markus Angermeier - kosmar

bee.io

Optegra Deutschland Relaunch

Responsive WordPress Theme, client kombinat-berlin, design by Georg Peltzer – Rex Design

optegra-deutschland.de

Guido Handrick Developers Blog

Frontend- and Backend-Development

Tag Archives: WordPress