Category Archives: PHP

Attached Images in WordPress using the_post_thumbnail

I’ve been working with WordPress for years now, and I’ve always struggled with an easy way to display an image that’s attached to a post in a list of posts. I didn’t say it wasn’t possible, just not easy. In the past I’ve used plugins, like "The Attached Image", or hacked my way around the issue. While these methods worked, they weren’t ideal, and any time you can avoid using plugins, the more healthy your WordPress site will be.

I was delighted then, to find that WordPress 2.9+ comes with a few new functions designed specifically for working with images attached to posts. Specifically, the_post_thumbnail works wonders. Here’s how it works:

Add Thumbnail Support

First, you have to activate post thumbnails for your theme. Open functions.php, and add this line somewhere near the top:

add_theme_support('post-thumbnails');
set_post_thumbnail_size(224, 126, true);

The first line adds thumbnail support to your theme. The second line overrides the "thumbnail" settings in your WordPress admin panel. The three values passed here are image width, image height, and the crop flag. If you set the crop flag to true, WordPress will automatically re-crop images so they’re not distorted.

Next, open any of your existing posts. You’ll be happy to find a new box in the right column, titled "Featured Image". You can then use the standard WordPress media tool to either upload a new image, or select an image from your site’s Media Library. Once you’ve associated a featured image with a post, the next step is adding it to your templates.

Insert Thumbnails in Your Theme

Locate the loop where you’d like thumbnail images to appear, and insert the following code:

the_post_thumbnail();

This will insert a full image HTML element, with the option to pass an array to specify dynamically generated attributes, like the image’s alt or title text.

Have More than One Size? No Problem!

Say you want to feature two thumbnail sizes on your site. Switch back to functions.php and add this code, below the code we added earlier:

add_image_size('thumbnail-50', 50, 50);

This cuts an additional image at 50×50 every time an image is uploaded to the WP Media Library. You can add as many sizes as you’d like. You can then add this call in any of your templates:

the_post_thumbnail('thumbnail-50');

Here you’re just passing the name of the thumbnail you assigned in functions.php, so WordPress knows which thumbnail to use. When the_post_thumbnail() is called with no argument, it will use the default size originally set in set_post_thumbnail_size().

There’s a lot more you can do with these new functions, including setting up conditional PHP during loops to display a larger image first, with smaller images for the second and subsequent posts, for example. I encourage further reading at the WordPress codex:

WordPress Codes: the_post_thumbnail()

Advertisements

Access Remote XML via jQuery+AJAX with PHP as a Proxy

If you’ve ever had to work with XML from another domain, and only had JavaScript in your toolbox, you can feel my pain. Cross-domain XML has been the bane of my existence for many years now, when working on sites where there is no server-side scripting language available. jQuery has some great AJAX features, but you can’t make use of any of them if the file you’re trying to retrieve is an XML file on another domain. Until now. PHP is still required as part of this equation, but it acts as a web service, rather than residing on the server where your site lives.

Setting Up PHP as a Web Service

Thanks to a few new JSON functions added in PHP 5.2, we can build an XML to JSON web service in 4 lines of code. That’s right, 4 lines. Here it is, in all its glory:

$c = $_GET['car'];
$s = file_get_contents('http://www.example.com/' . $c . '.xml');
$a = json_decode(json_encode((array) simplexml_load_string($s)),1);
echo $_GET['callback'] . '(' . json_encode($a) . ');';

This code would reside on a server separate from the server where your site is hosted. And now the break down:

$c = $_GET['car'];

Get the value from the query string (browser’s url bar) with the name “car”, which we’ll see when we build the jQuery request, and save it in a variable named “$c”. Easy enough.

$s = file_get_contents('http://www.example.com/' . $c . '.xml');

Get the contents of a remote XML file, inserting the $car variable in the URL, and save in a variable named “$s” (for “string”).

$a = json_decode(json_encode((array) simplexml_load_string($s)),1);

Convert the XML string into a JavaScript array using PHP’s new json_decode and json_encode functions, and save this new array in a variable titled “$a”.

echo $_GET['callback'] . '(' . json_encode($a) . ');';

Here’s where the magic happens. We take that array, and convert it into JSON using PHP’s json_encode function. We also get the “callback” variable from the query string, which is required by jQuery, and append parentheses around the encoded JSON. The appended parentheses are also known as the “P” in JSONP, or “JSON with Padding”. What this does is essentially create a JavaScript function to pass back to your site that looks like this:

callback987986215(allyourJSONdata)

Setting Up jQuery to Call Your Web Service

Once you’ve got your PHP web service setup to convert XML to JSON, making the request in jQuery is pretty simple as well. Here’s how its done:

$(document).ready(function() {
	$.ajax({
		dataType: 'json',
	  	url: 'http://www.example2.com/my-web-service.php?car=mercedes&callback=?',
		success: function(data) {
			//parse your new JSON object here
		}
	});
});

This is a pretty standard jQuery AJAX request. The url paramater is the most important piece here. We’re looking for the JSON data on our server where our PHP service is hosted, and passing 2 variables:

  • car with a value of mercedes, and
  • callback with a value of ?

The variable of car=mercedes depends on the site where you’re pulling your XML from. This isn’t required, it just demonstrates how you could build a flexible web service to leverage for more than one external XML feed. The second variable callback=? is required by jQuery. The question mark is just there to append an additional name/value pair. jQuery will recognize the variable callback=? and replace the question mark with a randomly generated string of numbers. That’s why in your PHP web service, you get the callback variable, and send it back to jQuery as the function name. Its a sort of security measure.

That’s really it; from this point you have a jQuery object to work with containing all the data in the original XML file. You can see the jQuery object and all its pieces easily by setting a few breakpoints in Firebug and digging in.

If you want to get into the gritty details of how this works, like the coolness of how you can call functions in JavaScript by passing JSON as the argument, and how PHP can convert XML to an array and then to JSON, check out a few of the articles I referenced while building this: