Hero images

[JanDW]

I'm experimenting with adding hero images to the blogposts.

I figured unsplash.com would be the best source of images, so I started thinking about integrating with it. I want to specify the image ID in the blog post's front matter. When Eleventy builds the site it should look up the image on unsplash API GET /photos/:id

• [ ] it should retrieve the different available sizes, to be used with srcset in the rendered HTML
• [ ] it should retrieve the description to be used in the <img alt=""> attribute
• [ ] it should retrieve the authors name and link to their unsplash profile page to attribute the photo

Of course, the image will always be the same, so I don't want Eleventy to call the API for each and every build. To that end, I'm using @11ty/eleventy-cache-assets to cache the API calls.

[JanDW]

Paste of my bearnotes

---

Loading unsplash hero images

wildpeaches

Using environment variables

• Why dotenv is unnecessary!
• Working with Environment Variables in Node.js - Twilio

Environment variables on Netlify

• Build environment variables | Netlify Docs

Responsive images

Responsive images - Learn web development | MDN

API calls to unsplash

Public authentication

Pass the access key in a request header:

⚠️ access key should not be shared or put on website!

Authorization: Client-ID {public key}

Read more: Public Authentication. Access the public as well as the secret key at Unspash | wild peaches

Netlify Environment Variables: The Cheat Codes of the Internet ― Scotch.io

Getting a hero photo

• Get a photo I could set sizes for srcset in a JSON file in my _data folder as it will be available as a global data collection and use that in the requests for image sizes. Maybe?

Additional resources

• SDK JS

• Unsplash API Guidelines | Unsplash Help Center

• Guideline: Hotlinking Images | Unsplash Help Center

• ---

  Possible non-API method?

  Possible change image url and add query params? Perhaps use some JS to provide the following data in the query params?

URLSearchParams - Web APIs | MDN

• window.devicePixelRatio
• document.querySelector('html’).clientWidth

[JanDW]

Deprioritizing for now. If proceeding create separate layout that can be swapped out in the front matter. Also allow for images other than unsplash.