cdransf/coryd.dev-eleventy
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore: image improvements

Browse source
This commit is contained in:
Cory Dransfeldt 2024-05-29 13:04:36 -07:00
parent 77c9a85296
commit d27fac4b6b
No known key found for this signature in database
29 changed files with 650 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

38
src/_includes/partials/media/grid.liquid
View file

@ -17,9 +17,43 @@
</div>
{% assign loadingStrategy = loading | default: 'lazy' %}
{% if shape == 'square' %}
<img src="https://coryd.dev/.netlify/images/?url={{ item.image }}&fit=cover&w=240&h=240&fm=webp&q=85" alt="{{ alt }}" loading="{{ loadingStrategy }}" decoding="async" width="240" height="240" />
<img
srcset="
https://coryd.dev/.netlify/images/?url={{ item.image }}&fit=cover&w=200&h=200&fm=webp&q=85 200w,
https://coryd.dev/.netlify/images/?url={{ item.image }}&fit=cover&w=400&h=400&fm=webp&q=85 400w,
https://coryd.dev/.netlify/images/?url={{ item.image }}&fit=cover&w=800&h=800&fm=webp&q=85 800w,
https://coryd.dev/.netlify/images/?url={{ item.image }}&fit=cover&w=1200&h=1200&fm=webp&q=85 1200w
"
sizes="(max-width: 450px) 200px,
(max-width: 850px) 400px,
(max-width: 100px) 800px,
1200px"
src="https://coryd.dev/.netlify/images/?url={{ item.image }}&fit=cover&w=1200&h=1200&fm=webp&q=85"
alt="{{ alt }}"
loading="{{ loadingStrategy }}"
decoding="async"
width="240"
height="240"
/>
{% else %}
<img src="https://coryd.dev/.netlify/images/?url={{ item.image }}&fit=cover&w=200&h=307&fm=webp&q=85" alt="{{ alt }}" loading="{{ loadingStrategy }}" decoding="async" width="200" height="307" />
<img
srcset="
https://coryd.dev/.netlify/images/?url={{ item.image }}&fit=cover&w=200&h=307&fm=webp&q=85 200w,
https://coryd.dev/.netlify/images/?url={{ item.image }}&fit=cover&w=400&h=614&fm=webp&q=85 400w,
https://coryd.dev/.netlify/images/?url={{ item.image }}&fit=cover&w=800&h=1228&fm=webp&q=85 800w,
https://coryd.dev/.netlify/images/?url={{ item.image }}&fit=cover&w=1200&h=1842&fm=webp&q=85 1200w
"
sizes="(max-width: 450px) 200px,
(max-width: 850px) 400px,
(max-width: 1000px) 800px,
1200px"
src="https://coryd.dev/.netlify/images/?url={{ item.image }}&fit=cover&w=1200&h=1842&fm=webp&q=85"
alt="{{ alt }}"
loading="{{ loadingStrategy }}"
decoding="async"
width="200"
height="307"
/>
{% endif %}
</div>
</a>

19
src/_includes/partials/media/music/recent.liquid
View file

@ -3,7 +3,24 @@
{% capture alt %}{{ item.title | escape }} by {{ item.artist }}{% endcapture %}
<div class="item">
<div class="meta">
<img src="https://coryd.dev/.netlify/images/?url={{ item.image }}&fit=cover&w=64&h=64&fm=webp&q=85" alt="{{ alt }}" loading="lazy" decoding="async" width="64" height="64" />
<img
srcset="
https://coryd.dev/.netlify/images/?url={{ item.image }}&fit=cover&w=64&h=64&fm=webp&q=85 64w,
https://coryd.dev/.netlify/images/?url={{ item.image }}&fit=cover&w=128&h=128&fm=webp&q=85 128w,
https://coryd.dev/.netlify/images/?url={{ item.image }}&fit=cover&w=256&h=256&fm=webp&q=85 256w,
https://coryd.dev/.netlify/images/?url={{ item.image }}&fit=cover&w=512&h=512&fm=webp&q=85 512w
"
sizes="(max-width: 450px) 64px,
(max-width: 850px) 128px,
(max-width: 1000px) 256px,
512px"
src="https://coryd.dev/.netlify/images/?url={{ item.image }}&fit=cover&w=512&h=512&fm=webp&q=85"
alt="{{ alt }}"
loading="lazy"
decoding="async"
width="64"
height="64"
/>
<div class="meta-text">
<div class="title">
<a href="{{ item.url }}">{{ item.title }}</a>

