A new project ist online! My OSM-Categories WordPress Plugin was used.
http://www.geschichte-vor-ort.org
New Project: geschichte-vor-ort.org
Reply
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>
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!