chore: image improvements
This commit is contained in:
parent
77c9a85296
commit
d27fac4b6b
29 changed files with 650 additions and 44 deletions
|
@ -12,7 +12,25 @@ schema: movie
|
|||
{%- endcapture -%}
|
||||
<a class="back-link-header link-icon flex-centered" href="/watching">{% tablericon "arrow-left" "Go back" %} Go back</a>
|
||||
<article class="watching-focus">
|
||||
<img src="https://coryd.dev/.netlify/images/?url={{ movie.backdrop }}&fm=webp&q=85&w=768&h=432" alt="{{ alt }}" class="image-banner" 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 }}"
|
||||
class="image-banner"
|
||||
loading="eager"
|
||||
decoding="async"
|
||||
width="768"
|
||||
height="432"
|
||||
/>
|
||||
<div class="watching-meta">
|
||||
<p class="title"><strong>{{ movie.title }}</strong></p>
|
||||
{% if movie.rating %}<p class="rating">{{ movie.rating }}</p>{% endif %}
|
||||
|
|
Reference in a new issue