chore: image improvements
This commit is contained in:
parent
9c3d8e213a
commit
7dde72d1cb
15 changed files with 138 additions and 164 deletions
|
@ -14,40 +14,36 @@ schema: books
|
|||
{% render "partials/blocks/banners/rss.liquid", url: "/feeds/books", text: "Subscribe to my books feed or follow along on this page" %}
|
||||
<hr />
|
||||
{% for book in bookData %}
|
||||
{% capture alt %}{{ book.title }} by {{ book.authors }}{% endcapture %}
|
||||
<article class="book-entry">
|
||||
<a href="{{ book.url }}">
|
||||
<img
|
||||
srcset="
|
||||
https://cdn.coryd.dev{{ book.image }}?class=verticalsm 200w,
|
||||
https://cdn.coryd.dev{{ book.image }}?class=verticalmd 400w,
|
||||
https://cdn.coryd.dev{{ book.image }}?class=verticalbase 800w,
|
||||
https://cdn.coryd.dev{{ book.image }}?class=verticallg 1200w
|
||||
"
|
||||
sizes="(max-width: 450px) 200px,
|
||||
(max-width: 850px) 400px,
|
||||
(max-width: 1000px) 800px,
|
||||
1200px"
|
||||
src="https://cdn.coryd.dev{{ book.image }}?class=verticallg 1200w"
|
||||
alt="{{ alt }}"
|
||||
loading="eager"
|
||||
decoding="async"
|
||||
width="200"
|
||||
height="307"
|
||||
/>
|
||||
</a>
|
||||
<div class="book-meta">
|
||||
{% capture alt %}{{ book.title }} by {{ book.authors }}{% endcapture %}
|
||||
<article class="book-entry">
|
||||
<a href="{{ book.url }}">
|
||||
<p class="title"><strong>{{ book.title }}</strong></p>
|
||||
<img
|
||||
srcset="
|
||||
https://cdn.coryd.dev{{ book.image }}?class=verticalsm&type=webp 200w,
|
||||
https://cdn.coryd.dev{{ book.image }}?class=verticalmd&type=webp 400w
|
||||
"
|
||||
sizes="(max-width: 450px) 200px,
|
||||
400px"
|
||||
src="https://cdn.coryd.dev{{ book.image }}?class=verticalsm&type=webp"
|
||||
alt="{{ alt }}"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
width="200"
|
||||
height="307"
|
||||
/>
|
||||
</a>
|
||||
{% if book.author %}
|
||||
<p class="sub-meta">By {{ book.author }}</p>
|
||||
{% endif %}
|
||||
{% if book.progress %}
|
||||
{%- assign percentage = book.progress | append: '%' -%}
|
||||
{% render "partials/media/progress-bar.liquid", percentage:percentage %}
|
||||
{% endif %}
|
||||
{% if book.description %}<div class="description">{{ book.description | normalize_whitespace | markdown | truncatewords: 50 }}</div>{% endif %}
|
||||
</div>
|
||||
</article>
|
||||
<div class="book-meta">
|
||||
<a href="{{ book.url }}">
|
||||
<p class="title"><strong>{{ book.title }}</strong></p>
|
||||
</a>
|
||||
{% if book.author %}
|
||||
<p class="sub-meta">By {{ book.author }}</p>
|
||||
{% endif %}
|
||||
{% if book.progress %}
|
||||
{%- assign percentage = book.progress | append: '%' -%}
|
||||
{% render "partials/media/progress-bar.liquid", percentage:percentage %}
|
||||
{% endif %}
|
||||
{% if book.description %}<div class="description">{{ book.description | normalize_whitespace | markdown | truncatewords: 50 }}</div>{% endif %}
|
||||
</div>
|
||||
</article>
|
||||
{% endfor %}
|
Reference in a new issue