I want to use blur.js (blurjs.com) to blur the post thumbnail. But it seems that the .js can't grab the image out of the_post_thumbnail(). If I follow the instructions from the website and build my own two testing-divs with a background - it's working! So the problem has to be how to get the image from "the_post_thumbnail()" read out by the custom-blur.js. Seems like blur.js needs a background-image to work.

This is my php-file:

    <?php if ( has_post_thumbnail() ) :?>
    <?php // USE LIGHT BOX OR POST URL in Image
    $useLightBox  =  $shortcodeData['wmlo_use_lightbox'];
    $imageLink    =  get_permalink();        
    if ($useLightBox == 'yes'):
        $largeImageSrc  = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'large', false, '');
        $imageLink      = $largeImageSrc[0]; //Send image path
    // SET $imageLink for feature image a tag

    <div class="wpme_image">
    <div class="testtext">asdafsd afsdfdsad sasdaf dsf</div>

    <a href="<?php echo $imageLink; ?>"><div class="testbg"><?php the_post_thumbnail(); ?></div></a>

<?php endif; ?><!-- EOF featured image -->

This an extra custom-blur.js:

// Blur.js part of image
// ----------------------------------------------------
        source: '.teeestbg',
        radius: 10,
        overlay: 'rgba(255,255,255,0.4)'
    }); // EOF blurjs
  • I don't see the wmle_inside_image class that you're applying it to anywhere.
    – Milo
    Dec 6, 2015 at 16:36
  • sorry, copy-past-example-fail ;) figured out, that i probably have to set the image as "background-image"...somehow..
    – ezkay
    Dec 6, 2015 at 16:38

1 Answer 1


I figured it out. blur.js needs an background-image to work.

i had to set the image as background separately:

<?php $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );?>
<a href="<?php echo $imageLink; ?>">
    <div class="testbg" style="background-image: url('<?php echo $thumb['0'];?>')">
       <?php the_post_thumbnail(); ?>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.