Skip to content

Commit aaa030f

Browse files
colbyfayockcolbyfayock
authored
feat: Replace preload tags for related image source if exists (#55)
# Description For each image, attempt to look up if that image has a preload tag associated with it and replace the URL of that tag to avoid duplicate image requests. Active use case is Next.js App Router with the Next Image component. ## Issue Ticket Number <!-- Specifiy which issue this fixes by referencing the issue number (`#11`) or issue URL. --> <!-- Example: Fixes #1 --> Fixes #54 ## Type of change <!-- Please select all options that are applicable. --> - [ ] Bug fix (non-breaking change which fixes an issue) - [ ] New feature (non-breaking change which adds functionality) - [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected) - [ ] This change requires a documentation update # Checklist <!-- These must all be followed and checked. --> - [ ] I have followed the contributing guidelines of this project as mentioned in [CONTRIBUTING.md](/CONTRIBUTING.md) - [ ] I have created an [issue](https://github.com/colbyfayock/netlify-plugin-cloudinary/issues) ticket for this PR - [ ] I have checked to ensure there aren't other open [Pull Requests](https://github.com/colbyfayock/netlify-plugin-cloudinary/pulls) for the same update/change? - [ ] I have performed a self-review of my own code - [ ] I have run tests locally to ensure they all pass - [ ] I have commented my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes needed to the documentation
1 parent 46e6065 commit aaa030f

File tree

5 files changed

+86
-9
lines changed

5 files changed

+86
-9
lines changed

‎demo/app/app/page.jsx

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import '../../styles/globals.css';
2+
import Image from 'next/image'
3+
import styles from '../../styles/Home.module.css'
4+
5+
import images from '../../data/images';
6+
7+
export default function Home() {
8+
return (
9+
<div className={styles.container}>
10+
11+
<main className={styles.main}>
12+
<h1 className={styles.title}>
13+
Cloudinary Netlify Plugin
14+
</h1>
15+
16+
<ul className={styles.grid}>
17+
{images.map(image => {
18+
return (
19+
<li key={image.src}>
20+
<img src={image.src} width={image.width} height={image.height} alt={image.title} />
21+
</li>
22+
);
23+
})}
24+
</ul>
25+
26+
<ul className={styles.grid}>
27+
{images.map(image => {
28+
return (
29+
<li key={image.src}>
30+
<Image src={image.src} width={image.width} height={image.height} alt={image.title} />
31+
</li>
32+
);
33+
})}
34+
</ul>
35+
</main>
36+
</div>
37+
)
38+
}

‎demo/app/layout.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
export const metadata = {
2+
title: 'Next.js',
3+
description: 'Generated by Next.js',
4+
}
5+
6+
export default function RootLayout({ children }) {
7+
return (
8+
<html lang="en">
9+
<body>{children}</body>
10+
</html>
11+
)
12+
}

‎demo/next.config.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1-
module.exports = {
1+
/** @type {import('next').NextConfig} */
2+
const nextConfig = {
23
reactStrictMode: true,
34
}
5+
6+
module.exports = nextConfig

‎demo/pages/index.js

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,9 @@ export default function Home({ images }) {
99
const [isLoaded, setIsLoaded] = useState();
1010

1111
useEffect(() => {
12-
setIsLoaded(true);
12+
setTimeout(() => {
13+
setIsLoaded(true);
14+
}, 1000)
1315
}, [])
1416

1517
return (
@@ -62,6 +64,16 @@ export default function Home({ images }) {
6264
})}
6365
</ul>
6466

67+
<ul className={styles.grid}>
68+
{images.map(image => {
69+
return (
70+
<li key={image.src}>
71+
<Image src={image.src} width={image.width} height={image.height} alt={image.title} />
72+
</li>
73+
);
74+
})}
75+
</ul>
76+
6577
{isLoaded && (
6678
<ul className={styles.grid}>
6779
{images.map(image => {

‎src/lib/cloudinary.js

Lines changed: 19 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -222,7 +222,6 @@ async function updateHtmlImagesToCloudinary(html, options = {}) {
222222
localDir,
223223
uploadPreset,
224224
remoteHost,
225-
loadingStrategy
226225
});
227226
cloudinaryUrl = url;
228227
} catch(e) {
@@ -239,29 +238,42 @@ async function updateHtmlImagesToCloudinary(html, options = {}) {
239238
$img.setAttribute('loading', loadingStrategy);
240239

241240
// convert srcset images to cloudinary
241+
242242
const srcset = $img.getAttribute('srcset');
243+
243244
if (srcset) {
244245
// convert all srcset urls to cloudinary urls using getCloudinaryUrl function in a Promise.all
246+
245247
const srcsetUrls = srcset.split(',').map((url) => url.trim().split(' '));
248+
246249
const srcsetUrlsPromises = srcsetUrls.map((url) =>{
247-
const exists = getAsset(url[0],assets);
248-
if ( exists && deliveryType === 'upload' ) {
249-
return exists.cloudinaryUrl;
250-
}
251-
return getCloudinaryUrl({
250+
const exists = getAsset(url[0],assets);
251+
if ( exists && deliveryType === 'upload' ) {
252+
return exists.cloudinaryUrl;
253+
}
254+
return getCloudinaryUrl({
252255
deliveryType,
253256
folder,
254257
path: url[0],
255258
localDir,
256259
uploadPreset,
257260
remoteHost
258261
})
259-
});
262+
});
260263

261264
const srcsetUrlsCloudinary = await Promise.all(srcsetUrlsPromises);
262265
const srcsetUrlsCloudinaryString = srcsetUrlsCloudinary.map((urlCloudinary, index) => `${urlCloudinary.cloudinaryUrl} ${srcsetUrls[index][1]}`).join(', ');
266+
263267
$img.setAttribute('srcset', srcsetUrlsCloudinaryString);
268+
}
269+
270+
// Look for any preload tags that reference the image URLs. A specific use case here
271+
// is Next.js App Router hen using the Image component.
272+
273+
const $preload = dom.window.document.querySelector(`link[rel="preload"][as="image"][href="${imgSrc}"]`);
264274

275+
if ( $preload ) {
276+
$preload.setAttribute('href', cloudinaryUrl);
265277
}
266278
}
267279

0 commit comments

Comments
 (0)