It seems as though we're getting
a bit carried away with our
thumbnail and summary script... we've created another one for you! This one is also by request; the desire to have the first post on an index page behave differently that the other posts on the page which are in the standard thumbnail and summary (with the small thumbnail).
What we've done in this version of the script is add two variables: firstBig and newspaper. firstBig is either a true or false value, and if set, will make the first post's image full column width instead of a small thumbnail. newspaper is an additional setting telling the script to place the post's title/link after the image instead of the default behavior of before the thumbnail and summary.
Warning! Obviously this script really needs an image in order to look good and/or work. If you don't plan on having a photo in every post, this probably is not the script for you! It also requires that the first image in your post be hosted in Picasa, Blogger's default image hosting solution.
Clean version is available
here.
A sampling:
You can view this code in action
here.
What a fabulous code snippet! It's wonderful that you're sharing these wonderful blogger coding tips with us. I *must* check out the Blogger Xpertise Google Hangout if you're having one tonight - it's Friday!
ReplyDeleteHi David,
ReplyDeleteThanks for this code. I have a question. Is it possible to apply the Thumbnail/Summary script only to subsequent posts and leave the first post "as is" (the default Blogger view which shows the image at the size I choose with all of the text)?
Thanks!
Of course!
DeleteLook at lines 39 and 49:
$('.post-body').each(function(n, wrapper){
if ((n == "0") && firstBig){
We can look for the value of "n" which is getting +1'd each time the script proceeds through the DOM. So in this case we're acting on n==0 (the first .post-body instance), but we could just as easily do n != 0 at which point it would act on all .post-body instances EXCEPT for the first instance.
OK, I did this:
Deleteif ((n != "0") && firstBig){
but the subsequent posts don't have the thumbnail picture anymore. They do have a truncated post (first few lines and "read more" (see www.sylvialiuland.com)
Any thoughts?
I've copied & pasted the code exactly & still, when I hit "preview" in the template editor, I see no images at all :( Any idea about what I could be doing wrong? I tried the original coding you had as well, and still no images.
ReplyDeleteHello, can you link me to the site?
DeleteGreat tool David! I appreciate your help, keep up the good work.
ReplyDeleteThanks,
John
Hi!
ReplyDeleteThis code is great! Thanks so much!!
I just have a couple questions though and am wondering if you can help me modify the code just a bit more. :)
I often use portrait images as my first image in my blog post, with this code it makes the image ENORMOUS! Is there anyway to set a height restriction on how these photos show up? Even when the photo is landscape, I'd like it all to be a little smaller then the
Also, I am wondering if it is possible to make the "read more" link a different color and/or bold.
In addition, is it possible to change the code so that by clicking on the thumbnail image, it will also take you to the full blog post on all photos (thumbnails and on the first special large image)?
The first blog post title, if the newspaper title is set to false, doesn't seem to link to the blog post, it is possible to make that happen?
One more thing, it is possible to create a simple frame around each of the blog post areas? In other words, the first blog post would be enclosed in a 1px blog frame, the second would be in a different box etc.
Thanks SOOO much!
Ashley
www.simplydesigning.net
simplydesigning (at) gmail (dot) com
Hi!
ReplyDeleteSorry. One more thing (well two really). In my previous comment I said that the title link above the first special post wasn't linking, but it is :) Wahoo!
But, when I open my blog, it first shows as previous (where each blog post is in full) and then it updates to the new layout. Ack. I've cleared my cache so I don't think it is just my computer...is there a way to fix this because it also slows down my load time...I was hoping it would speed it up if anything. Thanks!
Ashley
www.simplydesigning.net
Is it possible to enable this so that when I hit the "older posts" button from my main blog page, you would continue to see the thumbnail and snippets with "read more"? It kind of stinks going back to every post in its entirety when you hit the "older post" button.
ReplyDeleteAlso, I would love to be able to do this so that if I were to hit my tag button for "valentines day" for example, instead of seeing all the blog posts in their entirety, they could be snippets and thumbnails as well.
Maybe this is asking too much :) Let me know if it is possible!
Thanks!
Ashley
www.simplydesigning.net
First of all, great tool!!
ReplyDeleteI have two issue's.
1. Is it possible that the thumbnail from post are linked to the post itself?
2. With the 'read more' is default linked to http://www.dennisbuijs.com/undefined, how can i get this to the post itself?
Gr,
Dennis
Hi Dennis,
DeleteThe problem that you're having is because you changed the default template behavior; in all standard templates the post title is a h3 element with the class of 'post-title' and you've changed it to a h2 element with a class of 'art-postheader'.
You're going to need to change line 42 to be:
var title = wrapper.parent().find('h2');
Line 68 to be:
var link = wrapper.parent().find('h2 a').attr('href');
And line 104 to be:
var link = wrapper.parent().find('h2 a').attr('href');
Hi,
ReplyDeleteThnx for the reply!
I only edited line 68 and 104 and that worked out just perfectly (see at www.dennisbuijs.com).
The only thing left is for the thumbnail to be linked to the post it self. How can i make that happen?
Gr,
Dennis
What i have done now is use the script on the homepage as it is now and use the script for the labelpage without the first post being big.
DeleteIs there a way for the next and prev page (on the homepage) to be view like the labelpage?
Strange... I seem to have forgotten to put that code in there for linking the images! I'll add that functionality and post an update this weekend!
ReplyDeleteHi Dennis, I've fixed the script, and have updated the post with a link to the new version. -David
ReplyDeleteHi,
ReplyDeleteFirst off, thanks for the code. it is really helpful.:)
I use this on my blog and I'm seeing some issues. The additional info on the page is not showing, like Posted date, comments count, recommend on and posted by. I tried the original code (not newspaper) and its working fine.
Also, the page is only showing four topics at a time. Is there a way to control this?
My blog is bachwitz.blogspot.com
cheers,
Naldy
Hi Naldy, do you see the style information that I have at the bottom of the script? That style information is hiding the date header and other information that you like. Just remove it and all that stuff will come back.
ReplyDeleteThe # of posts being shown is controlled by your Blogger settings... not by the script.
Thanks much for your reply.
ReplyDeleteI change it to 'display=none' to 'display=all' and its working perfectly! Yey!
Actually, forget to tell you yesterday that it the number of max posts in the blog setting is ten, not sure why its showing only four... sometimes only three. If you would click on older posts notice that it will show "max-results=10".
Cheers
Naldy
Just to add, is the thumbnails supposed to work as a link to the post? Mine is not working that way. Thanks
ReplyDeleteHello- I love this option, but, my first post is not showing any picture at all :( Just the title and snippet of post. The following posts on the page show the thumbnail pic and summary. Plse help! Thank you!!
ReplyDeleteHi Erin, what's the URL of your blog?
ReplyDeleteI don't see this code running in your site...
ReplyDeleteIt showed up on the preview that way..I was afraid to save it with fear of not being able to change back :)
ReplyDeleteWould a screenshot of my preview be helpful?
ReplyDeleteplease email me directly at david@confluentforms.com
ReplyDeleteI have been fine tuning my blogger theme and usage for a wile now and this is the result: www.dennisbuijs.com.
ReplyDeleteBut i have two questions left:
- Is there a way to make the pic for the first post a little smaller?
- I am using 'jump break' in my posts now, but as a result i get a extra "read more" icon, is there a way to remove this on the pages i use you're script?
Greetings,
Dennis
Is it possible to set a maximum Width for the image of the first post?
ReplyDeleteJust what I was looking for, thank you!
ReplyDeleteHi David - I love the code, its saving me a LOT of time in upgrading my blog (www.enduringepilepsy.com) But I'm having the Newspaper image appear on every page as I scroll through older posts. Is there a way to make it that the Newspaper image is ONLY on the Home page? Thanks :-)
ReplyDeleteHi again David,
ReplyDeleteI had been tinkering with my blog for quite a while and I really can't make it show more than 3 post on the main page. Can you please help? I have making the # of post higher but no luck.
https://lh4.googleusercontent.com/-cL2RzfyeK7M/UgWd6pnAKkI/AAAAAAAAB74/S0Vr6Txq-gw/w527-h595-no/blogger.jpg
Cheers,
Naldy
This is a great work, But I have one issue. The loading time is doubled and i see that the summary and thumbnail loads after the classic template loaded. How to fix this problem? Is there any shortcut so that the computer just have to load only the final look?
ReplyDelete