Skip to content

Commit 57411fc

Browse files
eallioneallion
committed
refactor(mastodon): simplify image rendering logic
Signed-off-by: Charles Chin <eallion.s+github@gmail.com>
1 parent 4e8ca6c commit 57411fc

1 file changed

Lines changed: 6 additions & 24 deletions

File tree

‎layouts/_default/mastodon.html‎

Lines changed: 6 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -454,10 +454,7 @@ <h1 id="title" class="text-4xl font-bold leading-normal">{{ .Title }}</h1>
454454
<div class="relative w-full rounded-xl overflow-hidden">
455455
${m.blurhash ? `<canvas class="absolute inset-0 z-0 w-full h-full top-0 object-cover" data-blurhash="${m.blurhash}"></canvas>` : ''}
456456
<a href="${replaceFileUrl(m.url)}" class="relative z-10 ${isSensitive ? 'opacity-0 pointer-events-none sensitive-hidden transition-opacity duration-300' : ''}">
457-
<picture class="block w-full h-full ${objectFitClass}">
458-
<source srcset="${preview}!mastodon.avif" type="image/avif">
459-
<img src="${preview}" alt="${m.description || ''}" class="w-full h-full ${objectFitClass}" loading="lazy" nozoom>
460-
</picture>
457+
<img src="${preview}" alt="${m.description || ''}" class="block w-full h-full ${objectFitClass}" loading="lazy" nozoom>
461458
</a>
462459
</div>
463460
</div>
@@ -472,10 +469,7 @@ <h1 id="title" class="text-4xl font-bold leading-normal">{{ .Title }}</h1>
472469
<div class="relative w-1/2 rounded-xl overflow-hidden">
473470
${mi.blurhash ? `<canvas class="absolute inset-0 z-0 w-full h-full top-0 object-cover" data-blurhash="${mi.blurhash}"></canvas>` : ''}
474471
<a href="${replaceFileUrl(mi.url)}" class="relative z-10 ${isSensitive ? 'opacity-0 pointer-events-none sensitive-hidden transition-opacity duration-300' : ''}">
475-
<picture class="block w-full h-full ${objectFitClass}">
476-
<source srcset="${preview}!mastodon.avif" type="image/avif">
477-
<img src="${preview}" alt="${mi.description || ''}" class="w-full h-full ${objectFitClass}" loading="lazy" nozoom>
478-
</picture>
472+
<img src="${preview}" alt="${mi.description || ''}" class="block w-full h-full ${objectFitClass}" loading="lazy" nozoom>
479473
</a>
480474
</div>`;
481475
}).join('')}
@@ -491,29 +485,20 @@ <h1 id="title" class="text-4xl font-bold leading-normal">{{ .Title }}</h1>
491485
<div class="relative w-1/2 overflow-hidden rounded-xl">
492486
${firstItem.blurhash ? `<canvas class="absolute inset-0 z-0 w-full h-full top-0 left-0 object-cover" data-blurhash="${firstItem.blurhash}"></canvas>` : ''}
493487
<a href="${replaceFileUrl(firstItem.url)}" class="relative z-10 ${isSensitive ? 'opacity-0 pointer-events-none sensitive-hidden transition-opacity duration-300' : ''}">
494-
<picture class="block w-full h-full ${firstFitClass}">
495-
<source srcset="${replaceFileUrl(firstItem.preview_url || firstItem.url)}!mastodon.avif" type="image/avif">
496-
<img src="${replaceFileUrl(firstItem.preview_url || firstItem.url)}" alt="${firstItem.description || ''}" class="w-full h-full ${firstFitClass}" loading="lazy" nozoom>
497-
</picture>
488+
<img src="${replaceFileUrl(firstItem.preview_url || firstItem.url)}" alt="${firstItem.description || ''}" class="block w-full h-full ${firstFitClass}" loading="lazy" nozoom>
498489
</a>
499490
</div>
500491
<div class="w-1/2 flex flex-col gap-2.5">
501492
<div class="relative h-1/2 overflow-hidden rounded-xl">
502493
${secondItem.blurhash ? `<canvas class="absolute inset-0 z-0 w-full h-full top-0 right-0 object-cover" data-blurhash="${secondItem.blurhash}"></canvas>` : ''}
503494
<a href="${replaceFileUrl(secondItem.url)}" class="relative z-10 ${isSensitive ? 'opacity-0 pointer-events-none sensitive-hidden transition-opacity duration-300' : ''}">
504-
<picture class="block w-full h-full ${secondFitClass}">
505-
<source srcset="${replaceFileUrl(secondItem.preview_url || secondItem.url)}!mastodon.avif" type="image/avif">
506-
<img src="${replaceFileUrl(secondItem.preview_url || secondItem.url)}" alt="${secondItem.description || ''}" class="w-full h-full ${secondFitClass}" loading="lazy" nozoom>
507-
</picture>
495+
<img src="${replaceFileUrl(secondItem.preview_url || secondItem.url)}" alt="${secondItem.description || ''}" class="block w-full h-full ${secondFitClass}" loading="lazy" nozoom>
508496
</a>
509497
</div>
510498
<div class="relative h-1/2 overflow-hidden rounded-xl">
511499
${thirdItem.blurhash ? `<canvas class="absolute inset-0 z-0 w-full h-full bottom-0 right-0 object-cover" data-blurhash="${thirdItem.blurhash}"></canvas>` : ''}
512500
<a href="${replaceFileUrl(thirdItem.url)}" class="relative z-10 ${isSensitive ? 'opacity-0 pointer-events-none sensitive-hidden transition-opacity duration-300' : ''}">
513-
<picture class="block w-full h-full ${thirdFitClass}">
514-
<source srcset="${replaceFileUrl(thirdItem.preview_url || thirdItem.url)}!mastodon.avif" type="image/avif">
515-
<img src="${replaceFileUrl(thirdItem.preview_url || thirdItem.url)}" alt="${thirdItem.description || ''}" class="w-full h-full ${thirdFitClass}" loading="lazy" nozoom>
516-
</picture>
501+
<img src="${replaceFileUrl(thirdItem.preview_url || thirdItem.url)}" alt="${thirdItem.description || ''}" class="block w-full h-full ${thirdFitClass}" loading="lazy" nozoom>
517502
</a>
518503
</div>
519504
</div>
@@ -530,10 +515,7 @@ <h1 id="title" class="text-4xl font-bold leading-normal">{{ .Title }}</h1>
530515
<div class="relative overflow-hidden rounded-xl">
531516
${mi.blurhash ? `<canvas class="absolute inset-0 z-0 w-full h-full object-cover" data-blurhash="${mi.blurhash}"></canvas>` : ''}
532517
<a href="${replaceFileUrl(mi.url)}" class="relative z-10 ${isSensitive ? 'opacity-0 pointer-events-none sensitive-hidden transition-opacity duration-300' : ''}">
533-
<picture class="block w-full h-full ${objectFitClass}">
534-
<source srcset="${preview}!mastodon.avif" type="image/avif">
535-
<img src="${preview}" alt="${mi.description || ''}" class="w-full h-full ${objectFitClass}" loading="lazy" nozoom>
536-
</picture>
518+
<img src="${preview}" alt="${mi.description || ''}" class="block w-full h-full ${objectFitClass}" loading="lazy" nozoom>
537519
</a>
538520
</div>`;
539521
}).join('')}

0 commit comments

Comments
 (0)