Jetpack: how to define a custom fallback image

Jetpack handles Open Graph Meta Tags for you, and automatically creates a fallback Image meta tag if you haven’t inserted any image into your post.

If you’d like to define your own custom fallback image, you can use the jetpack_open_graph_image_default filter, like so:

function jeherve_default_image() {
	$fallback_img = 'http://YOUR_IMG_URL';
	return esc_url( $fallback_img );
}
add_filter( 'jetpack_open_graph_image_default', 'jeherve_default_image' );

Note that the filter is new, and will only be added to the next Jetpack release, 3.0.

Cinema: Guardians of the Galaxy

Another Marvel movie to add to my “To Watch” list. I don’t know anything about “Guardians of the Galaxy”, so I’ll have some reading to do before to see the movie.

This seems a bit different from the other movies in the franchise but since The Collector makes a small appearance in the trailer, I assume this movie will make the connection between The Collector, Thanos, and the Avengers. Plus, an angry racoon? What can go wrong with that? :)

Can’t wait!

Creating collaborative maps with Open-Source tools

When talking about maps, Google is a clear winner: its maps are everywhere, its navigation tools are great, and they also propose a Map builder named Google Maps Engine.

Google Maps Engine

It’s not a perfect tool though, and I found its collaborative aspects to be limited.

Luckily, there are alternatives! I recently discovered that GitHub automatically created maps if you uploaded geoJSON files to a repository or to a Gist file. You can evem (https://help.github.com/articles/mapping-geojson-files-on-github#embedding-your-map-elsewhere) on external sites.

To get started, build your own geoJSON file, and add spots with as much information as you’d like. Here is an example:

{
	"type" : "Feature",
	"geometry" : {
		"coordinates" : [
			19.04965,
			47.51591
		],
		"type" : "Point"
	},
	"properties" : {
		"URL" : "http://brioskavezo.hu",
		"marker-symbol" : "bakery",
		"marker-color" : "#ffba00",
		"name" : "Briós Kávézó",
		"phone" : "00 36 1 789 6110",
		"address" : "Pozsonyi út 16",
		"note" : "Breakfast Spot."
	}
}

I used this tool to calculate coordinates for each spot. You can add as many fields as you’d like as properties. marker-symbol refer to the different icons you can use for each marker, and you can use marker-color to change the color of the marker.

Here is the end result:

The maps are built using 3 Open-Source tools:

  • OpenStreetMap, a collaborative project to create a free editable map of the world. Think of it as the Wikipedia of maps
  • Mapbox, to build the Street view baselayer based on OpenStreetMap. It’s used by Foursquare and Evernote, so you might be familiar with such maps.
  • Leaflet.js, a JavaScript Library used to render the geoJSON data and create the markers.

Since all 3 tools are Open-Source, and since I wanted to add more features than GitHub proposes by default, I decided to dig a bit deeper and built my own map using these 3 tools.

Luckily, Mapbox includes a great documentation so it wasn’t very hard. Creating a map is as simple as adding the following 2 Javascript files into an HTML page:

<script src='http://api.tiles.mapbox.com/mapbox.js/v1.6.1/mapbox.js'></script>
<link href='http://api.tiles.mapbox.com/mapbox.js/v1.6.1/mapbox.css' rel='stylesheet' />

You can then add the map anywhere on your page by adding <div id='map'></div>.

Once you’ve done so, you can use a geoJSON file to add markers to the map. I used the file from the GitHub repo I created. This way, my map will be automatically updated when people contribute to my GitHub repo.

Since I started on GitHub, I decided to host my map there as well, by using GitHub Pages. You can consequently check my work here.

Here is the end result:

What to see, what to do in Budapest?

Custom Map

I still have a lot of work to do, but I think it’s a good start. Let me know what you think, and send me pull requests if you want to add more spots to that map! ;)

Jetpack: how to avoid triggering Gravatar Hovercards

Gravatar is cool. And you know what’s cooler? Gravatar Hovercards!

Gravatar Hovercard

These are triggered as soon as you insert a Gravatar into a post, or in a comment section for example. However, there are times when you don’t want to trigger Hovercards. A good example is a site header like on my other site. I use my Gravatar as a header image, and I want my readers to be able to click this image to go back to the home page.

Luckily, you can use the .no-grav class to ask the Hovercard to ignore a specific image like so:

<img src="<?php echo pinkman_get_gravatar(); ?>" class="no-grav" width="120" height="120" />

Cinema: About Time

I love Bill Nighy, and when I saw the plotline of About Time, I knew I would like the movie:

At the age of 21, Tim discovers he can travel in time and change what happens and has happened in his own life. His decision to make his world a better place by getting a girlfriend turns out not to be as easy as you might think.

I didn’t expect the movie to be so good, though. More than just another sci-fi or romance movie, it’s a celebration of life, an invitation to live your life to the fullest, as if every day would be the last.

You should see that movie. I promise you’ll enjoy it!

Jetpack: remove the share counts from the sharing buttons

Jetpack’s sharing buttons look good, are simple, and offer 4 different display options:

  • Icon + Text
  • Text
  • Icon
  • Official Buttons

If you choose the 2 first button types, Jetpack automatically adds sharing counts for the most popular Social Networks.

Jetpack's sharing buttons

This is great, but what if you don’t want to make extra requests to external services for each post that you publish on your site? Luckily, Jetpack allows you to remove the sharing counts with a simple filter:

add_filter( 'sharing_js', '__return_false' );

Once you add that filter to a functionality plugin or to your theme’s functions.php file, Jetpack will stop adding the Javascript library responsible for calling each Social Network to count the number of shares.
Your sharing buttons won’t include any count anymore, but you will have saved a few resources on your site!

Note: If you use the Email sharing button, this code will break it. You’ll want to enqueue the Email Javascript code back before to add the Email sharing button again.