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

Okay, I got it to install and activate! What Im trying to do now is replace the calendar date Icons in WPTouch plugin to the thumbnails in each post using The Attached Image. Any idea of how it can do that? I read about it here http://support.bravenewcode.com/topic/possible-to-change-calendar-images , but was unable to get it to work, was hoping u could help

The method used in the forum you posted is the only way I’m aware of. I’m unable to test or make sure that it works due to not having an iphone or ipod touch.

I’ll be getting a ipod touch 3G for xmas so I’ll be starting to make sure the plugin is compatible with WPTouch around then.

thanks paul, ill keep trying

Sorry I couldn’t be more help. If you don’t get it working check back in a month or so when I should have my ipod (early xmas present I know) & hopefully will have sorted out how to get it working properly.

Hi,
I try to use the_attached_image() with a custom query in the sidebar.php of my template.
The custom query loop gives me the right posts (I checked by using a ).
But the_attached_image() does not output anything. I’m using wordpress 2.8.4.
I’d be glad if you could give some advice where to look next.

Hmmm, the only thing I can think of is make sure you are handing the query object as a second parameter to the attached image & also make sure there are images attached to the posts.

It’s most likely that the custom query is correct but you must give the object to the plugin as the second parameter (I will be fixing that in the next version so it does it all automatically).

Hey Paul, thanks for your time and effort on this plug-in.

I’m having one small problem. I made a custom page template for a page to display posts from a category. Instead of showing the given posts first image, it’s instead showing the current image of the current page. It can be seen at http://eurofx.thefra.me/news

Any help would be appreciated.

author

Hi,

No problem about the plugin. If you could post the code you are using to display the posts from a category I should be able to help. 😉

Wow you’re quick!

http://pastebin.com/m72678dbd

*The CSS is going to be replaced, as it currently reflects styling for the sidebar.

author

Ahhh yes, with my graphics card going off, and taking so long to be replaced I just haven’t had the time to fix this problem yet. I promise to get to it very soon. In the mean time here is a quick fix.

As long as $post is an object, it should be, just give it to the attached image call as a second parameter. Like this the_attached_image('', $post);.

Should work, if not let me know & I’ll see if I can come up with something else. 😉

Thanks for the plugin, it works great!! I was wondering if there is a way to put an image description or caption under the image?

author

Hmmm. Unfortunately not, but I’m currently considering overhauling the plugin slightly as WP 2.9 has a built in function similar to the attached image meaning I’ll need to add something different to it to make it stand out.

A caption could be a good one, so it’s added to the list. 😉

thanks a lot for the plugin.. it is wonderful..
i would love to donate.. but will wait till i get some $ in my paypal

This is an awesome plugin! I had a hard time getting pictures to display exactly how I wanted until I found this plugin. Discovered it as I was looking for a solution to my picture problem. THANKS!

Josh

author

Not a problem. The plugin is currently undergoing it’s version 2.7 overhaul which I’m hoping will make it even better. Glad you found it’s current version so useful though. 🙂

css_class option: from which .css is reading?

I used with a template css class but no success…

css_class just applies whatever class you provide as the class in the img tag. It has no specific target to any CSS file. As far as I am aware it still works, just check to see if the css class you provide is being written into the img tag if it is then it is just waiting to be provided some styling to that class. What CSS file you put it in is entirely up to you.

I am working on a website that is new to me. It uses the Attached Image plugin to nice effect. Except now, the client wants to put a flash banner on the home page. I can use a custom field and kimili plugin to get the flash banner in place (instead of the static images used on all the other pages), and all works well. Except the attached image is still trying to do its work, and there are some extra code snippets in gray just below the banner. Here is an example, placed on a low traffic page, I really want the flash banner on the home page.

http://siciclando.com/policies

So, is there a way to turn off attached image on a specific page, or another way for me to get rid of the pesky extra code?

Thanks for the plugin and thanks for your time.

mark

Hey there Mark,

Not entirely sure what’s going on there. Have you uploaded the banner as an attachment to that page? It looks as if WordPress is trying to load a flash embed which if the Attached Image picks up as an attached file it will try to load into a img tag (hence the brokenness). I need to make the Attached Image distinguish picture from swf’s, movies etc which is planned for the next version.

