feat: refactor image loading
This commit is contained in:
parent
22fd3850ef
commit
93fb7eafeb
30 changed files with 3408 additions and 4023 deletions
|
|
@ -9,7 +9,7 @@ I've written before about [embedding music into my site](https://coryd.dev/posts
|
|||
|
||||
I could have kept depending on Last.fm and — don't get me wrong — I love Last.fm. It's one of those valuable, legacy services that's hanging on with a rich user base and historical recommendations. I'm going to keep scrobbling data there and to ListenBrainz[^1].
|
||||
|
||||
{% image 'https://coryd.dev/.netlify/images/?url=/media/blog/scrobbler.png&w=1000', 'A diagram of the scrobbling architecture', 'image-banner', 'eager' %}
|
||||
<img src="https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/scrobbler.png&w=1000&fm=webp&q=85" class="image-banner" alt="A diagram of the scrobbling architecture" />
|
||||
|
||||
What I've long wanted is something that sits on infrastructure I control, stores my own data and lets me present roughly the same data. Given that Plex will issue outbound webhooks, I thought I'd set up an edge function over at Netlify and point a webhook at it to see what I could do with the inbound payload. What Plex sends is fairly lightweight and ended up needing to be read in from form data on the `POST`, but it was enough to work with.
|
||||
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ To simplify file uploads to B2, I mount the bucket for my site using [Mountain D
|
|||
|
||||
My music charting feature relies on JSON maps of artist and album metadata — if a new artist or album isn't present in either, it assumes that the image it needs is in the format of `artist-name.jpg` or `artist-name-album-name.jpg`. I store the canonical copies of these image files in a separate GitHub repo and have Hazel watch the `artist` and `album` directories contained therein. It renames the files to match the aforementioned format, strips characters that typically break URLs and copies them to my mounted B2 Bucket.
|
||||
|
||||
{% image 'https://coryd.dev/media/blog/albums-hazel-rule-example.png', 'An example of my album art Hazel workflow', 'image-banner' %}
|
||||
<img src="https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/albums-hazel-rule-example.png&w=1000&fm=webp&q=85" class="image-banner" alt="An example of my album art Hazel workflow" />
|
||||
|
||||
---
|
||||
|
||||
|
|
@ -39,7 +39,7 @@ You'll also need to set an array of allowed domains that you intend to source im
|
|||
|
||||
I'm primarily leveraging my B2 bucket, but also use the [The Movie Database](https://www.themoviedb.org/) for TV/movie posters displayed on my now page and fetch book covers from Google books.
|
||||
|
||||
When I access an image, it's then done via [Netlify's image CDN](https://docs.netlify.com/image-cdn/overview/), allowing me to set optimal dimensions, fit and format: `https://coryd.dev/.netlify/images/?url=/media/albums/IMAGE.jpg&fit=cover&w=320&h=320`. I apply similar parameters to book and TV/movie images to preserve a consistent aspect ratio, without coercing these images into a consistent shape with CSS[^1].
|
||||
When I access an image, it's then done via [Netlify's image CDN](https://docs.netlify.com/image-cdn/overview/), allowing me to set optimal dimensions, fit and format: `https://coryd.dev/media/albums/IMAGE.jpg`. I apply similar parameters to book and TV/movie images to preserve a consistent aspect ratio, without coercing these images into a consistent shape with CSS[^1].
|
||||
|
||||
Once I have my Netlify CDN URLs, I *still* process them via an 11ty image shortcode:
|
||||
|
||||
|
|
|
|||
|
|
@ -27,7 +27,8 @@ My parents started getting tattooed in their 50s, thinking it would be a cheaper
|
|||
Each piece was important to me when I got it and remains important to me now. They're references to and reminders of important moments and I enjoy every session[^6]. But, for now, my shoulder is sore.
|
||||
|
||||
{% capture fallbackIcon %}{% tablericon "photo" "A photo of the Sturgill Simpson-inspired half sleeve referenced above." %}{% endcapture %}
|
||||
{% image 'https://coryd.dev/.netlify/images/?url=/media/blog/half-sleeve.jpg&w=1000', 'A photo of the Sturgill Simpson-inspired half sleeve referenced above.', 'image-banner', 'eager' %}
|
||||
|
||||
<img src="https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/half-sleeve.jpg&w=1000&fm=webp&q=85" class="image-banner" alt="A photo of the Sturgill Simpson-inspired half sleeve referenced above." loading="lazy" decoding="async" />
|
||||
|
||||
[^1]: My wife got the same piece done — there was one pointing to the driveway of the house we got married at. It burned down in the Butte fire.
|
||||
[^2]: She got elected!
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ tags: ['music']
|
|||
---
|
||||
I saw this carved into a table in Austin once and it — like many songs — has been stuck in my head ever since. I'll get hooked on a song and circle back to that roughly carved message.<!-- excerpt -->
|
||||
|
||||
{% image 'https://coryd.dev/media/blog/what-song.png', 'What song is in your head?', 'image-banner' %}
|
||||
<img src="https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/what-song.png&fm=webp&q=85&w=1000" alt="What song is in your head?" class="image-banner" loading="eager" decoding="async" />
|
||||
|
||||
I've had songs and albums stuck in my head dating back to my childhood, primarily tracks from [*The Traveling Wilburys Vol. 1*](https://en.wikipedia.org/wiki/Traveling_Wilburys_Vol._1) — Tweeter and the Monkey Man, Handle With Care — they all take turns getting stuck in my head.
|
||||
|
||||
|
|
|
|||
Reference in a new issue