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

Fantastic plug-in!! Thank you very much for sharing!!

Anyway, how do I get returned output from fancy custom field with key att_in_post_image? I’ve tried setting the ‘Echo or Return’ option to ‘return’, tried using the_attached_image(‘echo=false’), tried turning on ‘In Post Image Functionality’… but none of those works. It always echoed the output.

Also, it seems that when I turn on ‘In Post Image Functionality’, only the posts with in-post images get detected, those with attached images aren’t showing. Can it automatically detect whether I have in-post, attached, or custom, then output accordingly? Because I use attached images for some posts, in-post for others, and custom (att_custom_img) for some others as well.

Could you enlighten me on these issues? Or maybe implement these features if they’re not there already?

Cheers! Keep up the good work!

I’m sorry… what I meant to say was getting the URL only (not a returned output, as I said above)… How do I get the URL only for att_in_post_image?

Btw, I’ve set ‘att_img_tag’ to FALSE too… and still it displays the IMG tag…

Can you help?

Thanks!!!

author

Hey there,

Sorry I haven’t replied sooner, been busy with Xmas & my site has been getting alot of attention from hackers recently so I’ve been making sure all security holes are fixed.

It seems there is a problem with in post images & turning off the image tag generation, I’ll get try and get that fixed asap. As for attached images, and in post images. The back end admin is global, whatever is set there will effect everything, if you want to override that you have to use a custom field, or a template call. The heirarchy is as follows: custom field > template call > admin.

I hope that makes sense. Again I’ll get the image tag generation fixed as soon as I can, so look out for the update via the plugin update page in WordPress.

author

I’ve updated the plugin. Turns out I forgot to add the check for whether or not to generate the image tag in the in post function. That’s what you get for coding without enough coffee. 😆

Let me know if you have any other problems. 😉

Gracias por postearlo lo andaba buscando.

No problems. 😉

Thanks so much for developing this. It’s pretty simple to use particularly for the newbie like me. I also have a very simple question but I can’t figure out how to do it. How can I center align the image so in each of the excerpt? I tried playing with the css class (which I don’t even know if it’s the right place to do) and nothing’s happened. Could you help me with this?

It generally depends. Centering an image can be done by adding align=”center” to the image tag, but that’s obsolete now. The best way is to use CSS sometimes text-align:center works or margin:auto 0px depending on the situation.

If you are unfarmiliar with CSS you will need to try to learn some basics. It can be difficult but let me know if you have any problems or questions. I won’t be around for a while tomorrow as I’m out all day but I’ll try to get back to you asap should you have any more questions.

Thanks Paul for such a quick reply. I’m still learning the basics bits & bits everyday but it’s not easy 🙂 Anyway, I still couldn’t quite figure out where to place the CSS “text-align:center” to. Do I need to put it in the index.php? Could you pls let me know where speficially?

No worries, learning new things is always difficult at first, I’ve been coding for nearly 13 year and I stll learn new stuff every day. It’s a neverending battle.

Now I’m actually writing this in my iPod touch, while in bed (couldn’t get to sleep lol) so please excuse any messyness. Code isn’t the easiest thing to write on an iPod.

The CSS would go in you themes CSS file normally it’s called style.css but it varies from theme to theme. You would use the CSS option of the attached image to pick a name for your style, something like att_img_center or something. Doesn’t really matter as long as it means something to you and is easy to remember. Next in you CSS file you would need to add a new rule like this:

.att_img_center {
  text-align: center;
}

.att_img_center {

text-align: center;

}

I hope that helps a little. Again let me know if I can help anymore but it’ll be tomorrow now as I better get some sleep. 😉 Good luck.

Thanks again Paul. Sorry for my late response. I think I’m getting there. Still trying to work on it but I think I should be able to do it. I’ll pop you a msg again if I couldn’t but thanks a lot!

author

Not a problem. It can take a while to learn, but you can do practically anything once you’ve learnt the basics. 😉

Hi. I need to be able to show the image attached to the parent page. So, when I’m on a subpage, whatever image is attached to the parent page will display. Is there a way to do that?

