All to often clients want to put pictures on individual posts or pages. Placing pictures on blog posts has to be one of the easiest way to increase the amount of time a visitor spends on a blog. Appropriate pictures can add to the dynamics of a blog posts and for those visual readers, it makes reading a whole lot bearable.

With more blogs than every going up on a daily basis bloggers now need to consider a better way to make their information stand apart from the rest. In the year 2010, in the age of digital media were the average human has the attention plan for a 5 year old, the easiest way to spruce up a blog post and grab someones attention is images. Videos would be even better, but for today we’ll focus on images.

An image can enhance the blog in a number of ways ranging from providing a visual point of interest, grabbing attention, or simply to draw the readers eyes down to the first few lines to get them reading. Never underestimate the power of visuals whether it be on the web or in a simple PowerPoint presentation for your office. In this day and age, specially people of my generation, we have been over stimulated and bombarded with flashy advertising and gimmicks our entire lives so plain text just doesn’t cut it.

Below is the few simple steps to the easiest way to include images into a post…

Access to your functions.php file of your theme

Open up your theme’s function.php file and add this script.  This script will give you the ability to post both the latest image as a developer and a shortcode as a user.

function sc_postimage($atts, $content = null) {
	extract(shortcode_atts(array(
		"size" => 'thumbnail',
		"float" => 'none'
	), $atts));
	$images =& get_children( 'post_type=attachment
               &post_mime_type=image&post_parent=' . get_the_id() );
	foreach( $images as $imageID => $imagePost )
	$fullimage = wp_get_attachment_image($imageID, $size, false);
	$imagedata = wp_get_attachment_image_src($imageID, $size, false);
	$width = ($imagedata[1]+2);
	$height = ($imagedata[2]+2);
	return '
 
<div class="postimage">'.$fullimage.'</div>
 
 
';
}
add_shortcode("postimage", "sc_postimage");

Display the image, as a user

To display an image on the back-end system of wordpress its pretty simple.   The code above has created a shortcode for the user to place.   Simple place the following code where you want it to show up on the visual editor.

[postimage]

Display the image, as a developer

Displaying an image in a pre-defined spot on the template as a developer is just as easy. Simple place this snip-it of code anywhere in the theme’s template you wish the latest image to show.

 echo sc_postimage($atts, $content = null);

Customize the code

By default this code displays the image in whatever size you have WordPress set as “thumbnail”. You can change the size to large and medium by changing the variable “size” in the array below.

function sc_postimage($atts, $content = null) {
	extract(shortcode_atts(array(
		"size" => 'thumbnail',
		"float" => 'none'
	), $atts));

Questions?

Feel Free to Comment, I’ll get back to you!