WordPress Plugin: The Attached Image

December 20, 2008 / WordPress Plugins / by Paul Robinson / 556 Comments

This post was published back on December 20, 2008 and may be outdated. Please use caution when following older tutorials or using older code. After reading be sure to check for newer procedures or updates to code.

Warning

This plugin is here for legacy support only. WordPress now contains a featured image system which does the job of this plugin from within the WordPress core. Please try to avoid using this plugin unless it is unavoidable. I will still provide limited support via comments or email, but it will no longer receive any updates or bug fixes. If your theme needs to be updated to use the new featured image system instead of this plugin, I am available for hire.

What’s This Then?

The Attached Image is a simple plugin that packs quite a punch. It shows the first image attached to the current post. For example. If you have your home page set to 5 posts and you use this plugin it will show the first image attached to each of those posts. For a working example see celeborama.net which uses it to grab the picture you see floated to the left of each post.

It was inspired by a plugin wrote by Kaf Oseo, but when support & updates were no longer available & a recent upgrade of WordPress meant it didn’t work exactly like it used to, I decided to take on the challenge of remaking it using the newest WordPress functions available.

What’s It Do?

It has a lot of features, if you want to see them all then check the options list a litte further down the page. For now though here are some of the major ones that most people look for:

Can show the full, medium or thumbnail sized image attached to the current post. Can now show custom thumbnail sizes added by WP 2.9’s post thumbnail support. Check here for more info.
Can make a hyperlink around the image that points to the post the image is attached to, the full image, the attachment page or a custom URL using custom fields on a post by post basis.
If more than one image is attached to a post then the image to be shown can be changed using the WordPress gallery page. Just pull the image you wish to show right to the top of the list and press save.
Can be returned instead of echoed so the output can be stored in a variable for developers to use as they wish.
Can show a default image if no image is available. Also changeable on a post by post basis via custom fields.
and more…

How Do I Install It?

It’s actually really simple to install. The hard bit is deciding where you want the image to go, but that’s entirely up to you. Here are the instructions you need to get it up and running:

First go and get the plugin. Either from here or using WordPress’ new plugin installer (available since WP 2.7). Just search for the attached image or Paul Robinson.
Unzip & place the folder into the wp-content/plugins folder. (I’m going to assume you’ve done this)
Go to the plugins page of WP & activate the plugin. (Also assumed as done)

Go into the template editor & find where you would like the image to show. It must be within the loop which looks something like this:

    <?php if (have_posts()) : ?>
		<?php while (have_posts()) : the_post(); ?>
        	<!-- Some HTML will be here -->
        <?php endwhile; ?>
    <?php endif; ?>

<?php if (have_posts()) : ?>

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

<?php endwhile; ?>

<?php endif; ?>

At the point you have found, place <?php the_attached_image(); ?>
Go to the ‘The Attached Image’ options page under the WordPress Appearence menu.

So What About The Options

Functionality Options

This option allows you to switch on and off the perma functionality for in post image. This checks the post content for an image and grabs the image with the number you have asked for. If that number of image is not available it will show your specified default or return with nothing. Just press the checkbox & put in a number. It starts at 1 not 0 like some may think, so if you want to get the first image in the post press the checkbox & type 1 then save. This type of functionality can also be accessed on a post per post basis using the custom fields as explained later in this documentation. This has been extended with a new option to pick a thumbnails size to use. This will only work if the images were uploaded with WP, if they were not or they are linked in from a external source it will default to showing the full sized image.

General Options

Well The Attached Image now comes with a options page so you can alter what it does from the comfort of your WordPress dashboard. The Attached Image is all about adding a feature to your blogs design & because of that I have added it under the Appearance menu. Here is a description of all the options and what they do. First the general options:

