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
text overlay w/ transparent BG
BG image 1
BG image 2
BG image 3
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
$target="figure";
$placeHolder = '<img src="https://mywebsite.com/wp-content/uploads/images/placeHolder.png" style="width: 100%; z-index: 0;">';
$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>';
$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>';
$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>';
$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>';
$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>
(function($) {
$("<?php echo $target; ?>").css({position: "relative"});
$("<?php echo $target; ?>").html('<?php echo $defaultImg ; ?><?php echo $txtImg ; ?><?php echo $picA; ?><?php echo $picB; ?><?php echo $picC; ?><?php echo $placeHolder; ?>');
function hideDefault() {
$("#defaultImg").delay(200).animate({opacity: "0"},900, function(){
fadeA();
});
};
function fadeA() {
$("#picA").delay(1000).animate({opacity: "0"},900, function(){
fadeB();
});
};
function fadeB() {
$("#picB").delay(1000).animate({opacity: "0"},900, function(){
fadeC();
});
};
function fadeC() {
$("#picA").delay(1000).animate({opacity: "1"},900, function(){
reset();
});
};
function reset() {
$("#picB").css({opacity: "1"});
$("#picC").css({opacity: "1"});
fadeA();
};
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!
