featured image

Animated WordPress Featured Images with jQuery

Now, I’m willing to bet there’s more than a few plug-ins available out there that’ll allow you to accomplish this (feeling pretty lazy these days, so haven’t actually checked). However, if your WordPress site is getting all slow and clunky from using far too many bloated and inefficient plug-ins & add-ons, you may want to purge a few of ’em and just install the XYZ PHP plugin in their place.

Basically, if you’re at all familiar with PHP, javaScript and/or jQuery, anything a plugin can do for you can fairly easily be replicated using XYZ — with a heck of a lot more control and efficiency to boot (and no, I’m not on their payroll, I’m just a really big fan of this plug-in).

In any event, the other day while looking over a few of the WordPress sites that I work on, it occurred to me that all those static featured images seemed kind of… Well, boring and monotonous — got to thinking about how they might be spiced up a little… Maybe an animated background or something like that?

STEP 1: for the above example, we started off by creating six image files (.png format):

default image

default image

text overlay w/ transparent BG

text overlay w/ transparent BG

BG image 1

BG image 1

BG image 2

BG image 2

BG image 3

BG image 3

placeholder image

placeholder image (transparent .png)

Important to make sure that these images are of the same dimensions as the original featured image (in our case, 960 x 370). After the images have been created, manually upload them to your server (in cases such as this, I’ll usually create an ‘images’ folder inside wp-content/uploads/ — just makes life easier in terms of typing/remembering the path to the files etc.).

STEP 2: check your page in Chrome DevTools to find the <div> tag that contains your featured image and make a note of it’s .class or #id name — this will vary depending on the theme you have installed (in our case, the featured images are wrapped in <figure class="post-thumbnail"> tags — on our other WP sites, they’re nested in <div class="featured-image"> tags) Anyways, devTools will allow you to find & inspect the tags your featured images are nested in.

STEP 3: Open the XYZ PHP Code dashboard, click the ‘Add New PHP Snippet’ button, then copy and paste the following code into the Add New Snippet form (remembering, of course, to make the appropriate changes to your file names & paths etc.):

<?php 

// Create some PHP variables

// the tag that holds your page's featured image
$target="figure"; 

// placeholder image
$placeHolder = '<img src="https://mywebsite.com/wp-content/uploads/images/placeHolder.png" style="width: 100%; z-index: 0;">';

// default image
$defaultImg = '<div id="defaultImg"  style="position: absolute; top: 0px left: 0px; z-index: 5;"><img src="https://mywebsite.com/wp-content/uploads/images/jqFeatDefault.png" class="img-featured img-responsive wp-post-image img-zoom-out" alt="default" style="width: 100%"></div>';

// text overlay (transparent .png)
$txtImg = '<div id="txtImg"  style="position: absolute; top: 0px left: 0px; z-index: 4;"><img src="http://localhost/newwp/wp-content/uploads/images/jqFeatTXT.png" class="img-featured img-responsive wp-post-image img-zoom-out" alt="default" style="width: 100%"></div>';

// background image A
$picA = '<div id="picA"  style="position: absolute; top: 0px left: 0px; z-index: 3;"><img src="https://mywebsite.com/wp-content/uploads/images/jqFeatA.png" class="img-featured img-responsive wp-post-image img-zoom-out" alt="WEB ANIMATION VIDEO CAPTURE WITH OBS STUDIO" style="width: 100%"></div>';

// background image B
$picB = '<div id="picB"  style="position: absolute; top: 0px left: 0px; z-index: 2"><img src="https://mywebsite.com/wp-content/uploads/images/jqFeatB.png" class="img-featured img-responsive wp-post-image img-zoom-out" alt=""  style="width: 100%"></div>';

// background image C
$picC = '<div id="picC"  style="position: absolute; top: 0px left: 0px; z-index: 1"><img src="https://mywebsite.com/newwp/wp-content/uploads/images/jqFeatC.png" class="img-featured img-responsive wp-post-image img-zoom-out" alt=""  style="width: 100%"></div>';

?>

<script>

// jQuery functions that control the background animation
// uses the PHP variables created above

(function($) {

// set the parent div's 'position' css to 'relative'
$("<?php echo $target; ?>").css({position: "relative"});

// insert the required images in the parent div
$("<?php echo $target; ?>").html('<?php echo $defaultImg ; ?><?php echo $txtImg ; ?><?php echo $picA; ?><?php echo $picB; ?><?php echo $picC; ?><?php echo $placeHolder; ?>');

// animated dissolve sets the default image's opacity to '0'
function hideDefault() {
    $("#defaultImg").delay(200).animate({opacity: "0"},900, function(){
    fadeA();
});
};

// animated dissolve sets the first background's opacity to '0'
function fadeA() {
    $("#picA").delay(1000).animate({opacity: "0"},900, function(){
    fadeB();
});
};

// animated dissolve sets the second background's opacity to '0'
function fadeB() {
    $("#picB").delay(1000).animate({opacity: "0"},900, function(){
    fadeC();
});
};

// animated dissolve sets the first background's opacity to '1'
function fadeC() {
    $("#picA").delay(1000).animate({opacity: "1"},900, function(){
    reset();
});
};

// re-set opacity of the second and third backgrounds to their original values
// then loop back to the fadeA() function
function reset() {
    $("#picB").css({opacity: "1"});
    $("#picC").css({opacity: "1"});
    fadeA();

};

// initiate the first function
hideDefault();

})( jQuery );

</script>

STEP 4: Finally, save your PHP snippet and then copy & paste the snippet short code into your post’s edit window. If all’s well, the next time you re-load the page the featured image will be replaced by a groovy dissolving background animation.

Of course, you’re by no means limited to the basic background dissolve thing we’ve used here (for clarity’s sake, we tried to keep it simple) — you can use any of the other jQuery animation functions/motion effects or whatever to spice up your static featured images.

So that’s it for now — hope you found this useful!

Leave a Reply

Your email address will not be published. Required fields are marked *