The best way to have the flash on the front page (if you only want it on the front) & keep the attached image everywhere else is to open up the template & use a conditional tag. It could look something like this.

if(is_home()) {
  //Do whatever it is I want to happen on front page
} else {
  the_attached_image('option=value&option=value');
}

if(is_home()) {

//Do whatever it is I want to happen on front page

} else {

the_attached_image('option=value&option=value');

}

There you have it. If you put your flash embed in the first condition it will show on the front page & the attached image will work on all the others.

Wasn’t sure how much knowledge of HTML & PHP you have so sorry if I’m assuming too much or if I’ve explained too much. Just shout if you have any more questions. 😉

Hi Paul,

Nice plugin. But i face a very sad problem for a non-coder. My theme doesn’t use the loop, neither the query post function in the way you presented it in your documentation. Here is the way to call posts in my theme :
So, every post displays the same image, the one used in the first post displayed on the homepage. Any simple way to use “attached image” with that code ? Thanks.

The lang tag doesn’t seem to have saved my code section so i try again…

Hi Paul,

Nice plugin. But i face a very sad problem for a non-coder. My theme doesn’t use the loop, neither the query post function in the way you presented it in your documentation. Here is the way to call posts in my theme : global $post; $myposts = get_posts(‘numberposts=1’); foreach($myposts as $post) : setup_postdata($post);
So, every post displays the same image, the one used in the first post displayed on the homepage. Any simple way to use “attached image” with that code ? Thanks.

Sorry about the code not posting I’ve no idea what causes it.

Anyway onto your question. You can use the attached image with that setup it just takes a little bit of extra code. Before the line setup_postdata($post); put this:

$my_query->ID = $post->ID;

1	$my_query->ID = $post->ID;

then in the call to the attached image add $my_query as a second parameter. Like this the_attached_image('', $my_query);. Hopefully that will work, it just fools the_attached_image into thinking it is inside a WordPress loop.

Hope it works, let me know if you have any more problems. 😉

Thanks for your quick answer. I’ll try this and post the result here …

Sorry, doesn’t seem to work. Here is the code. Any mistake or misunderstanding about the place of $my_query->ID = $post->ID; ?

++++ global $post; $myposts = get_posts(‘numberposts=5&offset=1’); foreach($myposts as $post) : $my_query->ID = $post->ID; setup_postdata($post); ++

++++ the_attached_image(”, $my_query); ++<?php the_content(); ++

Mmmm! That should work. May seem like a stupid question (but I have to ask) you have put all of this code in php tags? It’s just that the code you have posted opens the tag after the call to the attached image (I’m assuming that’s just how it copied across though).

Actually I may have found something, try moving the line to after setup_postdata($post); that may get it too work. Let me know how it goes.

You can find the all index page of the theme here : http://www.buffet-traiteur.fr/index.txt
Line 59 for the first change of code.
The plugin was activated during the test, of course, and there was an image in the post.

Sorry, didn’t see :
“Actually I may have found something, try moving the line to after setup_postdata($post); that may get it too work. Let me know how it goes.”

I try that.

Doesn’t work either when moving my_query after setup_postdata.
Theme file here : http://www.buffet-traiteur.fr/index2.txt
Sorry … 😉

I don’t know what it is with me lately. I’ve miss the obvious problem with the code I gave you. It should say this:

$my_query->post->ID = $post->ID;

1	$my_query->post->ID = $post->ID;

You’ll have to try it before & after setup_postdata($data); as I can’t remember which place it should go.

Again I’m sorry about the problem that should fix it. 😉

First off the plugin is great.

I’ve got a very peculiar problem at the moment on a site.

I have a list of posts on the home page, all from the same category. When I add a post sometimes is doesnt show the Thumbnail at all (perhaps 50 or 60% of the posts), no source code inserted, almost like the plugin doesnt find an image.

If I delete the image from the post and simply re-insert it it shows up. I’ve just hit one now however that wont show at all.

Any thoughts?

Thanks

Lee

