The Catch: I was trying to share a post with Facebook that had no thumbnail attached to it.

I recently added a Facebook share icon to a clients site, but when I arrived at Facebook after clicking on it, the only thumbnail I was able to select from was an image that appeared sitewide in the sidebar (of course, I could always opt for not displaying an image at all).

The first thing that I needed to do was find a way to specify a thumbnail. To do so, we need to add the following piece of code to the HEAD section of the blog:

1

<link rel="image_src" href="IMAGE SOURCE" />

The Process:

1. I wanted to check the post and see if there was already an image attached to it.
2. For simplicity, I used the first image in the post.
3. If there was an image attached to the post, then I’d want to use it as the thumbnail.
4. I also have a default image set up in the event that no images are included in the post.

1
2
3
4
5
6
7
8
9
10
11
12
13

<?php
$szPostContent = get_the_content();
$szSearchPattern = '~<img [^\>]*\ />~';
preg_match_all( $szSearchPattern, $szPostContent, $aPics );
$iNumberOfPics = count($aPics[0]);
if ( $iNumberOfPics > 0 ) : ?>
<?php $t1 = strpos($aPics[0][0], 'src="'); ?>
<?php $t2 = strpos($aPics[0][0], '"', $t1 + 6); ?>
<?php $pixt = substr($aPics[0][0], $t1 + 5, $t2 - $t1 - 5); ?>
<link rel="image_src" href="<?php echo $pixt; ?>" />
<?php else : ?>
<link rel="image_src" href="IMAGE SOURCE" />
<?php endif; ?>

The Catch: I wanted to have multiple instances of the feed from different JSON data feeds on the post. Furthermore, each required unique items from its respective JSON feed and I wanted to style each instance differently.

What’s Available: Publish2 has a great plugin out which would allow me to display the JSON feed via WordPress widget or directly in the template. However, I wanted something that was a little easier to control without the added bulk of a plugin.

Start by adding the following function to your theme’s functions.php file:

1
2
3
4
5
6
7
8
9
10

function wd_json_feed($url = 'LINK TO JSON FEED HERE', $size = 5) {
$ch = curl_init ($url);
curl_setopt($ch, CURLOPT_POST, false);
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_setopt ($ch, CURLOPT_RETURNTRANSFER, true);
$feed = curl_exec ($ch);
$feedArrAll = json_decode($feed, true);
$feedArr = array_slice($feedArrAll['items'], 0, $size);
return $feedArr;
}

Next, add the following code wherever you’d like to parse the Publish2 data feed (replace with a link to your JSON data feed and set the number of items to display):

1
2
3
4
5
6
7
8
9
10

<?
$feed = wd_json_feed('LINK TO JSON FEED HERE', 3);
foreach ($feed as $item) {
?>
<?=$item['link']?>
<?=$item['title']?>
<?=$item['publication_name']?>
<?
}
?>

In the example above, I am displaying 3 items and getting the Link URL, Title, and Publication Name for each.

Enjoy!

In any case, turns out you can upload your own PHP.INI file directly to the root folder and it works!

Here’s the download link for a PHP.INI file for PHP5: Download

The current values are set at 40MB, but you can adjust it by changing the following settings:

1
2

upload_max_filesize = 40M
post_max_size = 40M

Here’s the end result: http://eudgets.com/corazonas/store-locator/

If no locations show up in your zip code, try using 90049 to test it out.

The plugin uses some pretty straightforward admin functionality:

Ability to upload a CSV file of the locations which is stored in a separate table. The budget didn’t allow much room for editing/viewing entries directly from the admin area, so in order to add/edit entries, the admin needs to re-upload a new CSV file…overwriting the contents of the database.

Ability to download the CSV file:

The Javascript is handled by Prototype and the code is based on a watered down query I use over at PlanJam.com. Considering the number of locations being searched and having to plot the results on a map…it’s pretty quick!

My Needs:

1. AJAX (required asynchronous navigation between months)
2. Query posts by category (would be nice if I could select the category)
3. Associate posts with their dates.
4. Highlight calendar date when a post exists.
5. A tooltip that would display post titles and link to individual posts (past, current, and future) when a highlighted date is selected.

Note: The tooltip would also allow me to display multiple posts per day should that be the case.

The closest thing I was able to come across was the AJAX Calendar by Urban Giraffe, but it returned posts by month and linked to a daily archive if a post existed, instead of the post itself. Kind of close, but not what I needed.