19
src/_includes/partials/media/watching/grid.liquid
View file

@ -21,7 +21,24 @@
{%- capture loadingStrategy -%}
{%- if loading -%}{{ loading }}{%- else -%}lazy{%- endif -%}
{%- endcapture -%}
<img src="https://coryd.dev/.netlify/images/?url={{ item.backdrop }}&fit=cover&w=256&h=144&fm=webp&q=85" alt="{{ alt }}" loading="{{ loadingStrategy }}" decoding="async" width="256" height="144" />
<img
srcset="
https://coryd.dev/.netlify/images/?url={{ item.backdrop }}&fit=cover&w=256&h=144&fm=webp&q=85 256w,
https://coryd.dev/.netlify/images/?url={{ item.backdrop }}&fit=cover&w=512&h=288&fm=webp&q=85 512w,
https://coryd.dev/.netlify/images/?url={{ item.backdrop }}&fit=cover&w=1024&h=576&fm=webp&q=85 1024w,
https://coryd.dev/.netlify/images/?url={{ item.backdrop }}&fit=cover&w=2048&h=1152&fm=webp&q=85 2048w
"
sizes="(max-width: 450px) 256px,
(max-width: 850px) 512px,
(max-width: 1000px) 1024px,
2048px"
src="https://coryd.dev/.netlify/images/?url={{ item.backdrop }}&fit=cover&w=2048&h=1152&fm=webp&q=85"
alt="{{ alt }}"
loading="{{ loadingStrategy }}"
decoding="async"
width="256"
height="144"
/>
</div>
</a>
{% endfor %}

19
src/_includes/partials/media/watching/hero.liquid
View file

@ -5,6 +5,23 @@
<div class="header">{{ movie.title }} ({{ movie.year }})</div>
<div class="subheader">Last watched @ {{ movie.dateAdded | date: "%B %e, %Y" }}</div>
</div>
<img src="https://coryd.dev/.netlify/images/?url={{ movie.backdrop }}&fit=cover&w=768&h=432&fm=webp&q=85" alt="{{ alt }}" loading="eager" decoding="async" width="768" height="432" />
<img
srcset="
https://coryd.dev/.netlify/images/?url={{ movie.backdrop }}&fit=cover&w=256&h=144&fm=webp&q=85 256w,
https://coryd.dev/.netlify/images/?url={{ movie.backdrop }}&fit=cover&w=512&h=288&fm=webp&q=85 512w,
https://coryd.dev/.netlify/images/?url={{ movie.backdrop }}&fit=cover&w=1024&h=576&fm=webp&q=85 1024w,
https://coryd.dev/.netlify/images/?url={{ movie.backdrop }}&fit=cover&w=2048&h=1152&fm=webp&q=85 2048w
"
sizes="(max-width: 450px) 256px,
(max-width: 850px) 512px,
(max-width: 1000px) 1024px,
2048px"
src="https://coryd.dev/.netlify/images/?url={{ movie.backdrop }}&fit=cover&w=2048&h=1152&fm=webp&q=85"
alt="{{ alt }}"
loading="eager"
decoding="async"
width="768"
height="432"
/>
</div>
</a>

152
src/_includes/partials/widgets/badge-grid.liquid
View file