Just another detail, this very stubborn post is a copy of another one, no change to the code at all, just copied the content from html view and pasted it back in.

I’ve tried several images that are working fine on other posts so its not an image issue

Hope you can help

Thanks

Lee

I’ve just discovered that clicking Pick

Functionality Turn On In Post Image Functionality

and putting 1 as the value fixes this problem

Very odd

I also compared the source code from one that didnt work to one that did and they were exactly the same. Very odd

Thanks

Lee

I’ve never come across that exact problem before but my best guess would be it has something to do with how the loop is configured (or created) in the theme you are using.

Also since you’ve said that the in post functionallity works (that takes the first image from the post content) that would mean it would be your WP loop. The only way I can try to help you is if you post how your theme makes the loop. As it’s probably a fairly large piece of code you may want to paste it into pastebin.com & post the link. If you can do that I’ll help you as much as I can. 😉

Unfortunately the last option kills the Featured Content Gallery when enabled

The strange thing with this is that it works perfectly on some posts and not others, and as I mentioned its copied and pasted so cannot be an image or post content problem.

You can see the problem on the right column here

http://www.yorkshiremanrestaurant.co.uk/

I can the and find you the loop later

Do you have any thoughts on why the post function would break FCG?

Thanks

Lee

This loop is in category posts plugin, I’ve tweaked it slightly and posted the code on pastebin but I have the same problem whereever it appears (even with a slightly different query)

http://pastebin.com/m3128cf2e

Thanks

Lee

Wow! I’m afraid I’m officially stumped. From looking at the pastebin I can’t see any problems it looks perfect. I was going to ask if you’d made sure an image is attached but you’ve already said you have tried reuploading again & again.

The images that wouldn’t show up till re-uploaded? My best guess is that for whatever reason they weren’t in WP’s db properly or not set with the correct status maybe? As for this stubborn one, I honestly have no idea. You’ve added in the attached image in the plugin exactly like I would have. I just don’t understand how it can work for most of them & not for this one. 🙁

If you can find out anything else that would help alot, I’ll keep looking over the pastebin & try and find any quirks in the code.

Sorry for the problems your having.

Its not just one stubborn one now, another is doing it, again a repeat of another post, but I’ve tried doing it from scratch and it still wont do it, as I say its also doing it outside the cat-posts plugin.

Do you have any thoughts on why the function option would break the featured content gallery? that just goes blank when its on

Dont worry, its the joys of WP! I’ve already told studiopress (theme people) about adding your plugin, its a damn site better than manually adding links to all the images in custom fields.

Thanks

Lee

Thanks, I always loved Studiopress’ these but thought they should have either used or built something like my plugin, of course that way way back before I made the plugin & they weren’t called Studiopress, lol.

I’m not sure what is causing it to miss things inside or outside of the plugin. The only thing that has ever caused it to drop thumbs is because of different loop types, I’ve tried my best to cover them all but sometimes one I’ve never seen before pops up, the plugin should work with, WP_Query loops & the standard WP loop, I’m currently upgrading it so that it will work with loops that alter the $post variable directly. Other than that I can’t think of anything.

As for the in post functionality breaking the FCG plugin, I’ve never used them together so I’d never notice. I can’t think of any reason for it to break it though as the attached image is dormant until called via the_attached_image() even with the in post function enabled. I’ll have a check through the code, etc but nothing springs to mind. 🙁

I’m fairly new to WP so if you can tell me where the loop is likely to be in the code I grab it for you to look at

I’m heading out now so will be tomorrow when I’m back on it

Lee

The loop generally looks like this:

if(have_posts()) :
  while(have_posts()) :
    //Stuff here
  endwhile;
endif;

if(have_posts()) :

while(have_posts()) :

//Stuff here

endwhile;

endif;

Something like that, I’ll need the few lines above it too.

Which file will it be in??

I know meh PHP but WP is sodding infuriating at times!

Lee

It depends, it’s in quite a few of WordPress’ files, single.php, category.php, index.php, archive.php any of them. They all relate to a different part of WordPress. You might want to read a bit of the WordPress codex first as Theme Development is tricky if you don’t use the codex.

This is index.php, it shows individual posts without any fluff on

