Previous Post / Next Post Image Thumbnails using Autofocus
So I’ve been uploading photos for a few months now to my photoblog and it’s been interesting. I love the Autofocus theme and all the amazing things it does, but it lacked something…
What’s Missing
My photoblog, that is using the amazing Autofocus theme is simply that…a simple photoblog of some of my photos taken from any and everywhere.
I noticed something wasn’t right and I had one gripe about it…on single pages it lacked a bit of class and touch that I think photoblogs should have. Mainly I was looking for a previous/next thumbnail support when it displayed previous and next navigation links under the content. I thought that would be a perfect place to put these little gems.
By default, Autofocus theme puts the navigation to the previous and next posts underneath your content photo. Makes perfect sense, but I figured it’s a friggin photo blog, why not display the previous/next available photo too?
Modifications
So tonight, I played with the Autofocus code a bit and produced what I had wanted.
- Now when you go to an individual image page, you’ll see all the pertinent information about that photo, but underneath where the preview of the previous and next posts are, you’ll see those post’s thumbnail too.
- The image shown is the thumbnail size setting which is 150X150 of the photo.
- The previous post’s image auto floats left while the next post’s image floats to the right.
That’s about it, check it out on my photoblog and please give me some feedback or comment love. Might make that into a little plugin or something.
Screenshot
There, now doesn’t that look better?
Code Snippet
In the spirit of sharing, I’ll just go ahead and list the code snippet I used in the “single.php” in the Autofocus theme folder. Please note, this is just the navigation section below the current post.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | $previouspost = get_previous_post($in_same_cat, $excluded_categories); if ($previouspost != null) { echo '<div class="nav-previous">'; previous_post_link('%link « Previous'); echo '<div class="nav-excerpt"><p>'; /* Show previous Post's Thumbnail */ $tq_previouspost_img = get_post_meta($previouspost->ID, "image_url", $single = true); $tq_previouspost_title = get_post($previouspost->ID); $tq_previouspost_title = $tq_previouspost_title->post_title; echo '<img class="alignleft size-thumbnail" src="' . $tq_previouspost_img . '" alt="' . $tq_previouspost_title . '" width="150" height="150" />'; /* End previous thumbnail */ previous_post_excerpt(); echo '</p></div></div>'; } $nextpost = get_next_post($in_same_cat, $excluded_categories); if ($nextpost != null) { echo '<div class="nav-next">'; next_post_link('Next » %link'); echo '<div class="nav-excerpt"><p>'; /* Show Next Post's Thumbnail */ $tq_nextpost_img = get_post_meta($nextpost->ID, "image_url", $single = true); $tq_nextpost_title = get_post($nextpost->ID); $tq_nextpost_title = $tq_nextpost_title->post_title; echo '<img class="alignright size-thumbnail" src="' . $tq_nextpost_img . '" alt="' . $tq_nextpost_title . '" width="150" height="150" />'; /* End Next thumbnail */ next_post_excerpt(); echo '</p></div></div>'; } |
Nice mod! I made some changed to the theme, too. Maybe your are interested in code sharing?
Sure. Love to see the code behind the mods you have as well as showing mine.
I would love to see how you did that. I am very new to this whole thing but I think it adds a lot to the individual post pages.
Just updated the post with my code snippet to pull this off.
I just pasted this below the nav section, but now all of the coding language appears on the page.
OOPs …. just have to past more carefully. Got it now.
Glad you got it working Paul. Cheers.
Hi, I just used your code to enhance my site. Thanks. Do you have any idea on how to make the thumbnails resized to a fixed short edge only?
Also, how did you increase the numbers of pics on the frontpage?
/Søren
You can then edit the code and take out the height / width = 150 that I have in the img tag, but it wont validate as proper XHTML without those, but to answer your first specific question…yes it is possible.
Hopefully that fixes you up. Let me know if you have any other questions…
Hi, just used the code in my site.
However, I can’t seem to get the previous and next image URL in this function:
It return empty string.
Is there any addin I need to install?
Barry,
No addins or plugins necessary for this to work. The php function get_post_meta should work fine if indeed the previous/next post has a custom field in it called “image_url” which is what I’m querying for and what Autofocus adds and uses to show images on posts.
Thanks for the reply. I just check the postmeta database and most of my post has no custom field in it called “image_url”!
I had left a comment in Allan blog. However, if you know where goes wrong, appreciate your sharing :-)
Hey TQuizzle!
I found what I had missed! I have to include manually the post meta in the Edit Post page. Is this what you do? Or it is automatically shown?
Anyway, I managed to show the image. Thanks for the great code. It complete the Autofocus theme :-)
@ Barry:
The Autofocus theme creates them on “Publish”. So basically, you include the uploaded photo or the external photo into the post area then hit “Publish”. Autofocus takes the image url and creates a custom field entry with that img tag and img url.
My early version of Autofocus didn’t do this very well…but Allan released an updated version a while ago and that has fixed all the nuances that I encountered during the beginning of my photoblog’s days.
On my photoblog after publish, I then remove the img entry from the post content area so the only one that shows is the large one on top that Autofocus uses from the custom field entry…same goes for my little code. Glad you got it working now.
For somereason when I upload my photos from my iPhone using the WordPress app it does not show on the home page unless I go into each entry on the computer and re-publish the post. Any ideas how I can fix this??
I have the same issue. Must be something with WordPress’s iPhone app.
I’ve been emailing them to myself and publishing them once I reach a computer. :(
Wish they’d fix that little bug…
lame!!! I hope they fix it!!!
In my case, I don’t think Autofocus creates the image_url meta automatically when I hit publish. I had went through the postmeta database and no image_url key created for the past few posts after I started using Autofocus.
However, I solved this by adding the image_url meta manually in the edit post. I would appreciate if you know how to solve this :D
If you notice, the previous and next thumbnail image is shrink. I change the image url to capture the 150×150 image that wordpress created when you upload an image. Below is the code for previous post section I added before the img echo code:
It looks neat and nicer. :-)
@ Barry:
Autofocus should always produce the image_url and image_tag custom field meta. What I have to do is upload the image, insert it into the post, type my post and hit publish. Autofocus looks in the post area on “Publish” for that img tag, and when it finds it, it then creates those two custom fields.
RE: your code snippet – I really like the use of the php “substr” to pick that img url out and attach the WP 150X150 sized photo. Nice job, however if you post some images from Flickr and/or other sources (like I often do)…the code won’t work since the images don’t come from your site and haven’t been thumbnailed that way.
Anyhow, nice job on that! I’m sure others will really like that, and if you always self host your images, that’s really the better way to do it than my method.
Thanks for sharing Barry, I’ll update my post soon to include that little snippet of code and caveat that goes with using that code.
Quote:
- Hey TQuizzle!
I found what I had missed! I have to include manually the post meta in the Edit Post page. Is this what you do? Or it is automatically shown?
Anyway, I managed to show the image. Thanks for the great code. It complete the Autofocus theme :-) –
Thank you for this, great job! Can you help me? most of the thumbnails don’t work, how can I include manually the post meta in the Edit Post page?
One more thing – is there a simple way to post videos without any tricks like the one I did here? http://alexandrem.com/?p=37
I want to write some code like “If the category is Video, then don’t include post image”, or something like that. But I don’t know nothing about writing code… What I really really want is to post and play video in a image thumbnail in any page…
This info has been so helpful!! Thanks!
I was wondering how you got the last photo to appear. On my site it has an empty spot that links to Statcounter??
That’s weird, in my code I don’t have any “Statcounter” references. Something in your template maybe?
ah – I found it! I had a statcounter plug in. I deleted it and now it is gone. Thanks
Hi TQuizzle!
That’s a very nice post, with a very handy functionality. I have visited your photoblog, and I wondered how you modified the code to publish more than 10 posts in the home page… I have been trying to do that for a while, but I can’t find how to do this. Check out my website if you want to see the changes I made : collectif.netai.net . Thanks anyway!
hi, I think what you have done to the single post page is great, but unfortunately I am an idiot, and I am really unsure what line in the single.php file i should be adding this code to.
any help would be awesome!
@ baderTOO
Take a look at the first line of code in my example. It shows the query for Previous Posts:
You’ll find the same code in your Autofocus theme simple.php file. Just replace that chunk of code with mine. It should be the same with the exception of my image grabbing code which I have commented out with /* and */ in my example…lines 8 – 12 & 24 – 29.
thanks so much, that worked great! so simple :)
Thank you!!!
Have been looking for this for a while now. When I first visited this post you hadn’t attached the code snippet which made me a bit disappointed. But now you had and it made me so happy.
I set only the height of the thumbs so they wouldn’t be all compressed, it worked fine!
You wouldn’t have any idea on how to make a search box appear under the links in the header?
Thanks!
Glad to make you happy David. :)
As far as the search box is concerned, you can do a few things to pull that off.
Hey TQuizzle!
Awesome code snippet there, just added it to my (up and coming) blog and it seems to work fine!
However, I have a different issue here…how do you make your images ONLY appear as the main image, and not also in the post itself? If you check a single post in my blog you’ll see there are two images. How do you go around that?
Would be very much appreciated if you could help!
Wow, seriously…I have useless timing today.
JUST fixed it…turns out the whole “Autofocus cuts the top image”-thing only works if the image does not have a caption!
So thanks for the code snippet, don’t bother with my previous post ;)
// ottzen
I was wondering 2 things your code mod is great!
1. what about gallery’s it doesn’t pull the first image from them?
2. What about weird sized images them look very distorted is there a way to make them small but proportional?
Thanks!
Hey thanks for that but I’m still having trouble:
I would love if everything could link to the post not just the title but the pic, excerpt, and the words “Previous” and “Next”?
Then I don’t how he did it but this blogger took your code and put it in the side of every post check it out would you know how he did this? http://bunka-design.com/interiors/2009/12/the-nature/#
I still Can’t seem to make the images fit right. I wish they could be aligned to the inside of the excerpt instead of the outside?
I looked at Barry’s code which looks like it would work but I’m not sure where to put it. In your code you have this line 3:if ($previouspost != null) {
then this line 9:$tq_previouspost_img = get_post_meta($previouspost->ID, “image_url”, $single = true);
He has this:
if ($tq_previouspost_img != null) {
$tq_previouspost_img = substr($tq_previouspost_img, 0, -4).”-150×150.jpg”;
}
I think the problem for me is that his first part i think goes to you line 3 but his second part fits in with you line 9 but I’m can’t figure how to merge his previouspost_img = with yours.
I hope you can understand this all :)
On a side note I can’t find where the hell in the autofocus ccs or php files where I can edit and format the side stuff you your example blog you have it perfect:
This entry was posted on December 11, 2009 at 11:51 pm.
Filed under General Photos and tagged Jack Nicholson
Post a comment!
Trackback URL
What part did you have to edit to change all of this?
great functionality! can this code be altered to work with the post thumbnail feature in wp2.9?
I’m sure it could. I havent delved into post thumbnail features in wp2.9. Anything’s possible though!
There have been a few comments posted to this entry and for some reason they’ve gotten stuck in the middle of the comment stream. They dont look like replies, but for some reason this post decided to puke on the comments style. That said, I tried to reply to individual comments for everyone who submitted one recently.
Ohhh, thanks so much for this. Its EXACTLY what Ive been looking for. Genius.
One question…
does this only work at the bottom of the page? I had moved my next and previous info up and to the left where the meta data used to be and now I cant figure out how to get the thumnails there too.
you can see the prob here
http://bunka-design.com/interiors/2009/12/getting-tired/
Thanks a million for any help!
ok, figured it out…if anyoone is interested its quite simple. just move the following code in single.php to directly after the thumbnail code:
then you will have the thumbnails listed next to the blog, if you so desire.
Once again, thanks a million for the great tweek!!!!
Still loving this…
Is there anyway to make the actual thumbnail linkable to the next/previous post?
Hey bunka-design I was wondering if I could get a little bit of assistance with the theme? I love the way you have the next post images in the side. I also love how you edited the side of post to add archives and a search bar those two things I want so bad is there any forum posting that you know that could help me?
This is a great post , thanks for the leg up. I was looking for a plugin that could do this, previous / next post thumbnails nav. I found this post instead. Since I can’t find a plugin that does this, I’ve used your code to start a plugin, watch for it at wp-superslider.com … coming soon.
Great Mod, much needed one too.
Also thanks to Barry for the code to get the thumbnail ratio correct.
Future request :
It would be great if everything for the previous / next post link ,
(title, pic, excerpt, the words “Previous / Next” ) would link to the post.
with a slight change of color on mouse over just like the arrow icon for next/prev Post.
Any suggestions on how to do it ?
forgot to add,
The entire area containing (title, pic, excerpt, the words “Previous / Next” ) Could act as a single large button.