Autoload Attachment From WordPress Post

January 22nd, 2009 by under Blog, Tips

There is no script to automatically load a thumbnail from a WordPress post by default. However, it is very useful for those who are using WordPress Image Gallery. But you can achieve that by using plugin. Here, I will show you how to do it manually and add into your theme.

The Function

<?php
$size = 'thumbnail';
$images = get_children(array(
'post_type' => 'attachment',
'numberposts' => 1,
'post_status' => null,
'post_parent' => $post->ID,))

foreach($images as $image) {
$attachment=wp_get_attachment_image_src($image->ID, $size);
?><img src="<?php echo $attachment[0]; ?>" <?php echo $attributes; ?> />

get_children() function here will return all the image attachments attached to post (identified by $postID), and assign them to our array $images.
$size is the size of the attachment, you can use “medium” or “full” too.

Apply To Post

Below is the full code in order to display the attachment in front page.


<?php while (have_posts()) : the_post(); ?>

<div class="post" id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>

<div class="entry">
<?php if ($images = get_children(array(
	'post_type' => 'attachment',
	'numberposts' => 1,
	'post_status' => null,
	'post_parent' => $post->ID,)))

	foreach($images as $image) {
	$attachment=wp_get_attachment_image_src($image->ID, $size);
?>
<img src="<?php echo $attachment[0]; ?>" <?php echo $attributes; ?> class="alignleft" />
<?php the_content(''); ?>
<?php } else { ?>
            
	<?php the_content(''); ?>
</div>
</div>

<?php endwhile; ?>

With this, it will check there is any attachment for the post and only the content will be displayed if there is no attachment.

Using The Functions.php

You can also call the function from the functions.php. Firstly, put this code into your functions.php.

function my_attachment_image($postid=0, $size='thumbnail', $attributes='') {
	if ($postid<1) $postid = get_the_ID();
	if ($images = get_children(array(
		'post_parent' => $postid,
		'post_type' => 'attachment',
		'numberposts' => 1,
		'post_mime_type' => 'image',)))
		foreach($images as $image) {
			$attachment=wp_get_attachment_image_src($image->ID, $size);
			?><img src="<?php echo $attachment[0]; ?>" <?php echo $attributes; ?> /><?php
		}
}

Then call the function in index.php.

<?php while (have_posts()) : the_post(); ?>

	<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
        <a href="<?php the_permalink(); ?>"><?php my_attachment_image(0, 'thumbnail', 'alt="' . $post->post_title . '"'); ?></a>
	<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
	<small><?php the_time('F jS, Y') ?></small>

	<div class="entry">
		<?php the_content('Read the rest of this entry &raquo;'); ?>
	</div>
	</div>

<?php endwhile; ?>

Advance – Custom Field and Attachment

As we know, not all of us are using WordPress Image Gallery. Some of us may prefer to handle the attachments in a different way. Then I come up with this solution. I am using this function in my one of my premium wordpress theme – “Our Community“.

<?php 		  
while (have_posts()) : the_post(); 
$img = get_post_meta($post->ID, "img", TRUE); // Declare the custom field for the image
?>
                
<div class="post" id="post-<?php the_ID(); ?>">
<div class="post-sum box">
<h2><a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>

<?php $size = 'thumbnail';
if($img != null or $img != '') { // If there is a value for the custom field ?>
	<img src="<?php echo $img; ?>" alt="<?php the_title_attribute(); ?>" width="150" height="150" /><?php the_content(''); ?>

<?php 	

} elseif ($images = get_children(array( // Check if there is any attachments
	'post_type' => 'attachment',
	'numberposts' => 1,
	'post_status' => null,
	'post_parent' => $post->ID,)))

	foreach($images as $image) {
	$attachment=wp_get_attachment_image_src($image->ID, $size);
	?><img src="<?php echo $attachment[0]; ?>" <?php echo $attributes; ?> />
	<?php the_content(''); ?>
    
<?php } else { // If there is no custom field value and attachments ?>

	<?php the_content(''); ?>

<?php } ?>
</div>
</div>
<?php endwhile; ?>

Considering the user might using other than WordPress Image Gallery, I have to provide some options for them. Here, the priority will be in using custom field. If there is no value for it, the function will then check for any attachment. Finally, only text will be displayed if neither of them exist.

11 Comments | RSS 2.0 | Trackback Add comment
From old to new:
  1. Hastaneler March 17th, 2009
  2. Susan Snipes March 20th, 2009
  3. lex April 18th, 2009
  4. kailoon April 19th, 2009
  5. Tim April 29th, 2009
  6. tatil September 25th, 2009
  7. YTechCity March 25th, 2010
  8. Mat May 22nd, 2010
Nucleo, Customizable Vector Icons