I'm not using @eleventy's screenshot service for my links content, thanks a lot @zachleat!
-
I'm not using @eleventy's screenshot service for my links content, thanks a lot @zachleat!
But…
…it looks like many screenshots fail, so I get the default image — Eleventy's logo —, as you can see in my #Cloudinary Library…
-
Zach Leatherman :11ty:replied to Nicolas Hoizey last edited by
-
Nicolas Hoizeyreplied to Zach Leatherman :11ty: last edited by
@zachleat here's the most recent example:
A YouTube video:
https://www.youtube.com/watch?v=VhOEcA-Ne44The screenshot URL:
https://v1.screenshot.11ty.dev/https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DVhOEcA-Ne44/large/_wait:3/There are other SPAs with the same issue, it might be a pattern…
But there was also this static page:
https://markllobrera.com/posts/shogun-visual-style/The screenshot now works, but I use Cloudinary to resize/cache images, and the screenshot URL stays the same, so Cloudinary doesn't update its cache…
-
Zach Leatherman :11ty:replied to Nicolas Hoizey last edited by
@nhoizey yeah, youtube went very anti-scraper recently FOR SOME REASON (it’s AI)
I did a bunch of extra work to fix this on the opengraph API which is a better alternative anyway for youtube posters (but they’re being annoying about getting high quality images there too) https://github.com/11ty/api-opengraph-image/issues/6
-
Nicolas Hoizeyreplied to Zach Leatherman :11ty: last edited by
@zachleat I tried to add a random string at the end of the screenshot URL to force Cloudinary to update.
It looks like you redirect to the URL without this random string, I guess to get a “clean” URL.
But you serve the image on the first request, even if you redirect, so you serve the image twice, for each URL.
You could either:
- serve the image directly, without redirect (best for performance)
- redirect without payload (best for clean URLs) -
-
@eeeps thanks Eric! I use 11ty’s screenshots API to get some screenshots, which are resized/optimized with Cloudinary fetch API.
For example:
- https://nicolas-hoizey.com/links/2023/12/05/sizes-auto-pretty-much-requires-width-and-height-attributes/ links to https://ericportis.com/posts/2023/auto-sizes-pretty-much-requires-width-and-height/
- the screenshot: https://v1.screenshot.11ty.dev/https%3A%2F%2Fericportis.com%2Fposts%2F2023%2Fauto-sizes-pretty-much-requires-width-and-height%2F/large/_wait:3/
- an optimized version: https://res.cloudinary.com/nho/image/fetch/q_auto,f_auto,w_auto465,c_limit/https%3A%2F%2Fv1.screenshot.11ty.dev%2Fhttps%253A%252F%252Fericportis.com%252Fposts%252F2023%252Fauto-sizes-pretty-much-requires-width-and-height%252F%2Flarge%2F_wait%3A3%2FIf the screenshot failed and returned 11ty logo, Cloudinary will serve it forever even if the API later return the right screenshot.
For example: https://nicolas-hoizey.com/links/2024/04/10/shogun-s-visual-style/
-
@nhoizey @zachleat if you have a paid account we can turn “forever” into a shorter period, but it’s global… https://cloudinary.com/documentation/fetch_remote_images#refreshing_or_deleting_fetched_assets
You could also try sending API requests to invalidate failed assets individually, but I’m not actually sure if this works with fetched resources. https://cloudinary.com/documentation/invalidate_cached_media_assets_on_the_cdn
I’m also not sure if we cache errors. I’ll ask, but — any way to get an error back from the screenshot service rather than a default image?
-
-
Zach Leatherman :11ty:replied to Nicolas Hoizey last edited by [email protected]
@nhoizey @eeeps unfortunately the screenshots service doesn’t have an option to return an HTTP error code because it’d result in broken images in Firefox
it’d be pretty easy to fork with your own though, this is the place: https://github.com/11ty/api-screenshot/blob/954efb69a502a9880095f183f7e1d07a21dc37f5/api/screenshot.js#L24-L34