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

All right, works like a charm now! I have a suggestion for the plugin, but i don’t know if it’s a reasonable thing to ask though. Would it be possible to make it like that, that if you use custom size on the options page, that the picture doesn’t shrink, but just takes a chunk out of the image with those sizes you entered? I don’t know if my explanation is clear enough? Hope to hear it.

Friendly greetings from Finland!

author

@Jake: No problem Jake, It was a good idea that I’d planned to add ages ago but never got round too. Your request for it gave me the kick up the backside I needed to add it. 🙂

@Arjan: Glad it’s working now. Unfortunately that isn’t possible because of coding limitations. The width & height are set via the image tag’s width & height attribute which resize the image via the browser your usings built in javascript functions.

I am trying to think a solution & there may be one in a future release so keep watching this space. 🙂

Hi, is me again 🙂

I tried looking for home.php & single.php. Apparently, the theme I am using (Atahualpa) does not have them. It only has a main index.php. I went through the index.php, it has lots of lines like this : …..if (is_home()) …OR (is_single()). So, I assume I have to do something like this to exclude some pages and include some pages. I am sorry that I don’t know how to code them, I tried, but obviously failed ! lol

Wonder if you are free to help me a bit here?

Thanks in advance !!

Ahh well that makes it a little simpler. If you only want the image to be shown on the home/index page and not single posts use something like this:

if(is_home()) {
  the_attached_image();
}

if(is_home()) {

the_attached_image();

}

instead of:

the_attached_image();

1	the_attached_image();

That should work. Don’t worry about it. PHP & WordPress is a little tricky at first. 😉

Ok, this is working great. Im still having a little problem with the resizing though.

this page is a good example of my different posts.

http://jakegarrison.com/blog/category/general/

I understand that I need to use the att_width & att_height to set the custom size. Do I put this in the custom fields of the post, or set it in the php of the template?

Hi, it works well ! 🙂 Thanks so much !

However, how could I also include category page, achive page and search page (exclude the single post page) in the codes? I tried to use AND or OR (trying hard to pretend I kind of know something 😉 ) but give my site a blank page.

Then, I did this :

I know it is stupid lol ! However, this is the only way I know how to do it. It works ok with achive page. But when I click the category from my homepage, then it will show two same images side by side at the category page.

Also, currently, at the homepage, the image is sitting on top of the title & content. I hope to make the image float left, so content can wrap the image on right. I tried to look the template you shared for the celeborama, but can’t figure how I could do it.

Last but not least, I imported XML files from wordpress.org to my new self-hosted site. However, no attached image show up unless I re-upload them. Is that a trick to do this faster?

I am so sorry for so many questions 🙁 I really appreciate your time and help !

author

@Jake: Well normally WordPress will grab the sizes of the images, but if you are using external images from facebook (or anywhere else) I don’t think the plugin will resize them. I’ll try and add that in for you in a few minutes.

Once I’ve done that you can set the width & height using the keys you mentioned in the custom fields or using the options page or using legacy parameters in the function call. I’ll try and get the resizing done asap for you. 🙂

@shirls: Ok. First of all the code you posted vanished because of WordPress. 🙁 When posting code please try to post it like the little note says just above the reply box.

Next to show on all pages but the single page you just do this:

if(!is_single()) {
  the_attached_image();
}

if(!is_single()) {

the_attached_image();

}

The exclamation mark means is not. So you are saying if it isn’t the single page show the attached image. 🙂

The floating is kinda tricky. I can’t really tell you what to write because it depends on your site, but I can try and give you the gist of how the whole float thing works.

To float an image and have text flow around it you just need to make a CSS class that instructs the image float. Say you are using the default ‘attached-image’ class that my plugin automatically assigns to the images, the you could just do this in the CSS file, generally called style.css.

img.attached-image {
  float:left;
}

img.attached-image {

float:left;

}

If you want the images to float right instead then change it to float:right;. The problem is that floats have to be cleared to stop strange happenings in other browsers, and it’s good practice anyway.

Find out the class name of the container that holds your post content, it’s generally post or post-content something like that. It will come just before the post header, but just after the start of the post loop. Find the matching CSS rule in the CSS file. Now add this to it’s rules (I’m using post-content as an example):

.post-content {
  width:640px; /* DO NOT COPY these are just example rules */
  margin:10px; /* DO NOT COPY these are just example rules */
  padding:4px; /* DO NOT COPY these are just example rules */
  height:100%; /* Internet Explorer Hack for floats this is the rule you want */
  overflow:hidden; /* Internet Explorer Hack for floats this is the rule you want */
}

.post-content {

width:640px; /* DO NOT COPY these are just example rules */

margin:10px; /* DO NOT COPY these are just example rules */

padding:4px; /* DO NOT COPY these are just example rules */

height:100%; /* Internet Explorer Hack for floats this is the rule you want */

overflow:hidden; /* Internet Explorer Hack for floats this is the rule you want */

}

If you want to float it like on Celeb O Rama, so that the text stays to the right and doesn’t flow underneath the image, it’s kinda tricky but it’s based on the same idea. Instead of floating the image you place the image in a <div> and the text content in a <div> and float them both. You will still need the clear in the content container as well.