http://pastebin.com/m610b17f9

Lee

Heres sidebar.php

If you can see anything it would be a big help!

As you said I dont understand why it interferes with FCG, not as if theres any JS involved

Lee

I can’t see anything that would cause a problem, the loop is just a standard WP loop, in the index.php anyway, as for sidebar.php I don’t know because I can’t see a link to a pastebin, lol. WP can be a pain sometimes so sorry if it stripped it. If you post it again I’ll have a look.

I forgot to paste the link

http://pastebin.com/m1cfe96ec

But it cant be that any really as it fails in the main body featured items also.

Bloody odd this

Lee

Paul

Sorry about this, I’ve switched the function setting again and the FCG is working fine, I suspect that was a java glitch or something as it seems fine now and the thumbnails work perfectly now with that setting on.

Thanks for you help, hopefully its going to be fine now. I’ll try and send you something over

Thanks

Lee

No problems. I’ll keep looking a little longer for the cause of the thumbnail problems just in case there is a bug somewhere. As for what happened to FCG, your guess is as good as mine when it comes to JS. 😆

Thanks. 😉

I have a problem with
get_posts(‘offset=0&numberposts=6&category_name=homepage’);
foreach($myposts as $post): setup_postdata($post);
the_attached_image(‘img_size=thumb’);
endforeach;

I’ve inserted this
$my_query->post->ID = $post->ID;

Like:
get_posts(‘offset=0&numberposts=6&category_name=homepage’);
foreach($myposts as $post): setup_postdata($post);
$my_query->post->ID = $post->ID;
the_attached_image(‘img_size=thumb’);
endforeach;

But it does show the first thumb with every post. Can you help me?

You need to provide the $my_query variable as the second parameter to the attached image. Like this:

foreach($myposts as $post): setup_postdata($post);
  $my_query->post->ID = $post->ID;
  the_attached_image('img_size=thumb', $my_query);
endforeach;

foreach($myposts as $post): setup_postdata($post);

$my_query->post->ID = $post->ID;

the_attached_image('img_size=thumb', $my_query);

endforeach;

It’s a problem with the way I implemented post looping due to a bug in WP 2.7 & never fixed it. I’m fixing it in the new version so you won’t need to do that soon. Hope that helps. 🙂

I’ve tried this:

foreach($myposts as $post): setup_postdata($post);
$my_query->post->ID = $post->ID;
the_attached_image('img_size=thumb', $my_query);

foreach($myposts as $post): setup_postdata($post);

$my_query->post->ID = $post->ID;

the_attached_image('img_size=thumb', $my_query);

With no result… no image is shown…so I tried this:

foreach($myposts as $post): setup_postdata($post);
$my_query->post->ID = $myposts ->ID;
the_attached_image('img_size=thumb', $my_query);

foreach($myposts as $post): setup_postdata($post);

$my_query->post->ID = $myposts ->ID;

the_attached_image('img_size=thumb', $my_query);

It seems to work… but every post in de for each loop is containing the same image(first post is having a image, te other posts don’t have a image) I hope you’ll understand it with my poor english

I’m not sure what’s going on there. I’ll try to replicate the code you have on my local server & see if I can come up with anything. I’ll get back to you tomorrow if that’s ok.

Sorry about the problems.

author

Sorry it took so long to get back to you. I’ve tried this code & it seems to work ok on my local server:

$myposts = get_posts('offset=0&numberposts=6');
foreach($myposts as $post): 
  setup_postdata($post);
  $my_query->post->ID = $post->ID;
  the_attached_image('img_size=thumb', $my_query);
endforeach;

$myposts = get_posts('offset=0&numberposts=6');

foreach($myposts as $post):

setup_postdata($post);

$my_query->post->ID = $post->ID;

the_attached_image('img_size=thumb', $my_query);

endforeach;

If that doesn’t work it must be something unique to your setup which is exceptionally hard for me to help you with. 🙁 Sorry.

I’m totally confused as to how to get this plugin to work… What file do I edit… and where in the file do I put your recommended text?

Thx for your help.

Hi,