Image Size: This is the size of image you would like to use. As of version 2.2 it supports WordPress’ generated thumbnails, medium size, large size images, and of course the original full size image. You can now specify a size using a function call to override the options page. This is great if you want to call the plugin twice on two template pages & want to use different size image. Use img_size= and then either full, large, medium, thumb or custom, for more about custom check this post. Use ampersands (&) to seperate parameters. Use ampersands (&) to seperate parameters.
CSS Class: This is the class that you would like placed in the image tag. The default is attached-image and can be styled as normal through a CSS stylesheet. This option is so anyone who already has a class can use that if they wish. You can also call a different CSS class using function call parameters again options are seperated by ampersands (&). CSS class’ parameter is css_class Don’t use spaces in CSS class names when using this method. An example of both image size & css class together would be this. the_attached_image('img_size=thumb&css_class=custom-class');
Custom Image Size: Here you can input a custom image size. Beware, this uses the inbuilt width & height attributes of the image tag & as such can degrade picture quality if used too aggressively. Please use with caution.
Default Image Path: A simple one. This is the path to a default image if you wish to use one. Empty or leave the box empty to disable it. Very Important the image path must be from the WordPress root & not your hosts root, it must also start with a forward slash (/). So if your blog is in http://example.com/blog/ and you kept the image default.jpg in the wp-content folder the path would still just be /wp-content/default.jpg and NOT /blog/wp-content/default.jpg. It is also NOT the ID of another image.
Image Link Location: Do you want a link to be placed on the image that is produced & if so where do you want it to point. The possible options are no link, post, image & attachment page. I think it’s pretty self explanitory what they do. You can also provide a custom link on a post by post basis, more on that in the custom fields section further down the page.
Image Alternate Text:: Allows you to choose what the default alternate text for the image should be. You can choose either image filename, image description, post title or post slug. The description is taken from the description field that you can fill in when uploading an image via WordPress’ uploader. If one isn’t provided it falls back to the images filename. A custom value may be input via custom fields, see Custom Field Info below.
Link Title Text:: This is the text placed in the title attribute of the hyperlink placed around the image. This will only have an effect if you do NOT have Image Link Location set to No Link. The options are the same as the alternated text & a custom value can be input via custom fields, see Custom Field Info below.

Advanced Options

Now for the advanced options. Please be careful with these. Selecting the wrong option can result in the plugin not working correctly. I will at some point try to add a reset to default for instances where accidents have occured, until then though please be careful. Thanks.

Generate An Image Tag:: Fairly obvious… Whether to make an image tag or just place the full URL to the selected size image onto the page. If a link location is selected then it will also create the selected hyperlink around the URL. This can be useful to some people so feel free to be inventive.
Echo or Return:: Also fairly obvious, if you are a coder. Tells the plugin whether to echo out the output or return the output ready for processing by PHP. Can also be used to do some inventive stuff with the output.
Hyperlink Rel Attribute:: This should allow the plugin to work with most, if not all lightbox scripts. Refer to the documention of the lightbox script for what to place in the rel attribute.
Image Order:: By default the plugin will use the image in the first position of the WordPress gallery page. The image to show can be changed by reordering the images on the WP gallery screen, however you can use this to change which image it will pick. If you change this to 3 it will always try to pick the 3rd image in the WP gallery order. If there isn’t 3 images it will pick the nearest it can get to the 3rd image.

What About Those Fancy Custom Fields?

Some of the options can be changed on a post by post basis through the use of custom fields. These are the available keys, what they do & the values they expect. All of the keys prepended with att so that they are easily recogniseable as for use with The Attached Image & to stop conflicts with other plugins that may use custom fields.

Key: att_custom_img: This field is used to show any image from the WordPress attachment database, even if it isn’t attached to the current post. It requires the ID of the image you wish to show. It can generally be found out in the media section of WordPress.
Key: att_default_pic: Allows you to override the default picture that is to be shown if no picture is available. Path rules are exactly the same as the previously mentioned option.
Key: att_width & att_height: Pretty obvious, but it allows you to change the width & height of the image. It again uses the in-built browser method of resizing, so again be careful. Also please remember these are two seperate keys, I have listed them together but you must use two custom fields one for width & one for height.
Key: att_custom_link: Allows you to chose a custom URL for the hyperlink to go to. It will override the setting chosen in the options page for that single post. If you have selected no link in the options using this will override it and create a hyperlink for that single post.
Key: att_custom_alt: Allows you to chose a custom alt attibute to be placed in the image tag.
Key: att_custom_link_title: Allows you to chose a custom title attribute to be placed in the hyperlink. Only has an effect if Link Image Location is NOT set to No Link.
Key: att_in_post_image: This feature was requested by Jake Garrison. It allows you to display an image that is inserted into the post & not attached via the WP uploader. It scans for img tags in the post and places it where ever you place the plugin call. Options are a number starting from 1 of the img tag you wish to pic from the post. 1 will pic the first, 2 will pic the second and so on. If there isn’t a img tag matches the number picked it will leave a blank space (return false). Example. If you choose 4 and there are only 3 images in the post in will return blank (return false).
Key: att_in_post_image_size: Allows you to choose the thumbnail size for the in post image function. This only works if the image was uploaded via WP. If it wasn’t or is linked from an external source it will default to the full sized image.