I hope that helps, no matter how hard I try floating still gets confusing to explain but hopefully that will help you. If you still have problems give me another shout & I’ll see if I can help some more.

author

@Jake: Ok, I’ve completed that fix for you. It should be version 2.4.6 and will be available via WP plugin update as soon as the SVN server updates. Hope that fixes it & sorry. I guess I hadn’t had enough coffee. 😛

Hello, I’m making a theme and trying to auto attach thumbnails. I’ve made a post, and attached an image via the Media Gallery.
My code is: http://pastebin.ca/1353717

the plugin is enabled, the image appears on the single post. If I type ” <img src=””>”
the image is not found, and it is trying to link to the root of my wordpress install. Weird?

author

I’m not exactly sure what you are asking but the plugin is meant to output an image tag pointing to the first attached image. You can echo out the path to the image to put in your own image tag if that’s what you want. You just turn generate an image tag to false in the options page & it will output the path to the image instead.

If that’s not what you meant please explain a little more & I’ll get back to ya. 🙂

Sorry. Ok. So it now works! Kinda. It’ll show the default thumbnail (specified in your plugin options) but wont use any images in our posts.

Eg: http://davepress.org.uk/ukti/2009/03/trial/ has an image in it, but the thumbnail is still the default.

Any ideas?

author

Without seeing the template, I can’t really figure it out. I can give my best guess though.

My best guess is that in the custom loop parts of the theme, the $post array has not been repopulated for each new custom loop. Most people forget about it but lost of posts that alter or add to post content need them.

At some point I’ll try and add something to compensate. Untill then if you can post your template code to something like pastebin so I can see it I’ll beable to tell you if that’s the problem. If not I’ll see what else I can find.

Sorry about the problems & I hope we can fix them quickly for you. 🙂

what parts of the template do you require?

author

If it’s a normal template & the images should be appearing where the UTI crowns are it would just be the entire index.php file of the template.

here’s the index.php – http://pastebin.ca/1353789

the theme is mimbo pro.

author

Wow I didn’t recognize it. 😆

Ok first we’ll start with this bit:

<?php
                //Interacts with control panel to determine lead category
                        $bm_categories = get_categories('hide_empty=0');
                        $mim_feature = get_settings( "mim_feature" );
                        if( $mim_feature == 0 ) { $mim_feature = $bm_categories[ 0 ]->cat_ID; }
                        query_posts( 'showposts=1&cat=' . $mim_feature );
                        while (have_posts()) : the_post();
                ?>
                <?php the_attached_image(); ?>
                </div>

<?php

//Interacts with control panel to determine lead category

$bm_categories = get_categories('hide_empty=0');

$mim_feature = get_settings( "mim_feature" );

if( $mim_feature == 0 ) { $mim_feature = $bm_categories[ 0 ]->cat_ID; }

query_posts( 'showposts=1&cat=' . $mim_feature );

while (have_posts()) : the_post();

<?php the_attached_image(); ?>

</div>

The problem is that query_posts in my experience doesn’t reset the $post array. So you have to do it manually. I haven’t been able to test this since I’m not at my localhost but it should work.

Everytime you use the_attached_image() in a loop that isn’t the main wordpress one (another words if it doesn’t use the query settings definied in the options pages of wordpress) then you will need to replace the query_posts that is in the template with a new WP_Query instead. Here is what the first query from your template would look like:

//Interacts with control panel to determine lead category
$bm_categories = get_categories('hide_empty=0');
$mim_feature = get_settings( "mim_feature" );
if( $mim_feature == 0 ) { $mim_feature = $bm_categories[ 0 ]->cat_ID; }
$temp = $wp_query; //store the old WP query
$wp_query = null; //Nullify the $wp_query variable
$wp_query = new WP_Query(); //create a new query
$wp_query->query(showposts=1&cat=' . $mim_feature); //Change the query to whatever it said in the template
$temp_posts = $posts; //store the old posts array
$posts = null; //nullify the posts array
$posts = $wp_query->posts; //store the new posts array
$tmp_post = $post;
$post = null;
while (have_posts()) : the_post();

//Interacts with control panel to determine lead category

$bm_categories = get_categories('hide_empty=0');

$mim_feature = get_settings( "mim_feature" );

if( $mim_feature == 0 ) { $mim_feature = $bm_categories[ 0 ]->cat_ID; }

$temp = $wp_query; //store the old WP query

$wp_query = null; //Nullify the $wp_query variable

$wp_query = new WP_Query(); //create a new query

$wp_query->query(showposts=1&cat=' . $mim_feature); //Change the query to whatever it said in the template

$temp_posts = $posts; //store the old posts array

$posts = null; //nullify the posts array

$posts = $wp_query->posts; //store the new posts array

$tmp_post = $post;

$post = null;

while (have_posts()) : the_post();

After the while you would need to add this little extra bit. It must come straight after the the_post();

$post = $wp_query->post;

1	$post = $wp_query->post;

Then after the while loop ends (line 35 in your template) you need to reset everything like this:

$wp_query = null;
$wp_query = $temp;
$posts = null;
$posts = $temp_posts;
$post = null;
$post = $temp_post;

$wp_query = null;

$wp_query = $temp;

$posts = null;

$posts = $temp_posts;

$post = null;

$post = $temp_post;

Unfotunately you’ll have to do that everytime changing the query each time. The reason is simply because WP doesn’t update the $post or $posts array when using query_posts() and they are the only two variables plugin developers can use to grab the current post. Using this method updates & then restores those variables each time meaning the plugins can use those arrays properly. I use it on Celeb O Rama & the site Purrfect Gifts uses it quite extensively along with my plugin to make the Carousel.

If you have any other questions or are still confused about making the custom loops let me know & I’ll see what I can do to help. 🙂

cool! I’ll try it now. What should this line in your code be:

$wp_query->query(showposts=1&cat=' . $mim_feature); //Change the query to whatever it said in the template

1	$wp_query->query(showposts=1&cat=' . $mim_feature); //Change the query to whatever it said in the template

seems to have an open ‘

whoops, sorry, just re-read the comments … !

I’m probably being *really* dense, so I apologize.

this code you pasted:

		cat_ID; }
	$temp = $wp_query; //store the old WP query
	$wp_query = null; //Nullify the $wp_query variable
	$wp_query = new WP_Query(); //create a new query
	$wp_query->query(showposts=1&cat=3 $mim_feature); //Change the query to whatever it said in the template
	$temp_posts = $posts; //store the old posts array
	$posts = null; //nullify the posts array
	$posts = $wp_query->posts; //store the new posts array
	$tmp_post = $post;
	$post = null;
	while (have_posts()) : the_post();
	$post = $wp_query->post;
	
		?>

cat_ID; }

$temp = $wp_query; //store the old WP query

$wp_query = null; //Nullify the $wp_query variable

$wp_query = new WP_Query(); //create a new query

$wp_query->query(showposts=1&cat=3 $mim_feature); //Change the query to whatever it said in the template

$temp_posts = $posts; //store the old posts array

$posts = null; //nullify the posts array

$posts = $wp_query->posts; //store the new posts array

$tmp_post = $post;

$post = null;

while (have_posts()) : the_post();

$post = $wp_query->post;

we want to show the category with id “3” — but wordpress says:
Parse error: syntax error, unexpected ‘=’ in /index.php on line 17

what are we doing that is daft? thx 🙂

author

😆 Nope you’re not being dense. That was actually my fault & you were right the first time, I do have a unopened quote. The line:

$wp_query->query(showposts=1&cat=3 $mim_feature);

1	$wp_query->query(showposts=1&cat=3 $mim_feature);

should be:

$wp_query->query('showposts=1&cat='.$mim_feature);

1	$wp_query->query('showposts=1&cat='.$mim_feature);

I’m assuming the theme Mambo pro has some sort of options page where you can set the category this shows (that’s what $mim_feature is for. 🙂

Give that a try & let me know. 🙂

still just the default thumbnail (although the code now runs and doesnt error). The post content is simply a html image tag:

so I don’t think its a problem with the post…. Any other ideas?

Peter

author

Your code vanished… Damn I hate WordPress sometimes. 😛

I did manage to give the code a go on my localhost this morning & when using query_posts(); it doesn’t work properly (it trys to use the posts from the main loop), but when I use the code I gave to you it works correctly. So I’m not sure why the image isn’t showing… I’m afraid you have me beat. 🙁 Sorry.

The only thing I can suggest is that it is still something to do with the way the theme works since there are already quite a few people using it, including myself. 🙂 You could send me the whole theme & I’ll try & get it working on my local server, other than that I’m afraid I’m stumped. I’m really sorry. 🙁

author

@Peter C: I have made an alteration to the plugin to fix any problems with query_posts(). It shouldn’t have any problems with the $post array now. So it should work without any problems.

If it doesn’t fix the problem please consider sending me a copy of your theme via email since it means there is a major problem with that theme and my plugin & it would be a great help to try & fix the problem. You can send to admin[at]return-true[dot]com.

Thanks & you should be able to get the updated version (2.4.7) from the WP repository in a few minutes time.

Hi,
I’ve been following you and Peter C, because I’ve got the same issue, only I’m using the default wordpress theme in which I’ve customised the HTML only. I’ve upgraded to v2.4.7 a minute ago too, but still no luck.

I’ve done some debugging and have narrowed it down to the following:
Works when I create a new post, and upload an image into the post.
Doesn’t work when I create a new post and insert an existing image from the media library (i just get my default pic).

The website in question is http://lisafaye.robholmes.net

I’m a PHP developer if that helps, so feel free to throw any jargon at me you need to, or ask any questions about setup, etc.

Hope you can help. Thanks,
Rob

author

Hi there Rob.

By insert another pic from the media library do you mean using the custom fields to show a picture by ID? That’s the only way to get WP to show a picture attached to another post. If so there may be a problem there & I’ll see if I can find it and fix it.

On a small side note I really like that site. 🙂

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.