Well, I figured it out and tried to post the code above but the code did not display correctly (please delete above post). Here it is again:

 $my_query = new WP_Query('page_id=' . $post-&gt;post_parent); 

 if (have_posts()) : 
		while($my_query-&gt;have_posts()) : $my_query-&gt;the_post(); 
		the_attached_image('img_size=thumb&amp;css_class=image', $my_query); 
		endwhile; 
 endif;

$my_query = new WP_Query('page_id=' . $post->post_parent);

if (have_posts()) :

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

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

endwhile;

endif;

author

Yeah, WordPress hates PHP code that isn’t escaped using a plugin.

I was going to say something like this might work:

$tmp = $post;
$post->ID = $post->post_parent;
the_attached_image();
$post = $tmp;

$tmp = $post;

$post->ID = $post->post_parent;

the_attached_image();

$post = $tmp;

You can try that if you like as you won’t waste memory on creating another query. 😉 I’ll delete the post WordPress messed up. 🙂

What I’d really like to say is:

If attached image
the_attached_image()
else
attach the parent’s attached image

Any suggestions?

author

You could use something like:

if(have_attached_image()) :
	the_attached_image();
else :
	$tmp = $post;
	$post->ID = $post->post_parent;
	the_attached_image();
	$post = $tmp;
endif;

if(have_attached_image()) :

the_attached_image();

else :

$tmp = $post;

$post->ID = $post->post_parent;

the_attached_image();

$post = $tmp;

endif;

have_attached_image() is a function I added to the plugin a while ago for testing but I can’t see a reason why it shouldn’t work for you too.

By the way if you want to post code just put \php^ around you code. I haven’t finished updating the comments section of our new theme yet. 😉

Awesome. That worked great. Thanks!

author

No problems. Please excuse the mess the comments are in, I’m still getting them to work with our new theme.

Awesome plug-in, thanks!

I do have a slight issue though, and I’m not sure if it’s already been addressed in the comments: The image appears to be caching, so if I change the first image in the post, the old one is still used: any way for me to fix that on my end? I’m pretty PHP savvy, but a direction to be pointed in within your code would be a great help!

Also, some images don’t seem to be processed at all, though I’ll have to look into that more, as it may be an oversight on my end.

author

This is not the first time I’ve heard of this problem, but I’ve never ever been able to duplicate it. Even my sister who runs a design website has had it happen, but we were never able to find the cause.

The only time I’ve ever seen it happen is when using timthumb & it forgets to renew it’s image cache. People always suggest WP Super Cache but it only caches PHP to flat HTML not images.

If you can work with me to shed some light on the problem I would be really greatful. Any information you are able to provide would be great.

Paul,

After taking a deeper look, both issues seem to be tied to the WordPress Gallery.

Removing an image from the post does not remove it from the gallery. The first image in the gallery is actually the last item in the list, and adding a new image (even when removing an image from the post first), makes it the last image (first item in the list). Deleting the final item in the list (which the plugin is reading as the first image) shifts the image used up by one. Also, the other issue I mentioned (some images not being processed) seems to be because the image is not being added to the gallery (wordpress bug?)

I can definitely work around this wonkiness of WP’s, but maybe there should be an option to toggle “use first image” / “use last image” as a workaround (maybe a more elegant solution is available – I haven’t gotten to dive too deeply into the source code)? Otherwise, users need to delete the image not only from the post but also from the Gallery – something I don’t think many WP users are aware of. Ideally, removing an image from the post would also remove it from WP’s gallery, but that’s an issue for the WP team to decide on.

Again, thanks for the awesome plug-in! Now, if only we could set multiple thumbnail sizes, we could avoid the use of timthumb altogether! 😉

author

How I wish for multiple thumbnail sizes. Although it would create a coding nightmare for me trying to figure out the thumbnail sizes, unless WP was able to keep track of the sizes as it does now. 😛

I think I’ve just found the last/first image problem you have mentioned. I hadn’t realized before, but if you don’t re-order the images by dragging them (so the number fills in on the right hand side) and then save, it will fall back to showing the image with the highest ID, which is obviously the last image you uploaded. Unfortunately that is a WordPress quirk, as long as you shift the images a little so that the number appears & then save the order it will always work correctly.

There is a massive bug with WP’s gallery at the minute, I’ve reported it to trac, where if you upload more than 25 images it causes the image ordering to go strange when you press save.

