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

feat: 11ty image plugin + optimize images

Browse source
This commit is contained in:
Cory Dransfeldt 2023-05-27 19:01:43 -07:00
parent b59886a56e
commit c87e893046
No known key found for this signature in database
5 changed files with 39 additions and 54 deletions
Download patch file Download diff file Expand all files Collapse all files

43
src/_includes/now.liquid
View file

@ -55,13 +55,9 @@ layout: main
{{ artist.playcount }} plays
</div>
</div>
<img
src="{{artist.name | artist}}"
onerror="this.onerror=null; this.src='/assets/img/media/404-music.jpg'"
width="350"
height="350"
class="rounded-lg"
alt="{{artist.name | escape}}" />
{%- capture artistImg %}{{ artist.name | artist }}{% endcapture -%}
{%- capture artistName %}{{ artist.name | escape }}{% endcapture -%}
{% image artistImg, artistName, 'rounded-lg', '225px', 'eager' %}
</div>
</a>
{% endfor %}
@ -84,14 +80,9 @@ layout: main
{{ album.artist.name }}
</div>
</div>
<img
src="{{album | album}}"
onerror="this.onerror=null; this.src='/assets/img/media/404-music.jpg'"
width="350"
height="350"
class="rounded-lg"
alt="{{album.name | escape}}"
loading="lazy" />
{%- capture albumImg %}{{ album | album }}{% endcapture -%}
{%- capture albumName %}{{ album.name | escape }}{% endcapture -%}
{% image albumImg, albumName, 'rounded-lg', '225px' %}
</div>
</a>
{% endfor %}
@ -143,14 +134,9 @@ layout: main
<div class="absolute left-1 bottom-2 drop-shadow-md">
<div class="px-1 text-xs font-bold text-white">{{ movie.title }}</div>
</div>
<img
src="{{movie.image | movie: site.letterboxd-host, site.cdn-movies}}"
onerror="this.onerror=null; this.src='/assets/img/media/404-movie.jpg'"
width="226"
height="337"
class="rounded-lg"
alt="{{movie.title | escape}}"
loading="lazy" />
{%- capture movieImg %}{{movie.image | movie: site.letterboxd-host, site.cdn-movies}}{% endcapture -%}
{%- capture movieName %}{{movie.title | escape}}{% endcapture -%}
{% image movieImg, movieName, 'rounded-lg w-full', '180px' %}
</div>
</a>
{% endfor %}
@ -173,14 +159,9 @@ layout: main
{{ episode.show.title }} • <strong>S</strong>{{ episode.episode.season }}<strong>E</strong>{{ episode.episode.number }}
</div>
</div>
<img
src="{{ episode.show.title | tv }}"
onerror="this.onerror=null; this.src='/assets/img/media/404-movie.jpg'"
width="226"
height="337"
class="rounded-lg"
alt="{{ episode.episode.title | escape}} {{ episode.show.title | escape }}"
loading="lazy" />
{%- capture tvImg %}{{episode.show.title | tv}}{% endcapture -%}
{%- capture tvName %}{{ episode.episode.title | escape}} {{ episode.show.title | escape }}{% endcapture -%}
{% image tvImg, tvName, 'rounded-lg w-full', '180px' %}
</div>
</a>
{% endfor %}

18
src/_includes/webmentions.liquid
View file

@ -8,11 +8,7 @@
{% for mention in mentions['repost-of'] %}
<li class="-ml-3 inline">
<a href={{mention.url}}>
<img
src="{{mention.author.photo}}"
alt="{{mention.author.name}}"
class="bg-gray-900 dark:bg-white h-14 w-14 rounded-full border-4 border-white dark:border-gray-900 transition-all hover:border-purple-500 dark:hover:border-purple-400"
loading="lazy" />
{% image mention.author.photo, mention.author.name, 'bg-gray-900 dark:bg-white h-14 w-14 rounded-full border-4 border-white dark:border-gray-900 transition-all hover:border-purple-500 dark:hover:border-purple-400', '56px' %}
</a>
</li>
{% endfor %}
@ -26,11 +22,7 @@
{% for mention in mentions['like-of'] %}
<li class="-ml-3 inline">
<a href={{mention.url}}>
<img
src="{{mention.author.photo}}"
alt="{{mention.author.name}}"
class="bg-gray-900 dark:bg-white h-14 w-14 rounded-full border-4 border-white dark:border-gray-900 transition-all hover:border-purple-500 dark:hover:border-purple-400"
loading="lazy" />
{% image mention.author.photo, mention.author.name, 'bg-gray-900 dark:bg-white h-14 w-14 rounded-full border-4 border-white dark:border-gray-900 transition-all hover:border-purple-500 dark:hover:border-purple-400', '56px' %}
</a>
</li>
{% endfor %}
@ -43,11 +35,7 @@
{% for mention in mentions['in-reply-to'] %}
<div class="border-bottom flex flex-row items-center border-gray-100 pb-4 w-full">
<a class="group flex flex-row space-between items-center" href={{mention.url}}>
<img
src="{{mention.author.photo}}"
alt="{{mention.author.name}}"
class="bg-gray-900 dark:bg-white h-14 w-14 rounded-full border-4 border-white dark:border-gray-900 transition-all group-hover:border-purple-500 dark:group-hover:border-purple-400"
loading="lazy" />
{% image mention.author.photo, mention.author.name, 'bg-gray-900 dark:bg-white h-14 w-14 rounded-full border-4 border-white dark:border-gray-900 transition-all group-hover:border-purple-500 dark:group-hover:border-purple-400', '56px' %}
<div class="ml-3">
<p class="text-sm group-hover:text-purple-500 dark:group-hover:text-purple-400">{{ mention.content.text }}</p>
<p class="mt-1 text-xs group-hover:text-purple-500 dark:group-hover:text-purple-400">{{ mention.published | isoDateOnly }}</p>