Tip: Making index page images link to the post page

This tip mainly applies to blogs that take advantage of jump breaks in their posts as a way to shorten posts on the front page(s) with links to the full post.

In cases where you use jump breaks to limit your post size on your index pages you're left with a challenge: you want to use images in each post above the jump break, but clicking on the image doesn't take the user to the blog post. Instead, clicking on the image either opens up the Lightbox effect or takes you to a full page of just that image. Neither is the desired user behavior, especially if your only content before the jump break is the image.

This code provides a solution.

What we're doing in this code

We're doing 5 things here:
  1. Setting this script to only run on the "index" type pages of your site
  2. Stopping Lightbox from executing
  3. Finding each "post-body"-classed div container (typically where post contents are located
  4. Capturing each post's post URL
  5. Replacing the wrapping link of each image with it's parent's post URL


<b:if cond='data:blog.pageType == &quot;index&quot;'>
<script language='javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>//<![CDATA[
/**
this script was written by Confluent Forms LLC http://www.confluentforms.com
for the BlogXpertise website http://www.blogxpertise.com
any updates to this script will be posted to BlogXpertise
please leave this message and give credit where credit is due!
**/
$(document).ready(function() {
$('.post-body').each(function(n, wrapper){
var wrapper = $(wrapper);
var newLink = wrapper.parent().find('h3 a').attr('href');
wrapper.find('img').each(function(n, image){
var image = $(image);
image.parent().attr('href',newLink);
});
});
});

function killLightbox() {
var images = document.getElementsByTagName('img');
for (var i = 0 ; i < images.length ; ++i) {
 images[i].onmouseover=function() {
  var html = this.parentNode.innerHTML;
  this.parentNode.innerHTML = html;
  this.onmouseover = null;
 };
}
}

if (window.addEventListener) {
window.addEventListener('load',killLightbox,undefined);
} else {
window.attachEvent('onload',killLightbox);
}
//]]></script>
</b:if>


Enjoy!

Questions or comments, please feel free to leave them in the comments below. If we make updates to the script we will post them here.

P.S.

If you've found this script, you'd probably also be interested in our "thumbnail and summary scripts", of which we've developed quite a few different variations that might interest you.

Comments

  1. Very cool. I am now using this. Have you gotten Twitter cards set up yet? I thought I had them set up, but I didn't get them correctly configured for my main page. When I use the preview tool on a post, it works great, but on a main page, nope.

    ReplyDelete
    Replies
    1. Hi Raymond, sorry, haven't even looked at Twitter cards, mainly because I don't see a need for them! If anything Twitter should be using established methods of publishing the same information; adding specific twitter meta information such as they're suggesting contributes to bloat.

      Delete
  2. Hi David,
    Thanks for the code. But where do you paste it in the template?

    ReplyDelete
  3. Hello David.
    I put the script before the closing < /head> in BoyBurnsBlog template, also disable the lightbox in blogger settings.
    The script do the job, but also divide the 2 columns in one column, see screenshot: http://postimage.org/image/dr30h0oqb/
    This script is useful for me, bacause Google find ╬╣mages from index page (in Google image search), that moved to older posts, so the reader clik on image that not exist anymore in index page.
    Is there a way to fix the problem?
    Thank you
    My English is not so good, sorry for that.

    ReplyDelete
  4. Absolute genius, thanks. The default behaviour is just stupid.

    ReplyDelete
  5. I am trying to use this script as part of the BoyBurnsBlog template and it's not working for me... It stops Lightbox from executing, but it doesn't capture the post URL. It also messes with the Masonry layout, forcing it to one column instead of the three that I've changed it to. Any ideas how I can make this work for me? The template and the script are both wonderful, if I could only get them to get along! The blog in question is dustynance.blogspot.com. Thanks for your awesome resources!

    ReplyDelete
  6. In order for the script to get the HREF of the post it's looking for the linked post title element that is standard. Unfortunately you're putting in posts that don't have post titles, so the script has nowhere to look for that href.

    I'd suggest giving each post a post title, but then using CSS to hide that post title if you don't want to see it...

    .post-title {
    display: none;
    }

    You're probably going to only want this behavior to occur in specific page types so please give this post a read: http://www.blogxpertise.com/2012/11/blogger-blogspot-page-types.html

    ReplyDelete
  7. Oh my goodness, that makes so much sense! I initially didn't put in post titles because I didn't want them to show, but I've already added the CSS to hide the post titles (thanks to the post you referenced, which I have bookmarked!)and it didn't even occur to me that that would be part of the issue. Thank you so much for your help, David!

    ReplyDelete
  8. Okay, the script is working to redirect the index page images, but it's not maintaining the 3 columns, and instead is putting all of the content in the 1st column and leaving the other 2 columns empty. I'm guessing that the two scripts aren't playing nicely... any suggestions to help them get along? Thanks again for your help and wonderful resources!

    ReplyDelete
  9. I absolutely find this a useful script. But the problem I have with this is that it destroys the layout of my top featured slider called "Carousel Fred by Fred Heusschen". Any fix for this?

    ReplyDelete
  10. Sorry, no fix, as this itself is a fix. It would seem that your carousel might be needing something that we're cancelling here.

    ReplyDelete
  11. Turns out, your script adds jquery again. Just had to remove the jquery part and everything works perfectly.

    ReplyDelete
  12. spectacular! I have to include that as most people don't have JQuery referenced by default.

    ReplyDelete

Post a Comment