As for the deleting from a post problem, I’m afraid I’m unable to replicate it, if I delete a image from the gallery (when editing a post) it deletes it from both the post & the media gallery. If you can provide any more information about what happens with the deleting problem I’ll certainly keep looking.

Thanks for your help & I hope that helps with explaining some of the quirks. 😉

author

I’ve just been prompted that if you are running WP 2.9 there may have been a problem where the gallery sometimes didn’t delete images correctly. I’m not sure if you are running 2.9 or if that is the problem, but just thought it was worth a mention. It was fixed in 2.9.1 I believe.

I stress that I’ve never experienced this problem, a friend just read your comment & emailed me about it, and I thought I would let you know just in case. 😆

Paul,
Thanks for the in-depth response(s)!

I am running 2.9.1, but still have the bug. In either case, it’s not a big issue, and certainly not one within the scope of The Attached Image! For all I know it could be a quirk on my end. Also, I never really use the Gallery feature, so I never re-order images…that may very well be what’s causing it. I’ll play with it later today and let you know what I find.

It’s great to see TAI working so well. Hopefully WP can sort out its media issues soon. Now to find that donate link…

Thanks for all the help!

author

No problems & thank you for the donation. 🙂

Feel free to drop by anytime & let me know of any problems etc.

If you do find a reason behind the images not deleting correctly please let me know. 😉

P.S. Your donation did register just in case you were wondering why the bar in the sidebar didn’t increase. We’ve been having problems with emails & outgoing socket connections on the server so the IPN response hasn’t submitted yet. 🙁

hi there, love the plugin it’s great

i want to use an image size between medium and large, so i tried setting the plugin to use large size, and then in the wordpress options i changed the max width and height from 1024 to 650 but this doesn’t work. i don’t want to specify the height, i just want the max width to be 650 and then the height to scale proportionally, so i’m not sure how i can do this?

any help is greatly appreciated, keep up the good work!

Hi David,

I’m not sure if you mean all new images are not being sized or all previous medium images are not being sized. At this moment WordPress doesn’t have a thumbnail regenerator (ther is a plugin though) so if you cange your thumbnail sizes after uploading images all of your old images will still have the old medium sizes.

To make custom sized thumbnails without having to regenerate your thumbnails you can always use a script like timthumb which creates the thumbnail on the fly. There is a tutorial on here on how to use timthumb with TAI. I’d give a link but I’m writing this on my iPod &ot just doesn’t want to type any HTML.

I hope I understood what you were asking for, if not just let me know and I’ll see what I can do to help some more.

thanks for the response, it occurred to me later as i thought about it more that that might be the case, i will try out your suggestions, thanks very much!

author

No problem. Here is the link to the timthumb tutorial I was talking about. 🙂

Thankyou, I didn’t knew this, thankyou.

Thankyou very much, I’ve found this extremely nice!

Go into the template editor & find where you would like the image to show.

where the heck is the template editor and what is it

Appearence -> Editor in the menu.

ok, i’m really bad with codes and stuff (ok, I have no idea!)

Let see if I can explain this correctly…

I want the plugin to work on the post page… so I go to “single post” at the theme files/templates menu??????

And then what??? Where do I paste the code?

Sorry, this sounds like a really stupid question, but like i said…I’m useless with this stuff!!

author

Hey there,

Yep if you want it to show on the post page you go to ‘single post’ in the editor (Appearance -> Editor) and place the code in the HTML where you want the image to appear.

Unfortunately there is no set place to put the code and it all depends on your theme. I can’t tell you exactly where to put it, but it must go between this code:

  <?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
      	<!-- <?php the_attached_image() ?> must go here. -->
      <?php endwhile; ?>
  <?php endif; ?>

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

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

<?php endwhile; ?>

<?php endif; ?>

The problem is that there is sometimes a huge amount of HTML in that gap & where you want it to appear is up to you.

It’s not that I don’t want to tell you where to put it, it’s just that where it goes is entirely dependent upon your theme. You have to look through the HTML & find the place where you want to appear.

I’m sorry if that’s a little vague, but I hope it helps you. Let me know if you need any more help.

I have same question as ilana–what templates and where really do you plug this in???????

author

This plugin is really for theme development & it’s placement is completely dependent on your theme.

If you are a novice in HTML & CSS you may struggle with where to place it, but unfortunately there isn’t a easy way to explain where to place the_attached_image().

