How To Create A WordPress Post-List Wonderwall – The Card Flipper

You use featured images on all your posts – in fact you spend a good deal of time selecting and optimising them – so why not use them to give your homepage, your category listings and archives some visual punch?

In this mini-series, we’ll take a look at three approaches for creating your post listing wonderwall: the Card Flipper, the Coloriser and the Bounce Pop. Each is simple to integrate into your site and will provide plenty of visual bang for your effort buck.

So let’s get started with the Card Flipper, the post-listing-card-flipping wonderwall.

Card-flipping uses the CSS3 transform property, which is supported by Internet Explorer 10, Firefox and Opera (2D only). Safari and Chrome use the alternative -webkit-transform property whilst Internet Explorer 9 has its own alternative -ms-transform which is 2D only.

This solution is going to be based on the techniques described in this CSS3 3D Transform Card Flip Gallery tutorial by Kevin Liew.

Have a look at the demo to get a better idea of what we are going to be producing.

I’m not going to go into how it works as Kevin’s already done that; I’m just going to focus on how to integrate the approach into your WordPress site in four steps.

There’s a download at the bottom of the article which contains a child theme based on the TwentyTwelve theme.

Step 1 – Create a Child Theme

As always, the customisations are going to be added to a child theme. If you don’t know how to set up a child theme then read this article in the WordPress Codex.

Step 2 – Add the Custom Styling to Style.css

When you created your child theme you would have created a style.css file. Open it up and copy and paste in the following CSS

.thumb {
display:block;
width:300px;
height:140px;
position:relative;
margin-bottom:5px;
margin-right:5px;
float:left;
}

.thumb-wrapper {
display:block;
width:100%;
height:100%;
}

.thumb img {
width:100%;
height:100%;
position:absolute;
display:block;

}

.thumb .thumb-detail {
display:block;
width:100%;
height:100%;
position:absolute;
background:#fff;
font-family:arial;
font-weight:bold;
font-size:16px;
}

.thumb .thumb-detail a {
display:block;
width:95%;
height:100%;
text-transform:uppercase;
font-weight:bold;
color:#333;
text-decoration:none;
font-family: 'Open Sans', sans-serif;
letter-spacing:-1px;
padding:10px;
font-size:18px;
}

/*
* Without CSS3
*/
.thumb.scroll {
overflow: hidden;
}

.thumb.scroll .thumb-detail {
bottom:-280px;
}

/*
* CSS3 Flip
*/
.thumb.flip {
-webkit-perspective:800px;
-moz-perspective:800px;
-ms-perspective:800px;
-o-perspective:800px;
perspective:800px;
}

.thumb.flip .thumb-wrapper {
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
-ms-transition: -moz-transform 1s;
-o-transition: -moz-transform 1s;
transition: -moz-transform 1s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}

.thumb.flip .thumb-detail {
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}

.thumb.flip img,
.thumb.flip .thumb-detail {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}

.thumb.flip .flipIt {
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}

The only consideration here is in the very first declaration, .thumb, where the width and height of the image is set – you’ll want to set these to whatever is appropriate for your site.

Also, the margins (right and bottom) are set to 5px, providing a fairly narrow gap between the images. You might want to enlarge this or remove it completely if you want the images to sit right up against each other.

Step 3 – Include the Javascript

This solution requires jQuery to handle the toggling of the classes and Modernizr  to check the capabilities of the browser and whether to card-flip or scroll. Check to see if your theme uses either of these libraries already.

To add these libraries to your pages, open or create a functions.php file in your child theme and add the following code:

function cf_load_javascript() {

wp_enqueue_script( 'jQuery', 'http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js', false, false, false);
wp_enqueue_script( 'modernizr', 'http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js', false, false, false );
}

add_action( 'wp_enqueue_scripts' , 'cf_load_javascript' );

We are pulling the libraries from CDNJS just to make it easier.

Now we need to insert the custom Javscript into the page:

function add_cardflip_js() {

if ( is_category() || is_home() || is_archive() ) {

echo "
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0A%0A(function(%24)%20%7B%0A%0A%2F%2F%20Utilize%20the%20modernzr%20feature%20support%20class%20to%20detect%20CSS%203D%20transform%20support%0Aif%20(%24('html').hasClass('csstransforms3d'))%20%7B%0A%0A%2F%2F%20if%20it's%20supported%2C%20remove%20the%20scroll%20effect%20add%20the%20cool%20card%20flipping%20instead%0A%24('.thumb').removeClass('scroll').addClass('flip')%3B%0A%0A%2F%2F%20add%2Fremove%20flip%20class%20that%20make%20the%20transition%20effect%0A%24('.thumb.flip').hover(%0Afunction%20()%20%7B%0A%24(this).find('.thumb-wrapper').addClass('flipIt')%3B%0A%7D%2C%0Afunction%20()%20%7B%0A%24(this).find('.thumb-wrapper').removeClass('flipIt')%3B%0A%7D%0A)%3B%0A%0A%7D%20else%20%7B%0A%0A%2F%2F%20CSS%203D%20is%20not%20supported%2C%20use%20the%20scroll%20up%20effect%20instead%0A%24('.thumb').hover(%0Afunction%20()%20%7B%0A%24(this).find('.thumb-detail').stop().animate(%7Bbottom%3A0%7D%2C%20500%2C%20'easeOutCubic')%3B%0A%7D%2C%0Afunction%20()%20%7B%0A%24(this).find('.thumb-detail').stop().animate(%7Bbottom%3A%20(%24(this).height()%20*%20-1)%20%7D%2C%20500%2C%20'easeOutCubic')%3B%0A%7D%0A)%3B%0A%0A%7D%0A%0A%7D)(jQuery)%3B%0A%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />";

} /* if */

}

add_action ( 'wp_footer' , 'add_cardflip_js' );

The add_cardflip_js function will only add this Javascript if the current URL is for the homepage, a category listing or an archive listing. You can remove the if statement and if you prefer the Javascript to appear in all front-end pages.

As you can see, there is a check for CSS3 transform capabability and if not supported then the script will implement a scroll-up effect.

Step 4 – Change the Content.php Template to Generate the HTML

The last step is to ensure that the required HTML is output for the listing pages. To do this we only need to alter one template, content.php, to output the card-flip HTML if the home page, a category listing or an archive page is being generated.

Copy content.php from the parent theme to the child theme. Open it and add this code immediately before the “<article>” tag:

<?php // only output card-flipping HTML when on a listings page if ( is_category() || is_home() || is_archive() ) { ?>


<div class="thumb scroll">


<div class="thumb-wrapper">

&lt;?php echo get_the_post_thumbnail( $post->ID ) ?&gt;


<div class="thumb-detail">



&lt;?php the_category(':'); ?&gt;

<a href="&lt;?php the_permalink(); ?&gt;">&lt;?php the_title() ?&gt;</a>

</div>


</div>


</div>


&lt;?php } else { ?&gt;

Close the if statement by adding the following to the bottom of the template:

<?php } ?>

Activate and Test

Your child theme should now consist of three files: content.php, functions.php and style.css. Activate this child theme and jump to the site and you’ll find that your homepage, category and archives listings are now post-listing-card-flipping wonderwalls.

Next time we’ll look at the Colorizer, a more subtle technique for presenting all featured images in monochrome and then turning them to color on mouseover.

Do you have a favourite site that uses a post-listing wonderwall? If so, let everyone know by posting a link in the comments below.

Download: Card Flipper Demo Theme (zipped, requires TwentyTwelve)

Code Credits: Kevin Liew

Tags:

• CSS
• thumbnails