Custom Queries

The ability to easily use custom queries was added as of version 2.5. There is now a second parameter for the query object. All you need to do is hand the query object over to the plugin. Here is an example:

//Custom Query Example
$my_query = new WP_Query('showposts=2&cat=3');
while($my_query->have_posts()) : $my_query->the_post();
  //Other Post Details
  the_attached_image('img_size=thumb&css_class=image', $my_query);
endwhile;

//Custom Query Example

$my_query = new WP_Query('showposts=2&cat=3');

while($my_query->have_posts()) : $my_query->the_post();

//Other Post Details

the_attached_image('img_size=thumb&css_class=image', $my_query);

endwhile;

It should be fairly easy to follow. All you need to do is look for the variable that WP_Query() is assigned to & hand it to the attached image.

Wait Up… I Have More Questions!

Really? You do! Well then your already in the right place. You can either leave a comment on this post, or if you prefer, you can send me an email using the contact page.

What If I Find Something I Want Added Or I Find A Bug?

Well you wouldn’t be the first. Most of the features now included with The Attached Image are there through requests made in the comments section, just scroll down & have a read. If you have found a bug or you want to request a feature then the process is the same as the last question. Leave a comment on this post or drop me an email via the contact page.

Alright… Say I’m Feeling Kind…

Ahhh. Say no more. If you are feeling generous then you can buy me a cup of coffee or two using the Paypal donate button just below.

If that’s not your sort of thing then you can always donate some money straight towards my hosting bill with Dreamhost using the button below. Dreamhost take payment via Paypal so you know it is safe & secure.

That It?

Yep. I’d just like to say a thank you to everyone who has downloaded, used, supported, commented on or even just looked at my plugin. It might be me who writes it, but without you guys out there to use and appreciate it there wouldn’t be a point. Thank you so much.

Also a little extra thank you to Alisher, Brian Wood, Steve, Jasper Visser, Jennifer the scriptygoddess, and RougeDeals. All these lovely people suggested a feature that got added to The Attached Image or have identified & helped fix a bug. Also a final thank you to everyone who has linked back to me and helped popularise The Attached Image.

Ya, Finished Now

Actually no, not quite.

Legacy Overrides

These are a list of legacy parameters that allow you to override the values set in the options page. This is useful if you want to have more than one call the the_attached_image() on different pages in your template, but you want them to show different size images, or remove the link and other things. Basically it allows you to call the plugin twice, but have it do two different things. The parameters are entered in Query String format an example is the_attached_image('img_size=medium&link=image&css_class=featured-image');.

img_size: Changes image size to be pulled back by WordPress. Options are thumb, medium, large & full, or custom. Default is thumb.
css_class: The CSS class to place inside the image tag.
img_tag: Whether or not to echo the URL in an image tag. Options are true or false. Default is true.
echo: whether to echo or return the output. True will echo, false will return. Default is true.
link: Where you want the link to go. Will only work if href is set to true. Options are none, post, image and attachment. It is also possible to use a custom URL via the custom fields, please refer to the custom fields section above for more. Default is post.
default: The path to a default image if one is wanted. The path must start with a forward slash and be based from the wordpress directory, not your hosts directory. Options are false & a path to the image. Default is false. Can also be adjusted via custom fields, again check above for more.
width & height: Two seperate parameters that do the obvious thing. The set a custom width & height for all images. This only resizes using the image tag width & height attribute, as such quality will suffer greatly when resizing too much either way. Also adjustable using custom fields, check above for more.
image_order: Allows you to change which image the plugin uses from the WP gallery page. Normally, if there is more than one image, the plugin will pick the image marked in 1st. This allows you to change that. If there isn’t a picture at the position then it will take the pictures as near to that number as possible. Default is 1
rel: The rel attribute is generally used to add lightbox scripts. Just put the word shown by your lightbox instructions here and all should work as long as href is set to true & link is set to image, since there has to be a link and the URL to the full image for the lightbox script to work.
alt: Allows you to choose what the default alternate text for the image should be. You can choose either image filename, image description, post title or post slug. The description is taken from the description field that you can fill in when uploading an image via WordPress’ uploader. If one isn’t provided it falls back to the images filename. A custom value may be input via custom fields, see Custom Field Info above.
title_link: This is the text placed in the title attribute of the hyperlink placed around the image. This will only have an effect if you do NOT have Image Link Location set to No Link. The options are the same as the alternated text & a custom value can be input via custom fields, see Custom Field Info above.

