Blur Image

A lightweight image loading solution that provides a smooth transition from a blurred thumbnail to the full-resolution image.

HTML:

<div class="blur-up-wrapper">
  <img class="blur-up-image" loading="lazy" src="thumb.webp" data-full="full.webp" width="1800" height="1200">
</div>

Shortcode:

[blur_up_image id="123"]
[blur_up_image url="https://example.com/image.jpg"]

Function:

the_blur_up_image(123);
the_blur_up_image('https://example.com/image.jpg');

Variable:

$image_html = get_blur_up_image(123, [
  'class' => 'my-custom-class',
  'wrapper_class' => 'my-wrapper-class',
  'size' => 'large',
  'thumbnail_size' => 'medium'
]);

ACF:

$gallery_images = get_field('gallery');
if ($gallery_images) {
  echo get_blur_up_gallery($gallery_images);
}

Custom:

$blur_up = blur_up_lazy_load();
echo $blur_up->generate_blur_up_image($image_id, [
  'class' => 'custom-class',
  'size' => 'full',
  'thumbnail_size' => 'thumbnail'
]);