1. Including JS

    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false"></script>
    <script src="js/geo-min.js"></script>

2. Geo location

if(geo_position_js.init()){
    geo_position_js.getCurrentPosition(success_callback,error_callback);
}
else{
    do something else;
}
function success_callback(p) {
    see 3.
}
function error_callback() {
    alert('error');
};

3. Reverse geocoding

function success_callback(p) {
    var lat = p.coords.latitude;
    var lng = p.coords.longitude;

    // reverse geocoding - get address by lat lng
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(lat, lng);
        geocoder.geocode({'latLng': latlng}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            if (results[0]) {
                document.getElementById('address').innerHTML = '<span>Your address: ' + results[0].formatted_address + '</span>';
            } else {
                document.getElementById('address').innerHTML = '<span>No address found.</span>';
            }
        } else {
            document.getElementById('address').innerHTML = '<span>Geocoder failed due to: ' + status + '</span>';
        }
    });
}

Here you’ll find a working example: geo-location.html

A drawback for responsive websites is, that Foundation using px to define all font sizes. But we want different font-sizes for different devices and screens. So we have to teach Foundation to speak in em. And that’s the way:

1. Define the modular scale parameters

Set the variables in your _settings.scss file

$ratio: 1.5;
$baseFontSize: 14px;
$importantModNum: 40px;
$base-size: $baseFontSize $importantModNum;

and add these variables for the modular scale function by Scott Kellum.

$round-pixels: false;

The last variable is missing in the Foundation settings file. But it doesn’t work correctly without. By default all numbers are floored and that means sometimes you get identical values back.

2. px2em function

The modular scale function returns only px values. You need a simple SASS function to convert px to em:

@function px2em ($font_size, $base_font_size: $baseFontSize) {
  @return ($font_size / $base_font_size) + em;
}

I used my px2em function and just change the base-font-size variable. In your .scss files use now px2em(ms(0)) for example to get 1em and px2em(ms(2)) to get 1.5em. Here is a list of all values depending on my parameters: http://modularscale.com/scale/?px1=14&px2=50&ra1=1.5&ra2=0

3. Reset all font sizes to em

Last of all you must change the Foundation font settings to em. By default it’s your $baseFontSize. Just add this line in your app.scss:

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, p, blockquote, th, td, section, article, footer, header, nav {
   font-size: 1em;
}

and set

html {
   font-size: $baseFontSize;    
}

After that you can write your media queries for example like that to increase the font size on very large screens:

@media only screen and (min-width: 1441px) { /* aka very large */
    html {
        font-size: 18px;
    }
}

Here you can check some different modular scale values: http://modularscale.com/

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

1. Highly customizable: cambelt

http://cambelt.co/

<img src="ttp://cambelt.co/200x150/Cambelt?color=234653,eeeeee&font_size=24">

Options: format, text, color, size, font-size, text-color, font-family, https, icons

2. Fit and proper by categories: lorempixel

http://lorempixel.com/

<img src="http://lorempixel.com/200/150/city/2/lorempixel" width="200" height="150">

Options: color/greystyle, size, category, image number, text

3. Fit and proper by tags: flickholdr

http://www.flickholdr.com/

 <img src="http:://www.flickholdr.com/200/150/berlin/4">

Options: size, tag, image number

4. The quick and simple way: placehold.it

http://placehold.it/

<img src="http://placehold.it/200x150.png/cccccc/333333&text=placehold.it">

Options: format, text, color, size

5. For dog lovers at random: placedog

http://placedog.com/

<img src="http://placedog.com/200/150" >

Options: color/greystyle, size

6. For cat lovers: placekitten

http://placekitten.com/

<img src="http://placekitten.com/200/150" >

Options: color/greystyle, size

7. For cute puppy lovers: placepupy

http://placepuppy.it/

<img src="http://placepuppy.it/200/150&n=2" >

Options: size, image number, text, text-bg-color, text-color

To be continued!

But this is not suffient for responsive websites and, if you just define the iframe max-width: 100% by CSS, you still have a problem with the height. The solution is a wrapper around the iframe:

<div class="video-container">
  <iframe width="560" height="315" src="http://www.youtube.com/embed/sftuxbvGwiU" frameborder="0" allowfullscreen></iframe>
</div>

and just a simple basic CSS:

.video-container {
  position: relative;
  padding-bottom: 56,25%;
  height: 0;
  width: 100%;
  overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

The video-container has a fluid width and height. The height defines the ratio 16:9. If you need 4:3 just set the padding-bottom: 75%.

If you can’t wrap the iframe content in your editor, or if you have a lot of old content, it’s possible to add the wrapper with jQuery:

$jQuery('iframe[src*="youtube"], iframe[src*="vimeo"]').wrap('<div class="video-container">');

This works for youtube and vimeo content.

http://www.geschichte-vor-ort.org

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 ;
}

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.

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.

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!