@ -1,26 +1,162 @@
<div class="badge-grid">
<a href="https://11ty.dev">
<img src="https://coryd.dev/.netlify/images/?url=/assets/img/badges/eleventy.png&fm=webp&q=85" alt="Made with 11ty" loading="lazy" decoding="async" width="88" height="31" />
<img
srcset="
https://coryd.dev/.netlify/images/?url=/assets/img/badges/eleventy.png&fit=cover&w=88&h=31&fm=webp&q=85 88w,
https://coryd.dev/.netlify/images/?url=/assets/img/badges/eleventy.png&fit=cover&w=176&h=62&fm=webp&q=85 176w,
https://coryd.dev/.netlify/images/?url=/assets/img/badges/eleventy.png&fit=cover&w=352&h=124&fm=webp&q=85 352w,
https://coryd.dev/.netlify/images/?url=/assets/img/badges/eleventy.png&fit=cover&w=704&h=248&fm=webp&q=85 704w
"
sizes="(max-width: 450px) 88px,
(max-width: 850px) 176px,
(max-width: 1000px) 352px,
704px"
src="https://coryd.dev/.netlify/images/?url=/assets/img/badges/eleventy.png&fit=cover&w=704&h=248&fm=webp&q=85"
alt="Made with 11ty"
loading="lazy"
decoding="async"
width="88"
height="31"
/>
</a>
<a href="https://social.lol/@cory">
<img src="https://coryd.dev/.netlify/images/?url=/assets/img/badges/mastodon.png&fm=webp&q=85" alt="Follow me on Mastodon" loading="lazy" decoding="async" width="88" height="31" />
<img
srcset="
https://coryd.dev/.netlify/images/?url=/assets/img/badges/mastodon.png&fit=cover&w=88&h=31&fm=webp&q=85 88w,
https://coryd.dev/.netlify/images/?url=/assets/img/badges/mastodon.png&fit=cover&w=176&h=62&fm=webp&q=85 176w,
https://coryd.dev/.netlify/images/?url=/assets/img/badges/mastodon.png&fit=cover&w=352&h=124&fm=webp&q=85 352w,
https://coryd.dev/.netlify/images/?url=/assets/img/badges/mastodon.png&fit=cover&w=704&h=248&fm=webp&q=85 704w
"
sizes="(max-width: 450px) 88px,
(max-width: 850px) 176px,
(max-width: 1000px) 352px,
704px"
src="https://coryd.dev/.netlify/images/?url=/assets/img/badges/mastodon.png&fit=cover&w=704&h=248&fm=webp&q=85"
alt="Made with 11ty"
loading="lazy"
decoding="async"
width="88"
height="31"
/>
</a>
<a href="https://www.buymeacoffee.com/cory">
<img src="https://coryd.dev/.netlify/images/?url=/assets/img/badges/buymeacoffee.png&fm=webp&q=85" alt="Buy Me a Coffee" loading="lazy" decoding="async" width="88" height="31" />
<img
srcset="
https://coryd.dev/.netlify/images/?url=/assets/img/badges/buymeacoffee.png&fit=cover&w=88&h=31&fm=webp&q=85 88w,
https://coryd.dev/.netlify/images/?url=/assets/img/badges/buymeacoffee.png&fit=cover&w=176&h=62&fm=webp&q=85 176w,
https://coryd.dev/.netlify/images/?url=/assets/img/badges/buymeacoffee.png&fit=cover&w=352&h=124&fm=webp&q=85 352w,
https://coryd.dev/.netlify/images/?url=/assets/img/badges/buymeacoffee.png&fit=cover&w=704&h=248&fm=webp&q=85 704w
"
sizes="(max-width: 450px) 88px,
(max-width: 850px) 176px,
(max-width: 1000px) 352px,
704px"
src="https://coryd.dev/.netlify/images/?url=/assets/img/badges/buymeacoffee.png&fit=cover&w=704&h=248&fm=webp&q=85"
alt="Made with 11ty"
loading="lazy"
decoding="async"
width="88"
height="31"
/>
</a>
<a href="https://github.com/cdransf">
<img src="https://coryd.dev/.netlify/images/?url=/assets/img/badges/github.png&fm=webp&q=85" alt="Check out my GitHub" loading="lazy" decoding="async" width="88" height="31" />
<img
srcset="
https://coryd.dev/.netlify/images/?url=/assets/img/badges/github.png&fit=cover&w=88&h=31&fm=webp&q=85 88w,
https://coryd.dev/.netlify/images/?url=/assets/img/badges/github.png&fit=cover&w=176&h=62&fm=webp&q=85 176w,
https://coryd.dev/.netlify/images/?url=/assets/img/badges/github.png&fit=cover&w=352&h=124&fm=webp&q=85 352w,
https://coryd.dev/.netlify/images/?url=/assets/img/badges/github.png&fit=cover&w=704&h=248&fm=webp&q=85 704w
"
sizes="(max-width: 450px) 88px,
(max-width: 850px) 176px,
(max-width: 1000px) 352px,
704px"
src="https://coryd.dev/.netlify/images/?url=/assets/img/badges/github.png&fit=cover&w=704&h=248&fm=webp&q=85"
alt="Made with 11ty"
loading="lazy"
decoding="async"
width="88"
height="31"
/>
</a>
<a href="https://github.com/ai-robots-txt/ai.robots.txt">
<img src="https://coryd.dev/.netlify/images/?url=/assets/img/badges/notarobot.png&fm=webp&q=85" alt="Not a robot" loading="lazy" decoding="async" width="88" height="31" />
<img
srcset="
https://coryd.dev/.netlify/images/?url=/assets/img/badges/notarobot.png&fit=cover&w=88&h=31&fm=webp&q=85 88w,
https://coryd.dev/.netlify/images/?url=/assets/img/badges/notarobot.png&fit=cover&w=176&h=62&fm=webp&q=85 176w,
https://coryd.dev/.netlify/images/?url=/assets/img/badges/notarobot.png&fit=cover&w=352&h=124&fm=webp&q=85 352w,
https://coryd.dev/.netlify/images/?url=/assets/img/badges/notarobot.png&fit=cover&w=704&h=248&fm=webp&q=85 704w
"
sizes="(max-width: 450px) 88px,
(max-width: 850px) 176px,
(max-width: 1000px) 352px,
704px"
src="https://coryd.dev/.netlify/images/?url=/assets/img/badges/notarobot.png&fit=cover&w=704&h=248&fm=webp&q=85"
alt="Made with 11ty"
loading="lazy"
decoding="async"
width="88"
height="31"
/>
</a>
<a href="https://validator.w3.org">
<img src="https://coryd.dev/.netlify/images/?url=/assets/img/badges/validhtml5.png&fm=webp&q=85" alt="Valid HTML5" loading="lazy" decoding="async" width="88" height="31" />
<img
srcset="
https://coryd.dev/.netlify/images/?url=/assets/img/badges/validhtml5.png&fit=cover&w=88&h=31&fm=webp&q=85 88w,
https://coryd.dev/.netlify/images/?url=/assets/img/badges/validhtml5.png&fit=cover&w=176&h=62&fm=webp&q=85 176w,
https://coryd.dev/.netlify/images/?url=/assets/img/badges/validhtml5.png&fit=cover&w=352&h=124&fm=webp&q=85 352w,
https://coryd.dev/.netlify/images/?url=/assets/img/badges/validhtml5.png&fit=cover&w=704&h=248&fm=webp&q=85 704w
"
sizes="(max-width: 450px) 88px,
(max-width: 850px) 176px,
(max-width: 1000px) 352px,
704px"
src="https://coryd.dev/.netlify/images/?url=/assets/img/badges/validhtml5.png&fit=cover&w=704&h=248&fm=webp&q=85"
alt="Made with 11ty"
loading="lazy"
decoding="async"
width="88"
height="31"
/>
</a>
<a href="https://www.w3.org/Style/CSS/Overview.en.html">
<img src="https://coryd.dev/.netlify/images/?url=/assets/img/badges/validcss.png&fm=webp&q=85" alt="Valid CSS" loading="lazy" decoding="async" width="88" height="31" />
<img
srcset="
https://coryd.dev/.netlify/images/?url=/assets/img/badges/validcss.png&fit=cover&w=88&h=31&fm=webp&q=85 88w,
https://coryd.dev/.netlify/images/?url=/assets/img/badges/validcss.png&fit=cover&w=176&h=62&fm=webp&q=85 176w,
https://coryd.dev/.netlify/images/?url=/assets/img/badges/validcss.png&fit=cover&w=352&h=124&fm=webp&q=85 352w,
https://coryd.dev/.netlify/images/?url=/assets/img/badges/validcss.png&fit=cover&w=704&h=248&fm=webp&q=85 704w
"
sizes="(max-width: 450px) 88px,
(max-width: 850px) 176px,
(max-width: 1000px) 352px,
704px"
src="https://coryd.dev/.netlify/images/?url=/assets/img/badges/validcss.png&fit=cover&w=704&h=248&fm=webp&q=85"
alt="Made with 11ty"
loading="lazy"
decoding="async"
width="88"
height="31"
/>
</a>
<a href="https://coryd.dev/feeds">
<img src="https://coryd.dev/.netlify/images/?url=/assets/img/badges/validrss.png&fm=webp&q=85" alt="Valid RSS" loading="lazy" decoding="async" width="88" height="31" />
<img
srcset="
https://coryd.dev/.netlify/images/?url=/assets/img/badges/validrss.png&fit=cover&w=88&h=31&fm=webp&q=85 88w,
https://coryd.dev/.netlify/images/?url=/assets/img/badges/validrss.png&fit=cover&w=176&h=62&fm=webp&q=85 176w,
https://coryd.dev/.netlify/images/?url=/assets/img/badges/validrss.png&fit=cover&w=352&h=124&fm=webp&q=85 352w,
https://coryd.dev/.netlify/images/?url=/assets/img/badges/validrss.png&fit=cover&w=704&h=248&fm=webp&q=85 704w
"
sizes="(max-width: 450px) 88px,
(max-width: 850px) 176px,
(max-width: 1000px) 352px,
704px"
src="https://coryd.dev/.netlify/images/?url=/assets/img/badges/validrss.png&fit=cover&w=704&h=248&fm=webp&q=85"
alt="Made with 11ty"
loading="lazy"
decoding="async"
width="88"
height="31"
/>
</a>
</div>

