0

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
    endif;  
    // 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>

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

This an extra custom-blur.js:

// Blur.js part of image
// ----------------------------------------------------
    $('.testtext').blurjs({
        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 '15 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 '15 at 16:38
0

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(); ?>
    </div>
</a>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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