query_posts('showposts=5');
while(have_posts()) :
the_post();
$images = get_children(array(
'post_parent' => get_the_id(),
'post_type' => 'attachment',
'post_mime_type' => 'image',
'orderby' => 'ID',
'order' => 'ASC',
'numberposts' => 1
));
foreach($images as $id => $image){
echo wp_get_attachment_image($id);
break;
}
echo '<a href="' . get_permalink() . '">' . get_the_title() . '</a>';
endwhile;
wp_reset_query();
Thread Starter
ttw
(@ttw)
Hi, for some reason it’s only showing one image and is there anyway that you can make the image float left and de-size it? Cheers
$images = get_children(array(
'post_parent' => get_the_id(),
'post_type' => 'attachment',
'post_mime_type' => 'image',
'orderby' => 'ID',
'order' => 'ASC',
'numberposts' => -1 /* get all images */
));
foreach($images as $id => $image){
echo wp_get_attachment_image($id, array(50/* width */,20 /* height */), false, array('class' => 'my-image'));
// break; // if this loop breaks, only one image is shown
}
style.css:
img.my-image{float:left;}
Thread Starter
ttw
(@ttw)
Thanks the image size and position is perfect now! But it still only displays one image http://www.filedropper.com/picture3_35 Also do you know a way to a separate the posts by a few lines. Many thanks
Mmm..
Below code will show all images attached to each post.
query_posts('showposts=5'); // recent 5 posts
while(have_posts()) :
the_post();
?><div class="my-post"><?php
$images = get_children(array(
'post_parent' => get_the_id(),
'post_type' => 'attachment',
'post_mime_type' => 'image',
'orderby' => 'ID',
'order' => 'ASC',
'numberposts' => -1 /* get all attached images */
));
foreach($images as $id => $image){
echo wp_get_attachment_image($id, array(50/* width */,20 /* height */), false, array('class' => 'my-image'));
// break; // if this loop breaks, only one image is shown
}
echo '<a href="' . get_permalink() . '">' . get_the_title() . '</a>';
?></div><?php
endwhile;
wp_reset_query();
style.css:
img.my-image{float:left;}
div.my-post{padding:1em 0;}
Thread Starter
ttw
(@ttw)
Works almost perfectly now, cheers! One problem though is it’s still showing only one single image http://www.filedropper.com/picture5_20 Any ideas? Once again thanks for all the help
1st, 3rd, 4th and 5th posts have really some images?
Make sure that all images are linked to a post.
I dont mean if there is image in the post on editor.
Pls check image list on admin panel/media library.
Thread Starter
ttw
(@ttw)
Heres a screenshot of my first and second posts, both have images in them. http://www.filedropper.com/picture7_7 I linked in the images just as usual. Cheers
Thread Starter
ttw
(@ttw)
I just changed the images around so that both would be different and i’ve now realized that the image showing is actually from the first post, just positioned inline with the second post title. So that means that only the 1st post is displaying the image (not the 2nd, 3rd, 4th or 5th). Once again heres the screenshot: http://www.filedropper.com/picture5_20 Thanks
the code given by @kz only works for images that are uploaded as attachments – not for externally linked images.
Thread Starter
ttw
(@ttw)
Yep all my images have been uploaded as attachments
http://www.filedropper.com/picture7_7
No, pls show the screenshot of admin panel/media library.
And pls show your site URL or HTML code of some posts that include IMG tag, if it is possible.
I think that each post have IMG tag indicates the same image.
Thread Starter
ttw
(@ttw)
Here’s my media library http://www.filedropper.com/picture6_26 and my site url is http://www.thetechwhizz.com/Testsite but please view it in any browser than IE, it’s still in testing and it’s completely messed up in it.
Thanks
Picture-1.png attached/linked to “New Tech Site Could Beat Them All?”, but it shown in “Fairly Long Title To See If Share Buttons Move Move Move”.
This mean your images have been uploaded, but not attached/linked to the post that you want to show.
So, you must get information of IMG tag in each post, not attached/linked image.
Try this:
query_posts('showposts=5'); // recent 5 posts
while(have_posts()) :
the_post();
?><div class="my-post"><?php
global $post;
if(preg_match_all('@wp-image-([0-9]+)@i', $post->post_content, $ids)){
foreach($ids[1] as $id){
echo wp_get_attachment_image($id, array(50/* width */,20 /* height */), false, array('class' => 'my-image'));
// break; // if this loop breaks, only one image is shown
}
}
echo '<a href="' . get_permalink() . '">' . get_the_title() . '</a>';
?></div><?php
endwhile;
wp_reset_query();
