Frame Killer

A few days ago i found my vegikochbuch.de website under the URL vegikochbuch.eu with some ad-banners and pop-ups and other stuff. After checking the source code i spotted the <iframe> tag thats includes my website.

I found the registrant and the registrar organisation and wrote 2 emails. The registrant dosn’t replied and the organisation can’t help because they are only the domain registrar and the server is somewhere else. What you gonna do about it? I found the answer here: http://en.wikipedia.org/wiki/Framekiller  and these lines of code working perfect for me:

:css
  html { display : none ; }
:javascript
  if( self == top ) {
    document.documentElement.style.display = 'block' ;
  } else {
    top.location = self.location ;
}

Open Streetmap Categories WordPress Plugin

 

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

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>

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: 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

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!