If You Are Still Using An Old Version Without The Options Page

You should really upgrade to the latest version so you can use the new options page, but if you are one of those people who just loves the old school (and why not) then here is a list of parameters. Custom fields are still exactly the same so please use the list above.

img_size: Changes image size to be pulled back by WordPress. Options are thumb, medium, large & full. Default is thumb.
css_class: The CSS class to place inside the image tag.
img_tag: Whether or not to echo the URL in an image tag. Options are true or false. Default is true.
echo: whether to echo or return the output. True will echo, false will return. Default is true.
href: If you plan to use the link feature (which will automatically generate an href around the image) then you must set this to true first. Options are true or false. Default is false.
link: Where you want the link to go. Will only work if href is set to true. Options are none, post, image and attachment. It is also possible to use a custom URL via the custom fields, please refer to the custom fields section above for more. Default is post.
default: The path to a default image if one is wanted. The path must start with a forward slash and be based from the wordpress directory, not your hosts directory. Options are false & a path to the image. Default is false. Can also be adjusted via custom fields, again check above for more.
width & height: Two seperate parameters that do the obvious thing. The set a custom width & height for all images. This only resizes using the image tag width & height attribute, as such quality will suffer greatly when resizing too much either way. Also adjustable using custom fields, check above for more.
image_order: Allows you to change which image the plugin uses from the WP gallery page. Normally, if there is more than one image, the plugin will pick the image marked in 1st. This allows you to change that. If there isn’t a picture at the position then it will take the pictures as near to that number as possible. Default is 1
rel: The rel attribute is generally used to add lightbox scripts. Just put the word shown by your lightbox instructions here and all should work as long as href is set to true & link is set to image, since there has to be a link and the URL to the full image for the lightbox script to work.
alt: Allows you to choose what the default alternate text for the image should be. You can choose either image filename, image description, post title or post slug. The description is taken from the description field that you can fill in when uploading an image via WordPress’ uploader. If one isn’t provided it falls back to the images filename. A custom value may be input via custom fields, see Custom Field Info above.
title_link: This is the text placed in the title attribute of the hyperlink placed around the image. This will only have an effect if you do NOT have Image Link Location set to No Link. The options are the same as the alternated text & a custom value can be input via custom fields, see Custom Field Info above.
in_post_image: This feature was requested by Jake Garrison. It allows you to display an image that is inserted into the post & not attached via the WP uploader. It scans for img tags in the post and places it where ever you place the plugin call. Options are a number starting from 1 of the img tag you wish to pic from the post. 1 will pic the first, 2 will pic the second and so on. If there isn’t a img tag matches the number picked it will leave a blank space (return false). Example. If you choose 4 and there are only 3 images in the post in will return blank (return false). Can also be set via the custom fields, without setting this parameter using the key above. Warning: This will override the normal function of this plugin if set as a parameter. If you use custom fields the plugin will work as normal except for the posts it is used on.
in_post_image_size: Allows you to pick a thumbnails size for the in post function. Will only work if the image was uploaded via WP. If it wasn’t or it is linked from an external source it will default to the full sized image.

That’s all the parameters, but seriously you should upgrade to the latest version. There is tentative support for the parameter based system, but it is only there as a backup until I can safely assume everyone is using the new options system. Please don’t hesitate to leave a comment if you have problems switching over to the new system, it is a lot better.