You have to edit your WordPress template file for the area you want the picture to show. For example, if you want it to show the picture on your home page find the index.php file in your template, find the loop, and add the_attached_image() in the loop.

Thanks so much this is a really great plugin. I’d say it would be even greater if you could use multiple template tags to pull say first image 1 in the gallery order and display it large and then another to display image 2 medium sized etc.

Custom fields get a bit laborious when it comes to that kind of setup.

Thanks for all your hard work and contribution to help make our lives easier with this great plugin!

Hi,

Thanks for the support. 🙂 I think you may be able to do what you asked. I’m not sure if I added the feature yet (I don’t have access to my dev version at the minute) but if you add the_attached_image('img_size=large'); for the first one and the add the_attached_image('img_size=medium&image_order=2'); it should show the first image large & then the second image medium. If you don’t have a (n)th (second in this case) image it will show the nearest it can get to the (n)th image.

I hope that makes sense, let me know if that works & I agree about custom fields they are a pain sometimes. 😉

Hallo,

Great plugin! It’s the second time I used it in a blog.

Though this time, I was wondering if it will be possible to add a style effect to the thumbnail when you have the mouse over (a:hover)?

I tried a few things like:
.class a:hover { xxx }
.class img:hover { xxx }

But none worked. Any ideas? or maybe not possible?

Thanks!

Really really sorry about not replying sooner.

As for your CSS it looks fine to me. I’ve built a few websites using my plugin with a hover effect on them & I generally gust use the psudo hover. Althought :hover will only work on the a tag in IE6. If that’s not the problem (which I’m guessing it’s not) then I’m not sure.

If you can provide any more info that might help I’ll certainly take another look for you. Sorry I haven’t been much help. 🙁

mhmh did my last comment go through?

I guess not. ahh here we go again.

Just wanted to say thanks!! And also for creating such a useful plugin.

No worries you didn’t answer right away. As long as you answer at some point, all is good. Plus it’s the weekend and the holidays =)

I appreciate your answer, as when I heard you have already tried the hover effect in some of the websites you’ve done with this plugin, I tried once again. But something different. I stopped calling the image or link in the class.

And it worked!
Here’s the code that worked out for the hover effect in the thumbnail:
.class:hover { xxx }

You can see it working in my website’s blog:
http://tinyurl.com/yaj6og6

Cheers!

Hi, thanks for understanding about the late reply.

Good job on getting it sorted, I don’t know if you’re aware but .class:hover will not work in IE6. Don’t quote me on that as my cross browser compatibility is a little rusty, but I’m pretty sure IE6 doesn’t recognise psudo operators in anything but the a tag.

If you don’t care about IE6 though then you’re all set. 🙂

author

Just another little message, now that I’ve had a proper look at your site (which is looking good by the way).

If you aren’t really bothered about IE6 then feel free to ignore. Your pseudo (.class:hover) will not work in IE6, which I’ve already mentioned, but also the semi-transparency will not work as IE6 doesn’t understand opacity: 0.5 in CSS.

Sorry if it seems like I’m going on, and on, but I just want to let you know that some of your viewers may not see what you expect if they are using IE6 (which unfortunately is still quite a popular browser).

Hey thanks again for your feedback! And for taking the time to look into my website.

I actually do not care if people using IE6 can’t see the hover effect in my thumbnails. If they are using IE6 though, it’s already sad for them anyway.

I honestly don’t understand how so much people uses IE, when Firefox is just a better browser.

And actually, I do tested my website in IE anyway, as I know many people still uses this horrible browser. And I don’t know about IE6, but in IE7 it works.

I hope at least people with IE, is using the current version 7.
Because there you can see the hover effect (.class:hover) working just fine as in other browsers.

About the opacity. That one works fine too in IE7 (at least). There’s a little trick on the code for IE css opacity: (filter:alpha(opacity=50)).

Cheers!

author

Yeah, most things work in IE7 (thank god) although it’s still an awful browser. I loath IE in all incarnations although if I had to pick IE8 is the best.

From what I can find out 11.1% of people use IE6, which is a lot lower than I thought, so I’m glad to see it’s dying out.

Glad to hear designers & developers are finally deciding to drop support for it too. 🙂

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.