In my other blog, Pet Turtles And More, I wanted to display one image from the content of my posts and be able to over-ride that image with another, if I so choose, within the WordPress loop .

The result I wanted (which is what I got) looks like this:

The first image in the post is displayed or, if I designate an alternate, it will display an alternate image.

The first step I did was find a way to extract the image from a post. I found this in the WordPress.org support forums: Retrieve First Image From Post.

This worked beautifully, but noticed that it:

1. didn’t give me an easy way to override the image if I didn’t like the one it chose (which is the first image)
2. if I had an advertisement, even one that is generated by an iframe, it would take the image from the ad and display it instead, and
3. if I use shortcode to display a gallery (like what is used to display a NextGen Smooth gallery, it wouldn’t be able to extract a photo

So I looked for a way to add an image through the use of custom fields. I found number 9 from Custom Fields Hacks For WordPress to be most useful.

Then I did some nifty PHP to combine the two hacks and came out with this code.

Paste this into your theme’s functions.php file:

function get_custom_field_value($szKey, $bPrint = false) {
	global $post;
	$szValue = get_post_meta($post->ID, $szKey, true);
	if ( $bPrint == false ) return $szValue; else echo $szValue;
}

function catch_that_image() {
global $post, $posts;
$first_img = '';
ob_start();
ob_end_clean();
$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
$first_img = $matches [1] [0];
// no image found display default image instead
if(empty($first_img)){
$first_img = get_custom_field_value('mythumb');
}
return $first_img;
}

And use this within the WordPress loop for where you want to display the image:

<?php
$customField = get_post_custom_values("mythumb");
if (isset($customField[0])) {
    echo '<img src="';
    echo "".$customField[0];
	echo '" />'; }
  else{
echo '<img src="';
echo (catch_that_image());
echo '" />'; }
 ?>

The code assumes that you are using a custom field called “mythumb” and that you are using the full URL path of the image for “mythumb”.

What the code does is it first tells WordPress to display the image in “mythumb” then if that custom field is empty, it will then display the first image in the post. In effect, it displays the first image in a post or the one in a custom field.

A nice WP hack indeed!!

I’ve been wanting to go to a WordCamp since I got into blogging…it took a few short years and now I’m finally going.

WordCamp is going to be two whole conference days of nothing but WordPress. I like the sound of that…

I even know one of the speakers!

Sometimes, I work with WordPress all day for work – then when I get home – I spend even more time working with WordPress for myself!!

Check out the Word Camp NYC 2009 page.

A few weeks after I posted How to make NextGEN Smooth Gallery link to any URL (or fake a flash banner) I discovered the WP-Cycle plugin.

It’s a great plugin, much easier to use than hacking NextGen Smooth, and I wish I had found it sooner. It is way simpler for getting each image in a rotating slideshow to point to a different URL.

How I implemented it (note: this is for version 0.1.5 of the plug-in) :
(Blog title, URLs, and links blurred out in the image for client security)

1. After installing the plugin, you will find the WP-Cycle settings as a sub-menu under the Plugins menu in the admin area of WordPress.
2. First thing to do is to upload the images you want to appear in the slidehow, browse for and upload your images. There is currently no method to add an image from the WordPress Library or to use an image without importing it, hopefully that will change in a future release. Also, it is better if all your images are the same size.
3. After uploading an image, you can enter the URL you want each image to link to. This is the strength and the best part of WP-Cycle – you can link to any URL. Be sure to include the “http://” and to click on “Update”.
4. Select your settings. These are all up to your preferences. For Image Dimensions it is best if you enter the exact same size as that of the images you are planning to use. Don’t forget to “Save Settings”.

To display the rotating banner, use the shortcode to display it in a post or page or use PHP to show them where ever you please in your themes files.

The short code is:

[wp_cycle]

The php is:

<?php wp_cycle(); ?>

The plugin says that you can set the DIV ID that will be used for the banner and thus be able to style it whatever way you want through CSS. I wasn’t able to do this successfully. I wanted to add a margin to the banner, so I surrounded it in another DIV with a class.

The complete code I added to the theme was:

<div class="banner">
<?php wp_cycle(); ?>
</div>

In the style sheet I added (of course you can add whatever you want, depending on the styling you want):

.banner {
margin-left:11px;
}

And there you have it. A simple rotating banner using any size of images that links to any URL for WordPress for free without using Flash or a paid program.

Please feel free to ask questions or leave comments.