Sridhar Katakam

Genesis and WordPress Tutorials

Thumbnail Grid with Expanding Preview in Genesis

by 29 Comments

Tympanus has a great tutorial on how to create a thumbnail grid with an expanding image preview similar to the effect seen on Google Images. In this article I show how the same can be implemented in Genesis to display featured images of posts on Posts page in a grid. Clicking on an image will reveal a bigger version of the image, post title, excerpt and a link to read the full post.

Live Demo

Screenshots:

genesis-thumbnail-grid

When clicked:

genesis-thumbnail-grid-clicked

Screencast:

Step 1

a) Upload modernizr.custom.js to child theme's js directory.

b) Create a file named grid.js in the same location having the following code:

To view the full content, please sign up for the membership.

Already a member? Log in below or here.

  • This is really cool Sridhar! I am working on a project right now getting ready to use the Genesis Portfolio Pro plugin. Could something like that be done to the output to keep the thumbnails from opening into new pages?

    Reply

    • Untested, but should work:

      In Step 3 the name of the file is home.php. You can name it as single-portfolio.php instead so it works for portfolio CPT.

      In the CSS you’d need to replace .home with .post-type-archive-portfolio

      Reply

  • Awesome!!! This is something i’d like to be able to add in a home page instead of posts page. Will it be possible?
    Thank you so much so much!♥

    Reply

  • Hi,

    Is it possible to use this across several pages? I have a site I’m working on which has different products on each page, but would like to retain the grid/drop-down information functionality.

    Would I need to put into a named template and assign to the pages that have those particular products?

    Many thanks in advance

    Reply

  • Hi,

    Sorry , just to follow up, I have six pages that each have different products on them – is it possible that this functionality could be assigned to different pages than just the ‘blog’ page and be able to control which products appear on each?

    Reply

      • Hi Sridhar,

        No Woocommerce – just hoping to add them as either portfolio items (using the portfolio category type plugin) or simply add in manually to the page with HTML – there are only up to six products on each page at present, so just need a simple solution really, but utilising the functionality of the text/content reveal – any advice you can give would be greatly appreciated 🙂

        Reply

  • Hi Sridhar – sorry to bother you – I’m wondering whether this could be used with the ‘portfolio types’ plugin? So that I could have this powering a set of portfolio items and then still have the blog displaying as it would normally?

    many thanks in advance, Nick

    Reply

  • Hi Sridhar,

    Love the result, thank you.

    Would you be ably to assist and explain how would I change the code to only display posts of a particular category.

    Thanks in advance
    Colinz

    Reply

  • Hi Sridhar,

    do you know if the expanding grid works with WPML? I need it on a multi-language site.

    Thanks

    Monika

    Reply

  • Srid,
    I have tried to implement in a CPT using Genesis Sample on a Localhost install just to test. The Archive page displays as expected, but when i click the featured image, it never displays below the grid, it just works like normal and advances to a single post page. It doesn’t seem to “call” or “execute” the JS scripts which are located in the themes JS folder. Any ideas would be appreciated.

    I could move to a public site if it would be helpful.

    Reply
    • >