Now are you finished?

Yes, now I’m done.

Update: 14/12/2009

I’ve just created a PDF file to show everyone some of the advanced uses available when using The Attached Image. Hope it is of use. 🙂 Advanced Uses For The Attached Image PDF

Update: 07/04/2010

After a few questions about how to use The Attached Image, I have decided that a visual approach is the best way to explain, so here is a video on how to add The Attached Image to your theme.

[pro-player width=”560″ height=”350″ type=”mp4″]http://return-true.com/wp-content/uploads/videos/UsingTheAttachedImage.mp4[/pro-player]

Attached Image Plugin Wordpress

Paul Robinson

WordPress plugin & theme developer, user of Laravel and learner of React.js. Can usually be found listening to Japanese, and Korean Pop or Vocaloid music while developing.

556 Comments

It Worked like a charm. Thank you very much for all your help. Instead of using the WordPress Paginatino (as in the code above), I used Wp-PageNavi and it worked awesome.

<?php
$id = $cat;
$cat_query = new WP_Query('cat=' .$id. '&posts_per_page=16&paged='.$paged);
while($cat_query->have_posts()) : $cat_query->the_post();
the_attached_image('img_size=thumb&css_class=image', $cat_query);
endwhile;
?>
<?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } ?>

<?php

$id = $cat;

$cat_query = new WP_Query('cat=' .$id. '&posts_per_page=16&paged='.$paged);

while($cat_query->have_posts()) : $cat_query->the_post();

the_attached_image('img_size=thumb&css_class=image', $cat_query);

endwhile;

<?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } ?>

Thank you again, not only you’re answers help a lot, but they come really fast too.

author

Not a problem. I’m glad I was able to help in some way. 😉

Yep, wp_pagenavi is the best (IMHO) paging plugin for WP.

If it’s ok, I’m going to bother you again.

In this code:

<?php if (have_posts()) : ?>
     <?php while (have_posts()) : the_post(); ?>
     <!-- Some HTML will be here -->
     <?php endwhile; ?>
<?php endif; ?>

<?php if (have_posts()) : ?>

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

<?php endwhile; ?>

<?php endif; ?>

What do I need to change to display random images?

author

Random images? I’m not sure what you mean? As the plugin shows the first image attached to a post you would have to show random posts to show random images. Is that what you mean?

Yes!, that’s what I meant, sorry, but english is not my mother language

author

No problem. Just wanted to make sure I’d understood correctly.

You would use either a WP_Query as you did before or a query_posts with the parameter orderby=rand.

For example:

$query = new WP_Query('orderby=rand&posts_per_page=10');
//continue with loop

1 2	$query = new WP_Query('orderby=rand&posts_per_page=10'); //continue with loop

Hope that helps.

It Worked. You’re awesome. Thanks again.

author

Not a problem. 😉

You don´t need to develop this plugin anymore it´s perfect.
I donated to your serverfund instead ;o)

author

Thanks Marja. 🙂

Thank you for the donation too. Everything helps. 😉

hi.

I m using your plugin but i didn’t add image caption bottom of image please provide me good suggestion.

My Code –

Thanks
Sachin

author

Please put code in

tags please.

I’m not sure what you are getting at? The attached image doesn’t provide caption support. You can add it using the tutorial I mad a few posts forward from this one.

Hi !

Thank you for this great plugin that is Image Attached.

I just have a question ; I’m building my website structure at that time and will consider using WordPress as a CMS. That means I’ll have several categories with sub-categories. So, I’m using another plugin which allows HTML description for category. Do you think your plugin would be available for that kind of use in the future ?

That would be great.
Thanks alot and go on having fun while programming !

Fanch

author

I’m afraid I’m not sure what you are getting at. The Attached Image has only 2 functions, they are to get the first attached image or retrieve an image from the posts content.

It would be completely out of context to add in abilities to add HTML category descriptions etc. Especially since there are already plugins that do that (as you said).

I don’t understand how to attach images that aren’t uploaded to wp, quite a few posts use external links to images in the post and I would like these to also work. cheers

author

Well you have 1 of 2 options. The first is to create images for those posts, or you can turn on the in post image function via custom fields for those posts.

