Blur Loader with Cloudinary

Achieve 'Gatsby-like' Blur Loader using Cloudinary, and Next Image.

––– views

Blur loader I used throughout this website.

Inspired by Colby Fayock Blog Post.

CloudinaryImg Component

import Image from 'next/image';
import { buildUrl } from 'cloudinary-build-url';
export default function CloudinaryImg({
publicId,
height,
width,
alt = 'Project Image',
title,
className,
}) {
const urlBlurred = buildUrl(publicId, {
cloud: {
cloudName: 'theodorusclarence',
},
transformations: {
effect: {
name: 'blur:1000',
},
quality: 1,
},
});
const url = buildUrl(publicId, {
cloud: {
cloudName: 'theodorusclarence',
},
});
return (
<div
className={className}
style={{
position: 'relative',
height: 0,
paddingTop: `${(height / width) * 100}%`,
backgroundImage: `url(${urlBlurred})`,
backgroundPosition: 'center center',
backgroundSize: `100%`,
}}
>
<div
style={{
position: 'absolute',
top: 0,
left: 0,
}}
>
<Image
width={width}
height={height}
src={url}
alt={alt}
unoptimized={true}
title={title || alt}
/>
</div>
</div>
);
}
jsx

Usage

1. For full width

<figure className='overflow-hidden rounded-sm shadow-md dark:shadow-none'>
<CloudinaryImg
publicId='theodorusclarence/cloudinaryId.jpg'
width='1440'
height='792'
alt='Your alt text'
/>
</figure>
jsx

2. For specified width and centered

If not using jit or in mdx, width can be replaced by using inline-style

<figure className='mx-auto w-[210px] shadow-md dark:shadow-none'>
<CloudinaryImg
publicId='theodorusclarence/cloudinaryId.png'
width='210'
height='149'
alt='Your alt text'
/>
</figure>
jsx