So what’s a guy to do? I gave it a good fight, but I had to make one from scratch.

You can see it in action on the home page sidebar (in rough form)…it’s set up as a widget for now and displaying all posts from the Tips category.

I ended up modifying both the look and functionality once I integrated it onto my clients site: http://trakkersgps.com/blog/

This one took quite a bit of time, but it’s by far the most intricate WordPress site I’ve had the pleasure to work on. And I had a great time doing it!

So there are 2 types of YouTube URL’s that I’ve come across and here’s the code to deal with each (note: my code adds a link to the post)

http://www.youtube.com/watch?v=VIDEOID – YouTube URL’s added directly to a WordPress post/page.

<?php
$link = get_permalink();
$sourcestring = get_the_content(); 
preg_match('/http\:\/\/www\.youtube\.com\/watch\?v=([\w-]{11})/',$sourcestring,$matches); 
$youtube_video_id = $matches[1];
if (count($matches) != 0) {
echo '<a href='.$link.'><img src="http://img.youtube.com/vi/'.$youtube_video_id.'/0.jpg"></a>'; 
}
?>

http://www.youtube.com/v/VIDEOID – YouTube URL’s used in the embed code

<?php
$link = get_permalink();
$sourcestring = get_the_content();
preg_match('~(?<=www\.youtube\.com/v/)[^&?]*~', $sourcestring, $matches);
if (count($matches) != 0) {
	$youtube_video_id = $matches[0];
	echo '<a href=' . $link . '><img style="width:440px;" src="http://img.youtube.com/vi/' . $youtube_video_id . '/0.jpg"></a>';
}
?>

Just add this anywhere inside the loop

Again, nothing fancy but it gets the job done!

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<?php
global $wp_query;
$postid = $wp_query->post->ID;
$sourcestring = get_the_content($postid);
preg_match('/http:\/\/vimeo.com\/(\d+)$/', $sourcestring, $matches);
if (count($matches) != 0)
{
$vimeo_id = $matches[1];
$hash = unserialize(file_get_contents("http://vimeo.com/api/v2/video/$vimeo_id.php"));
?>
<img src="<?php echo $hash[0]['thumbnail_large']; ?>" alt="" />
<?php
}
?>

You can get the thumbnails in 3 different sizes: small, medium and large.

Small

1

<img src="<?php echo $hash[0]['thumbnail_small']; ?>" alt="" />

Medium

1

<img src="<?php echo $hash[0]['thumbnail_medium']; ?>" alt="" />

Large

1

<img src="<?php echo $hash[0]['thumbnail_large']; ?>" alt="" />

I’ll probably get around to writing a function for it later.

Thanks to Eugene Gimelberg for the tip!

DD_belatedPNG

It’s not perfect but it has been an invaluable tool in this ongoing battle. Yes Javascript would need to be enabled, but at some point we need to take a stand and say NO to visitors that insist on running IE6 with JS disabled while viewing the site on a 15” 800×600 CRT monitor.

I came across a great plugin here that did just that, but unfortunately, it was a bit outdated and wasn’t working.

In addition to fixing the issue with the plugin, I added a little more functionality including:

1. The ability to import images with multiple file extensions.

2. The ability to specify the URL for images being imported.

You can download my version of the plugin here: http://wordpressdevelopment.com/downloads/blogger-image-import_wd.zip

Installation is pretty straight forward:

1. Upload the plugin to your wp-content/plugins/ directory
2. Activate the plugin
3. Access the plugin settings through the settings menu.
4. Select the number of images you’d like to import and specify the URL that should be searched for (don’t include http:// or http://www.)
5. A folder called “/image-import” is created in your upload directory and all images will be saved there.

NOTE: The plugin makes permanent changes to your WordPress database so make sure that you make a BACKUP before starting.

I have tested the plugin with WordPress 2.9 and it works great. I have a really busy schedule and will not be able to offer any ongoing support for the plugin. However, I do occasionally use the plugin and I will gladly update it should any issues arise and I make changes to it.

As of writing this post, the original author has updated the plugin, but I have yet to test it out.

UPDATE: 4/20/2010

Updated plugin to replace the image URL to Blogger with the copy stored on your server.

UPDATE: 7/8/2010

Updated plugin to function properly with WordPress 3.0