New project online:

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:



WordPress Youtube shortcode for lightbox playing

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(''. $id .'/maxresdefault.jpg')) {
    $youtube_img = ''. $id .'/maxresdefault.jpg';
  // if highest resolution dosn't exists check for the next
  else if(@file_get_contents(''. $id .'/hqdefault.jpg')) {
    $youtube_img = ''. $id .'/hqdefault.jpg';
  // no high resolution preview images - take the default
  else {
    $youtube_img = ''. $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="'. $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="">
    <div><h2><span>DER HOBBIT Trailer German Deutsch | FullHD 2012</span></h2></div>
    <div><img src="" alt="DER HOBBIT Trailer German Deutsch | FullHD 2012"></div>

The video cannot be shown at the moment. Please try again later.

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:

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

WordPress responsive images

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: and the original is here:

Thanks a lot!

New Projects Update

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

Optegra Deutschland Relaunch

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