How to create an archives page in a grid w/ thumbnails)

  • Hi everyone…!

    I’d like to know if someone has any idea of how it’s possible to do an archives page like this one.

    The posts are listed by month/year, and there are thumbnails for each post.

    There is even a way to filter the archives by category, which is also pretty cool.

    This way of displaying the archives is very interesting to my blog because it is a very “image based”, rather than on text.

    Does anyone have an idea?

    Thank you guys!

Viewing 2 replies - 1 through 2 (of 2 total)
  • Moderator bcworkz

    (@bcworkz)

    You’d probably want each image for the post to be a featured image. Manipulating featured images is easier than generic embedded images. Posts are ordered by date by default anyway, you just need something in the loop to detect when the month changes from the last post’s so a month and year header can be output.

    A grid format is best accomplished with responsive CSS. The browser will reflow the number of columns based on available width. Position relative and float left or right will accomplish most of it. It’s essential that each featured image be the exact same size. As output if not as uploaded.

    The enlarged image view would be accomplished with jQuery and AJAX. You could try looking at gallery plugins, either WP or jQuery. In particular ones that work with arbitrary HTML instead of just images so you can utilize output for posts.

    Thread Starter abreusky

    (@abreusky)

    Hey @bcworkz ! I think I didn’t tick the follow up comments by email! :O

    Today I was still trying to solve this and I found this own post of mine :-/

    So, i think i understand it, but… it is also necessary to link each new post to the archives grid, right?

    How is this done?

    And about the plugins, any WP or jQuery plugins would do it?

    Thank you for your reply!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How to create an archives page in a grid w/ thumbnails)’ is closed to new replies.