19
src/_includes/webrings/the-claw.liquid
View file

@ -1,6 +1,23 @@
<div class="webring__wrapper">
<div class="webring__centered flex-centered">
<img src="https://coryd.dev/.netlify/images/?url=/assets/img/webrings/theclaw.png&fm=webp&q=85" alt="The Claw Webring" loading="lazy" decoding="async" width="200" height="169" />
<img
srcset="
https://coryd.dev/.netlify/images/?url=/assets/img/webrings/theclaw.png&fit=cover&w=200&h=169&fm=webp&q=85 200w,
https://coryd.dev/.netlify/images/?url=/assets/img/webrings/theclaw.png&fit=cover&w=400&h=338&fm=webp&q=85 400w,
https://coryd.dev/.netlify/images/?url=/assets/img/webrings/theclaw.png&fit=cover&w=800&h=676&fm=webp&q=85 800w,
https://coryd.dev/.netlify/images/?url=/assets/img/webrings/theclaw.png&fit=cover&w=1600&h=1352&fm=webp&q=85 1600w
"
sizes="(max-width: 450px) 200px,
(max-width: 850px) 400px,
(max-width: 1000px) 800px,
1600px"
src="https://coryd.dev/.netlify/images/?url=/assets/img/webrings/theclaw.png&fit=cover&w=1600&h=1352&fm=webp&q=85"
alt="The Claw Webring"
loading="lazy"
decoding="async"
width="200"
height="169"
/>
</div>
<h3 class="text-centered">The Claw Webring</h3>
<div class="webring__centered flex-centered">