In post image functionality grabs the first image tag it finds from the post & uses that instead of the first attached image.

Check the documentation in the post above for the custom field options you need.

Can someone show me an example of how to use the custom keys?

I’ve tried :

and several other variations taking out the px trying it without the “;” at the end, nothing seems to work….

Sorry, forgot to add the tags, this is what I was trying to say:

<?php the_attached_image('att_width=560px;') ?>

1	<?php the_attached_image('att_width=560px;') ?>

author

The custom field keys are for the custom fields section which is located underneath the text area when editing a post in the WP admin.

The place you have placed it is for the parameters or legacy overrides. They were needed before I created the options page, or they are needed if you wish to use more than one instance of the plugin.

So to set the width you can either create a custom field on 1 post with the key ‘att_width’ or you can change the code you posted to:

<?php the_attached_image('width=560'); ?>

1	<?php the_attached_image('width=560'); ?>

by it will affect every post (if it’s used on the single.php template).

Hello, great plugin!

I have one question though: is it possible to return the src of the attached image only? I tried using the echo key, but it still passes the whole tag. I just need only the image src passed.

Thanks!!

author

Yes indeed it is possible. The echo key is just for returning to a variable instead of outputting to the browser. You want the img_tag parameter if you are using the function instead of the admin page. Set it to false & it should give you the src instead of the image tag.

Hope that helps.

Thanks so much!

Could this script be used to grab the first image in the post and set it as the wordpress featured image. That way you don’t have to edit the theme if it’s already using featured post.

I’m thinking more like an admin tool to scan all post without a featured image and grab the first image, create the thumbnail and attach it to the post?

author

Hi,

Sorry for not getting back to you sooner. There isn’t really a way to do that (well not that I can see) but there is an alternative.

You can find the idea on this post about an update I made to The Attached Image after a similar question was asked by someone else.

I hope that helps. Feel free to comment on the post I’ve linked to if you need any help.

Hi,
I can not get the image to link. How do I do It?

I have a link on the post, but the image on the index page will not work.

author

Hi,

You can either use the options in the options page or using legacy overrides:

the_attached_image('link=post')

1	the_attached_image('link=post')

Possible options are none, post, image, or attachment.

Hi Paul,

I have tried both ways but it will not work.

could it be a theme problem?

author

It depends on what you are linking too. Are you linking to the post, image or attachment?

I’ve just tested it on my localhost & it works okay, so my best guess is either a problem with the loop or some sort of conflict with you theme (although I’ve never come across that yet).

Could you please provide the HTML coding I need to insert into the Theme Editor to make the images align left?

I am struggling with this at the moment.

Thank in advance.

author

Hi,

That question is a little hard to answer. It depends on the situation. You generally use CSS to align images. I’m not to well today so I’m away from my computer (doing this on phone) but it would be something like

.element {
float: left;
}

Where element is the class given to the element you want to align. Sorry I can’t help in more detail.

Hi, Paul!

I was trying to use the img_order option but it wasn’t working. I had to rename all $image_order variables to $img_order, and that fixed it. Did I do something wrong or is it really a bug?

Thank you for the great plugin!

author

Hi Bruno,

Sorry for the delay in replying I didn’t get my normal comment received email.

No, that shouldn’t be happening. I’ll check it out & get back to you. I apologise for the problem.

Hi. First… great work!

I’m trying to use it out of the loop, for retrieve the attached image of a post. So, i’m using the undocumented second parameter $qry_obj,
with a custom WP_Query.

I see you make global a variable $post, in the the_attached_image function. I think it replaces the global variable $.post and, in my case, makes WP to crash.

It’s a bug or it’s necesary ‘globalize’ $post?

author

Hi David,

Sorry about the delay. Again I didn’t get the comment received email.

No $post does not replace the super global variable $_POST. It makes global the variable which WordPress uses to hold all it’s blog post data inside so that The Attached Image can figure out which post it needs to gather images for.

I should not cause a crash. Yes, it is necessary to make $post global. Without it the plugin cannot do it’s job. Quite a few other plugins also ‘globalize’ the $post variable.

Can you be more specific about the ‘crash’? It’s very unusual for a web application to crash in the way a desktop app does.

Hi Paul