I had planned to make a video tutorial on how to figure out where to put it, but never got round to it. I’ll see if I can do it later today, and hopefully it may help.

I’m soooo glad Im not the only one struggling!

Hi, does this work with WP 2.9.2 and is there an option/code to display the CAPTION?

author

Yep, I actively use it on this site & I manage Celeb O Rama for someone & that uses it, both are running 2.9.2.

There is a way to get the attached image to show captions. I covered it in a tutorial a little while ago, here. Unfortunately it requires using custom fields, but that seems to be the only way to do it.

Hope that helps.

This plugin works great, but I do have 1 issue though. It does take the first attached image and turn it into the thumbnail correct.
After that I have
[]
which then shows the image again at full size. Is there a way I can it from showing the image in the content (on the homepage)?

author

The plugin does grab the first attached image, but it doesn’t create the thumbnails. It just grabs the size (thumb, medium, large, full) you request from the thumbnails that WordPress auto creates when an image is uploaded.

I’m not sure what is causing the problem you are having though. I can’t tell what you wrote as WP seems to have stripped it. Can you try placing it between

tags or

tags, that should stop WP from removing it from your comment. Please remember to remove the spaces.

Hi!
I solved my problem already. The mistake I made was to call the_content after the thumbnail. This resolved in a thumbnail plus a fullsize image.
What I do now is call the_excerpt instead of the_content.
Problem solved.
Great plugin!

author

Ahh okay I understand. Glad you got it sorted. 😉

Hello Mr. Paul. Congratulations on this plugin. I have been searching for something like this for a few days now, and may I say that I think the search is over. Thank you for that.

I although have some issues. I am usion your custo query example in my site, which only displays the first image of the post. What i need to do, and i don’t know how, (I’m not a programmer), is to return the category ID according in which category i click.

This is what my code looks like:

have_posts()) : $cat_query-&gt;the_post();
the_attached_image('img_size=thumb&amp;css_class=image', $cat_query);
endwhile;
?&gt;

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

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

endwhile;

But it doesn’t work, it shows the images from all categories.
Can you help me?
Thank you in advance.

It didn’t show all the code I wrote, di I have to write it between some code tag?

Admin Edit: Yes between

tags, except with the spaces.

Here’s the code:

have_posts()) : $cat_query-&gt;the_post();
the_attached_image('img_size=thumb&amp;css_class=image', $cat_query);
endwhile;
?&gt;

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

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

endwhile;

author

Hi,

I’m not sure what you mean. Mainly because your query is missing. That’s WordPress’ fault, sorry. It tends to be a pain when posting code if you don’t use the

tags.

If you can repost the code again I’ll have a look at it for you. 😉

Thank you Paul for your answer. I already fixed it. Here’s how I did it.

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

<?php

$id = $cat;

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

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

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

endwhile;

But now I have another problem. I want to add some paginatiion, but it doesn’t work, I guess it’s because it’s not linked between the paginatinon and and how many post there are.

Here’s how I’m doing it, can you help me?

<?php
$id = $cat;
$cat_query = new WP_Query('cat=' .$id. '&posts_per_page=16');
while($cat_query->have_posts()) : $cat_query->the_post();
the_attached_image('img_size=thumb&css_class=image', $cat_query);
endwhile;
?>
<?php global $wp_query; $total_pages = $wp_query->max_num_pages; if ( $total_pages > 1 ) { ?>
																						
<div class="pagination nav">
	<div class="alignleft">
	<?php next_posts_link('&laquo; '._r('Older Entries')); ?>
</div>
<div class="alignright">
	<?php previous_posts_link(_r('Newer Entries').' &raquo;') ?>
</div>
<div class="clr"></div>
</div>
<?php } ?>

<?php

$id = $cat;

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

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

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

endwhile;

<?php global $wp_query; $total_pages = $wp_query->max_num_pages; if ( $total_pages > 1 ) { ?>

<?php next_posts_link('« '._r('Older Entries')); ?>

</div>

<?php previous_posts_link(_r('Newer Entries').' »') ?>

</div>

</div>

<?php } ?>

author

Well as far as I’m aware you can just use the variable $paged which is set automatically by WordPress. Something like this might work:

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

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

Hopefully that will help. 😉

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.