Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit aaa030f

Browse files
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)

AltStyle によって変換されたページ (->オリジナル) /