I found the problem, and was in my code. Your plugin works perfectly ;).

I was using a variable $post too, as value in a ‘foreach’ where I call ‘the_attached_image()’. I changed the variable name and running again.

Sorry to waste your time 😛

author

Ah. Good. I’m glad you got it sorted. I was just going to come back saying I couldn’t find any problems in the code, so I’m very happy you found the problem.

Thanks for letting me know you fixed it too. 😉

Hi, I am trying to accomplish something I’m not sure your plug-in was capable of doing, and was wondering if there was a way to do it.

Basically I want to have a Page in WordPress that shows the first image of all the posts in a particular category, with a caption and/or title, that links to it’s associate post.

author

You should be able to do that with The Attached Image.

It’s a little large to write here in the comments, but you’d make a page template & a custom loop (with WP_Query) and just add in a call to TAI where ever you want image to appear.

I know I’m being a little vague on the coding but it would be way to large to write here in the comments. Give me a mail via the contact form if you need any more help.

are you noticing an issue with The attached image at wordpress 3.05? I have used this plugin for quite some time and when upgrading to 3.05 it no longer works 🙁

author

Hi Tracy,

No problems here. Just tried on my local install, and this blog uses TAI & is running WP 3.0.5.

By “no longer works” do you mean, just doesn’t appear? Gives an error? Are there any more details you can give?

Well, i just loaded a template you and I had modified over a year ago and have used it a number of times with no problem. When I loaded the template with your plugin, it didn’t work to load the thumbs this time. Only difference I see is that I have 3.05 on this site, where the others are running different versions of 3.__

thank you,

tracy

author

Hmmm. I know that the plugin is working properly in 3.0.5. The recent update didn’t really update anything within WP that my plugin makes use of.

I’m not really sure what the problem could be. Any chance you can drop me an email to admin at return-true dot com with some temporary login details and I’ll see if I can spot anything for you. 😉

Sorry about the problem. Here’s hoping it can be fixed quickly.

You just saved me so much time.. im making a portoflio site which would have required me making two custom fields in every single post and putting in the attachment link and 150×150 image thumb. thank you so much. if i can remind myself as soon as im less broke.. you’ve earned it

author

No worries. Glad TAI was helpful, and thank you in advance for any donation you do make. 😉

hi, i am using your plugin and it is absolutely what i need. the problem that i am having is that the plugin is showing up as a link to my image instead of the actual image. not sure what to do. I looked over the settings in appearance but nothing is changing it. please help, I’ve even tried changing its position within the code. nothing is changing it

author

Hi Kaira,

Unfortunately WordPress messed up the code you posted. If you can reply to this comment with a link to the code on pastebin.com that would be great.

Probably a stupid question but have you made sure that you have set the Image Tag option to true? It will just output a link to the image unless that is set.

oh paul, i love you:) did i miss that in the instructions? when i changed the tag, it was fine:) you response was so speedy! Im going to see if I can make this do what i need it to, if it does you def. have a donation coming your way:):):)!!!! i have searched so many plugs and they all either didn’t work or at least they were too complicated to get them to work. thank you very much

author

Hi Kaira,

Awww, thank you. *blushes*

Don’t worry about it. I do it all the time. 😉

Let me know if you need any further help, always happy to help out where I can.

Any donations are more than welcome. Thank you either way. 🙂

Is it possible to run a conditional query with this plugin such as:

<?php If the_attached_image() == true {

} else {

}?>

<?php If the_attached_image() == true {

} else {

}?>

Thanks.

author

Hi Deeve,

It is possible, but not with that function. There is a function inside the plugin used for internal testing, but should work just as well for anyone else.

if(have_attached_image()) {
    //Whatever
} else {
    //something else
}

if(have_attached_image()) {

//Whatever

} else {

//something else

}

Hopefully that helps.

Thanks for the suggestion Paul but I can’t seem to get that to work in php:

<?php
if(have_attached_image()) {?>
the_attached_image('img_size=medium')';<?php
} else {
echo '<img src="/wp-content/themes/platform/img/nopostimage.png" alt="" title="" />';
}?>

<?php

if(have_attached_image()) {?>

the_attached_image('img_size=medium')';<?php

} else {

echo '<img src="/wp-content/themes/platform/img/nopostimage.png" alt="" title="" />';

}?>

..also, I thought to do a base test; if I run the following code, posts which do have an attached image default to the else statement which is not correct:

if(have_attached_image()) {
    print 'Has attached image';
} else {
    print 'Does not have image';
}?>

if(have_attached_image()) {

print 'Has attached image';

} else {

print 'Does not have image';

}?>

author

That’s a little odd. I’ve just tried it and it seems to be working okay. I can’t see any errors in the code. It simply asks WordPress if there are any images attached to the current post & returns true (if not empty) or false (if empty).

It does use $wp_query to tell which post you are using, that sometimes causes problems since if you have created a new query object using new WP_Query() it will not work.

You could use:

if($img = the_attached_image('img_size=medium')) {
    echo $img;
} else {
    echo 'default image';
}

if($img = the_attached_image('img_size=medium')) {

echo $img;

} else {

echo 'default image';

}

That may work as an alternative. If you can find anything that might help with figuring out why it seems to be reporting the wrong value that would be great. So far I’ve had no success in replicating it. 🙁

Hi Paul,
many thanks for your time spent on this. My template does in fact already use a ‘new WP _Query()’ to propagate the data as is rather complex [I needed to only return 1 specific category of posts]. I’ve therefore had to resort to using the ‘get_the_image()’ plugin to return the correct conditional statement. Shame really as I would have preferred to use yours as wanted to offer an alternative layout based on whether an attached image was present.

author

Hey,

Using the alternative conditional should work even with a WP_Query() type query. In fact it was used in my old theme. Something like this:

//WP_Query object is assigned to $my_query
if($image = the_attached_image('img_size=thumb&echo=false', $my_query)) {
    echo $image;
} else {
    //throw default image etc
}

//WP_Query object is assigned to $my_query

if($image = the_attached_image('img_size=thumb&echo=false', $my_query)) {

echo $image;

} else {

//throw default image etc

}

You can pass a query object into the second parameter to tell the plugin where to get the post data from. I’m going to add the same ability into the have_attached_image() function as soon as I can.

author

I’ve just updated the plugin so that have_attached_image() now includes a parameter to pass a query object to it. For example:

//WP_Query object inside $big_query
if(have_attached_image($big_query))
    the_attached_image('img_size=thumb');
else
    echo 'default image';

//WP_Query object inside $big_query

if(have_attached_image($big_query))

the_attached_image('img_size=thumb');

else

echo 'default image';

I’ve been unable to check it as I have access to the SVN server but not my localhost so if you can let me know of any errors that would be amazing. Thanks.

Where do I put the custom field att_in_post_image so I don’t have to insert it for all posts generated by my customers? I’m using another user friendly image uploader for my customers but don’t want to insert this field for each post I approve.

Also – I only want images to show for one category of post (which is the default category for customers posting from the front end)? How do I use a conditional tag with this plugin or is there another way to do it?

author

Hi Kirby,

If you are using some sort of plugin to allow your customers to submit posts you would need to see if it allows you to submit a custom field as part of the data to be automatically saved to the post.

If you are doing it via some custom code then you would need to add in a piece of code to add post meta after the post data has been saved to the database using add_post_meta();. That would allow you to add the information you want.

For that you would just wrap it in a standard conditional in your template file, for example:

if(is_category('my-posts')) :
    the_attached_image();
endif;

if(is_category('my-posts')) :

the_attached_image();

endif;

Hope that helps in some way. If you need any further help, drop another comment or drop me an email.

Older Comments

Newer Comments

Warning

What’s This Then?

What’s It Do?

How Do I Install It?

So What About The Options

Functionality Options

General Options

Advanced Options

What About Those Fancy Custom Fields?

Custom Queries

Wait Up… I Have More Questions!

What If I Find Something I Want Added Or I Find A Bug?

Alright… Say I’m Feeling Kind…

That It?

Ya, Finished Now

Legacy Overrides

If You Are Still Using An Old Version Without The Options Page

Now are you finished?

Update: 14/12/2009

Update: 07/04/2010

Follow Me

Categories

Recent Posts

Recent Comments

I'll keep your WordPress site up-to-date and working to its best.