aboutsummaryrefslogtreecommitdiff
path: root/templates
diff options
context:
space:
mode:
Diffstat (limited to 'templates')
-rw-r--r--templates/detail/detail.html14
-rw-r--r--templates/home/schedule.html6
-rw-r--r--templates/messages/unauthorized.html2
-rw-r--r--templates/partials/datacard_render.html2
-rw-r--r--templates/partials/datacardcompact_render.html2
-rw-r--r--templates/partials/datacardwide_render.html2
-rw-r--r--templates/partials/sidebarwidecard_render.html2
-rw-r--r--templates/user_profile/single_anime_update.html4
-rw-r--r--templates/user_profile/user_anime_list.html4
-rw-r--r--templates/user_profile/user_profile.html2
-rw-r--r--templates/watch/watch.html14
11 files changed, 27 insertions, 27 deletions
diff --git a/templates/detail/detail.html b/templates/detail/detail.html
index 7866b97..e53dc77 100644
--- a/templates/detail/detail.html
+++ b/templates/detail/detail.html
@@ -23,7 +23,7 @@
<div style="background-image: url('{{ anime.cover }}')" class="relative bg-center bg-cover h-32 lg:h-96 my-4 rounded-lg" >
<div class="absolute inset-0" style="background: linear-gradient(45deg, rgb(8, 8, 8) 15%, transparent 60%), linear-gradient(0deg, rgb(8, 8, 8) 0%, transparent 60%);"></div>
<div class="w-4/12 lg:w-2/12 absolute px-2 lg:px-8 top-16 lg:top-48">
- <img src="{{ anime.image }}" alt="{{ anime.title.english }}" class="rounded-lg" class="w-full h-full rounded-lg object-cover"/>
+ <img loading="lazy" src="{{ anime.image }}" alt="{{ anime.title.english }}" class="rounded-lg" class="w-full h-full rounded-lg object-cover"/>
<a href="{% if anime.id %}{% url "watch:watch" anime.id %}?forward=detail{% endif %}" class="bg-{{ user.preferences.accent_colour }}-600 hover:bg-{{ user.preferences.accent_colour }}-700 text-white text-xs sm:text-sm font-bold py-1 px-2 sm:py-2 sm:px-4 rounded-lg my-2 flex flex-row items-center justify-center gap-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-4">
<path fill-rule="evenodd" d="M4.5 5.653c0-1.427 1.529-2.33 2.779-1.643l11.54 6.347c1.295.712 1.295 2.573 0 3.286L7.28 19.99c-1.25.687-2.779-.217-2.779-1.643V5.653Z" clip-rule="evenodd" />
@@ -330,7 +330,7 @@
{% for character in anime.characters %}
<div class="w-full lg:w-1/2 px-4 py-2 flex justify-between">
<div class="flex flex-row gap-2 items-center">
- <img src="{{ character.image }}" alt="{{ character.name }}" class="rounded-full w-16 h-16 object-cover"/>
+ <img loading="lazy"loading="lazy"src="{{ character.image }}" alt="{{ character.name }}" class="rounded-full w-16 h-16 object-cover"/>
<div class="flex flex-col gap-2">
<span class="font-bold">
{% if user.preferences.character_name_language == "romaji" %}
@@ -355,7 +355,7 @@
</span>
<span class="capitalize">{{ voice_actor.language }}</span>
</div>
- <img src="{{ voice_actor.image }}" alt="{{ voice_actor.name }}" class="rounded-full w-16 h-16 object-cover"/>
+ <img loading="lazy" src="{{ voice_actor.image }}" alt="{{ voice_actor.name }}" class="rounded-full w-16 h-16 object-cover"/>
</div>
{% endfor %}
</div>
@@ -368,7 +368,7 @@
<a href="{% url "watch:watch_episode" anime.id episode.number %}" class="w-full lg:w-1/2 px-2 mb-2 episode-item">
<div class="flex flex-col lg:flex-row w-full bg-neutral-950 rounded hover:bg-{{ user.preferences.accent_colour }}-600 hover:bg-opacity-30 p-2 gap-4">
<div class="w-full lg:w-auto lg:flex-shrink-0">
- <img src="{% if episode.metadata.image %}{{ episode.metadata.image }}{% else %}{{ anime.cover}}{% endif %}" alt="{{ episode.title }}" class="w-full lg:w-48 lg:h-28 object-cover rounded-lg"/>
+ <img loading="lazy" src="{% if episode.metadata.image %}{{ episode.metadata.image }}{% else %}{{ anime.cover}}{% endif %}" alt="{{ episode.title }}" class="w-full lg:w-48 lg:h-28 object-cover rounded-lg"/>
</div>
<div class="flex flex-col gap-2">
<h2 class="font-bold">{{episode.number}}. {% if episode.metadata.title %}{{ episode.metadata.title }}{% else %}{{ episode.title }}{% endif %}</h2>
@@ -462,7 +462,7 @@
{% for related in related|slice:":5" %}
{% if related.type == "MANGA" or related.type == "NOVEL" %}
<div onClick="showToast('{% if related.type == "MANGA" %}Manga{% else %}Novel{% endif %} reading is not supported yet!', false)" class="cursor-pointer flex flex-row w-full gap-4 bg-white bg-opacity-10 p-2 rounded hover:bg-{{ user.preferences.accent_colour }}-600 hover:bg-opacity-30">
- <img src="{{ related.image }}" alt="{{ related.title.english }}" class="rounded-lg w-12 h-16 object-cover"/>
+ <img loading="lazy" src="{{ related.image }}" alt="{{ related.title.english }}" class="rounded-lg w-12 h-16 object-cover"/>
<div class="flex flex-col gap-2">
<span class="font-bold flex gap-2 flex-row items-center">
{% if related.status == "Ongoing" %}
@@ -523,7 +523,7 @@
{% endif %}
{% if related.type == "TV" or related.type == "MOVIE" or related.type == "OVA" or related.type == "ONA" or related.type == "SPECIAL" or related.type == "TV_SHORT" %}
<a href="{% if not viaMal %}{% url 'watch:watch' related.id %}{% else %}{% url "watch:watch_via_zid" related.zid %}{% endif %}" class="flex flex-row w-full gap-4 bg-white bg-opacity-10 p-2 rounded hover:bg-{{ user.preferences.accent_colour }}-600 hover:bg-opacity-30">
- <img src="{{ related.image }}" alt="{{ related.title.english }}" class="rounded-lg w-12 h-16 object-cover"/>
+ <img loading="lazy" src="{{ related.image }}" alt="{{ related.title.english }}" class="rounded-lg w-12 h-16 object-cover"/>
<div class="flex flex-col gap-2">
<span class="font-bold flex gap-2 flex-row items-center">
{% if related.status == "Ongoing" %}
@@ -604,7 +604,7 @@
{% for recommendation in recommendations|slice:":10" %}
{% if recommendation.id or recommendation.zid %}
<a href="{% if not viaMal %}{% url 'watch:watch' recommendation.id %}{% else %}{% url "watch:watch_via_zid" recommendation.zid %}{% endif %}" class="flex flex-row w-full gap-4 bg-white bg-opacity-10 p-2 rounded hover:bg-{{ user.preferences.accent_colour }}-600 hover:bg-opacity-30">
- <img src="{{ recommendation.image }}" alt="{{ recommendation.title.english }}" class="rounded-lg w-12 h-16 object-cover"/>
+ <img loading="lazy" src="{{ recommendation.image }}" alt="{{ recommendation.title.english }}" class="rounded-lg w-12 h-16 object-cover"/>
<div class="flex flex-col gap-2 max-w-[calc(100%-4rem)]">
<span class="font-bold flex gap-2 flex-row items-center">
{% if recommendation.status == "Ongoing" %}
diff --git a/templates/home/schedule.html b/templates/home/schedule.html
index 257e9ff..9947727 100644
--- a/templates/home/schedule.html
+++ b/templates/home/schedule.html
@@ -85,7 +85,7 @@
</span>
</div>
</div>
- <img src="{{ anime.media.coverImage.medium }}" alt="{{ anime.media.title.romaji }}" class="rounded w-16 h-24" />
+ <img loading="lazy" src="{{ anime.media.coverImage.medium }}" alt="{{ anime.media.title.romaji }}" class="rounded w-16 h-24" />
</div>
</a>
{% endfor %}
@@ -126,7 +126,7 @@
</span>
</div>
</div>
- <img src="{{ next_airing.media.coverImage.medium }}" alt="{{ next_airing.media.title.romaji }}" class="rounded w-16 h-24" />
+ <img loading="lazy" src="{{ next_airing.media.coverImage.medium }}" alt="{{ next_airing.media.title.romaji }}" class="rounded w-16 h-24" />
</div>
</a>
{% endif %}
@@ -147,7 +147,7 @@
<div class="flex flex-col lg:flex-row gap-2">
{% for anime in items %}
<a href="{% url "watch:watch_episode" anime.mediaId anime.episode %}" class="flex flex-none bg-neutral-950 rounded p-2 gap-4 items-center max-w-96 w-full {% if anime.timeUntilAiring < 0 %}border-2 border-{{ user.preferences.accent_colour }}-600{% endif %}">
- <img src="{{ anime.media.coverImage.medium }}" alt="{{ anime.media.title.romaji }}" class="rounded w-16 h-24" />
+ <img loading="lazy" src="{{ anime.media.coverImage.medium }}" alt="{{ anime.media.title.romaji }}" class="rounded w-16 h-24" />
<div class="flex flex-col gap-1 max-w-[calc(100%-8rem)]">
<span class="truncate max-w-full overflow-hidden text-ellipsis whitespace-nowrap font-bold text-xl text-white">
{% if user.preferences.title_language == "english" and anime.media.title.english %}
diff --git a/templates/messages/unauthorized.html b/templates/messages/unauthorized.html
index 80c1132..5410d1f 100644
--- a/templates/messages/unauthorized.html
+++ b/templates/messages/unauthorized.html
@@ -3,7 +3,7 @@
{% block content %}
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-8 flex flex-col justify-center">
- <img src="{% static 'images/gun_point.gif' %}" alt="gun point" class="w-full lg:w-1/2 h-auto mx-auto"/>
+ <img loading="lazy" src="{% static 'images/gun_point.gif' %}" alt="gun point" class="w-full lg:w-1/2 h-auto mx-auto"/>
<h1 class="text-2xl font-bold text-center mt-4">
{% if not error %}
Hold it right there! Are you allowed to be here?
diff --git a/templates/partials/datacard_render.html b/templates/partials/datacard_render.html
index 309a523..73f08db 100644
--- a/templates/partials/datacard_render.html
+++ b/templates/partials/datacard_render.html
@@ -2,7 +2,7 @@
{% if not anime.status == "Not yet aired" or all %}
<a href="{% url "watch:watch" anime.id %}" class="w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/5 2xl:w-1/6 text-gray-500 p-1 sm:p-2 mb-4 hover:text-white flex flex-col anime-item opacity-0">
<div class="relative pt-[140%]">
- <img src="{{ anime.image }}" alt="{{ anime.title.english }}" class="absolute top-0 left-0 w-full h-full rounded-lg object-cover"/>
+ <img loading="lazy" src="{{ anime.image }}" alt="{{ anime.title.english }}" class="absolute top-0 left-0 w-full h-full rounded-lg object-cover"/>
</div>
<div class="mt-2 flex flex-col gap-1">
<span class="text-xs sm:text-sm font-bold flex gap-1 flex-row items-start">
diff --git a/templates/partials/datacardcompact_render.html b/templates/partials/datacardcompact_render.html
index 6303623..64f7517 100644
--- a/templates/partials/datacardcompact_render.html
+++ b/templates/partials/datacardcompact_render.html
@@ -3,7 +3,7 @@
<div class="w-full max-w-full px-2 mb-2 anime-item">
<a href="{% url 'watch:watch' anime.id %}">
<div class="flex flex-row bg-neutral-950 rounded hover:bg-{{ user.preferences.accent_colour }}-600 hover:bg-opacity-30 p-2 gap-4 items-center">
- <img src="{{ anime.image }}" alt="{{ anime.title.english }}" class="rounded-lg w-16 lg:w-12 h-24 lg:h-16 object-cover"/>
+ <img loading="lazy" src="{{ anime.image }}" alt="{{ anime.title.english }}" class="rounded-lg w-16 lg:w-12 h-24 lg:h-16 object-cover"/>
<div class="flex flex-col lg:flex-row gap-2 max-w-[calc(100%-6rem)] lg:items-center">
<h2 class="max-w-full text-xl font-bold text-transparent bg-clip-text truncate overflow-hidden text-ellipsis whitespace-nowrap" style="background: linear-gradient(-45deg, {% if anime.color %}{{ anime.color }}{% else %}white{% endif %}, white); -webkit-background-clip: text; background-clip: text;">
{% if user.preferences.title_language == "english" and anime.title.english %}
diff --git a/templates/partials/datacardwide_render.html b/templates/partials/datacardwide_render.html
index 15e0ff9..2b00fc3 100644
--- a/templates/partials/datacardwide_render.html
+++ b/templates/partials/datacardwide_render.html
@@ -4,7 +4,7 @@
<div class="w-full lg:w-1/2 px-2 mb-2 anime-item">
<div class="flex flex-row w-full bg-neutral-950 rounded hover:bg-{{ user.preferences.accent_colour }}-600 hover:bg-opacity-30 p-2 gap-4">
<div class="flex flex-col gap-2 min-w-32">
- <a href="{% url 'watch:watch' anime.id %}"><img src="{{ anime.image }}" alt="{{ anime.title.english }}" class="rounded-lg w-32 h-48 object-cover"/></a>
+ <a href="{% url 'watch:watch' anime.id %}"><img loading="lazy" src="{{ anime.image }}" alt="{{ anime.title.english }}" class="rounded-lg w-32 h-48 object-cover"/></a>
<div class="flex flex-row gap-2">
<a href="https://anilist.co/anime/{{ anime.id }}" target="_blank" class="text-xs font-bold bg-white bg-opacity-10 hover:bg-{{ user.preferences.accent_colour }}-600 hover:bg-opacity-30 rounded px-2 py-1">
<svg stroke="currentColor" fill="currentColor" stroke-width="0" role="img" viewBox="0 0 24 24" height="1.5rem" width="1.5rem" xmlns="http://www.w3.org/2000/svg"><path d="M24 17.53v2.421c0 .71-.391 1.101-1.1 1.101h-5l-.057-.165L11.84 3.736c.106-.502.46-.788 1.053-.788h2.422c.71 0 1.1.391 1.1 1.1v12.38H22.9c.71 0 1.1.392 1.1 1.101zM11.034 2.947l6.337 18.104h-4.918l-1.052-3.131H6.019l-1.077 3.131H0L6.361 2.948h4.673zm-.66 10.96-1.69-5.014-1.541 5.015h3.23z"></path></svg>
diff --git a/templates/partials/sidebarwidecard_render.html b/templates/partials/sidebarwidecard_render.html
index 7d7f8f9..1924cb2 100644
--- a/templates/partials/sidebarwidecard_render.html
+++ b/templates/partials/sidebarwidecard_render.html
@@ -1,6 +1,6 @@
{% for anime in data %}
<a href="{% url "watch:watch" anime.id %}" class="flex flex-row w-full gap-4 bg-white bg-opacity-10 p-2 rounded hover:bg-{{ user.preferences.accent_colour }}-600 hover:bg-opacity-30 animate__animated animate__fadeInUp">
- <img src="{{ anime.image }}" alt="{{ anime.title.english }}" class="rounded-lg w-32 h-auto object-cover"/>
+ <img loading="lazy" src="{{ anime.image }}" alt="{{ anime.title.english }}" class="rounded-lg w-32 h-auto object-cover"/>
<div class="flex flex-col gap-2">
<span class="text-sm font-bold flex gap-1 flex-row items-start">
{% if anime.status == "Ongoing" %}
diff --git a/templates/user_profile/single_anime_update.html b/templates/user_profile/single_anime_update.html
index eaba0d6..4efc200 100644
--- a/templates/user_profile/single_anime_update.html
+++ b/templates/user_profile/single_anime_update.html
@@ -3,7 +3,7 @@
{% endblock css %}
<section class="flex flex-col lg:flex-row mt-8 gap-4">
<section class="lg:w-1/4">
- <img class="w-full h-auto object-cover object-center rounded-lg" src="{{ mal_data.main_picture.large }}" alt="{{ mal_data.title }}">
+ <img loading="lazy" class="w-full h-auto object-cover object-center rounded-lg" src="{{ mal_data.main_picture.large }}" alt="{{ mal_data.title }}">
<h1 class="font-bold mt-4 border-b border-white border-opacity-10">Alternative Titles</h1>
<ul class="list-inside text-sm">
<li class="mt-2 ml-2"><span class="font-bold">Synonyms: </span>{{ mal_data.alternative_titles.synonyms|join:", " }}</li>
@@ -246,7 +246,7 @@
{% for related_anime in mal_data.related_anime %}
<div class="w-full md:w-1/3 px-4 mb-4">
<div class="flex gap-4 items-start">
- <img class="w-24 object-cover object-center rounded-lg" src="{{ related_anime.node.main_picture.medium }}" alt="{{ related_anime.node.title }}">
+ <img loading="lazy" loading="lazy"class="w-24 object-cover object-center rounded-lg" src="{{ related_anime.node.main_picture.medium }}" alt="{{ related_anime.node.title }}">
<div class="flex flex-col w-full">
<h3 class="font-bold uppercase">{{ related_anime.relation_type_formatted }}</h3>
<a class="hover:text-purple-600 break-words" href="{% url 'user_profile:user_profile' %}?category=update&mal_id={{ related_anime.node.id }}">{{ related_anime.node.title }}</a>
diff --git a/templates/user_profile/user_anime_list.html b/templates/user_profile/user_anime_list.html
index c31be13..75b7b89 100644
--- a/templates/user_profile/user_anime_list.html
+++ b/templates/user_profile/user_anime_list.html
@@ -1,7 +1,7 @@
{% if not request.user.mal_access_token %}
{% load static %}
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-8 flex flex-col justify-center">
- <img src="{% static 'images/added-to-list.gif' %}" alt="added to list" class="mx-auto"/>
+ <img loading="lazy" src="{% static 'images/added-to-list.gif' %}" alt="added to list" class="mx-auto"/>
<p class="text-gray-400 text-center mt-2 text-sm">
Your MAL list is not connected to your account yet. Connect your MAL account to see your list here.
</p>
@@ -72,7 +72,7 @@
<section class="flex flex-wrap justify-center mt-4 animate__animated animate__slideInUp">
{% for anime in mal_list %}
<a href="{% url 'user_profile:user_profile' %}?category=update&mal_id={{ anime.node.id }}" class="w-1/2 lg:w-1/4 xl:w-1/6 text-gray-500 px-1 mb-4 hover:text-white flex flex-col gap-2">
- <img src="{{ anime.node.main_picture.large }}" alt="{{ anime.node.title }}" class="rounded-lg w-56 h-72 mx-auto object-cover"/>
+ <img loading="lazy" src="{{ anime.node.main_picture.large }}" alt="{{ anime.node.title }}" class="rounded-lg w-56 h-72 mx-auto object-cover"/>
<div class="inline-flex gap-2 flex-wrap">
<span class="text-xs font-bold bg-white bg-opacity-10 p-1 rounded flex items-center gap-1 capitalize">
<svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg" class="mr-1">
diff --git a/templates/user_profile/user_profile.html b/templates/user_profile/user_profile.html
index 464e5ff..cd24e9f 100644
--- a/templates/user_profile/user_profile.html
+++ b/templates/user_profile/user_profile.html
@@ -3,7 +3,7 @@
<div class="bg-white bg-opacity-10 rounded-lg bg-center bg-cover h-96 relative mt-4" {% if request.user.discord_banner %} style="background-image: url('https://cdn.discordapp.com/banners/{{ request.user.discord_id }}/{{ request.user.discord_banner }}?size=1024')" {% else %} style="background-image: url('https://giffiles.alphacoders.com/132/13250.gif')" {% endif %}>
<div class="absolute inset-0" style="background: linear-gradient(45deg, rgb(8, 8, 8) 15%, transparent 60%), linear-gradient(0deg, rgb(8, 8, 8) 0%, transparent 60%);"></div>
<div class="flex flex-col items-center gap-2 absolute bottom-0 left-10">
- <img src="https://cdn.discordapp.com/avatars/{{ request.user.discord_id }}/{{ request.user.discord_avatar }}?size=256" alt="avatar" class="rounded-full w-24 h-24">
+ <img loading="lazy" src="https://cdn.discordapp.com/avatars/{{ request.user.discord_id }}/{{ request.user.discord_avatar }}?size=256" alt="avatar" class="rounded-full w-24 h-24">
<h1 class="text-2xl font-bold">
{% if request.user.preferences.display_guild_name_instead_of_username and request.user.discord_guild_name %}
{{ request.user.discord_guild_name }}
diff --git a/templates/watch/watch.html b/templates/watch/watch.html
index 7ee6347..034d635 100644
--- a/templates/watch/watch.html
+++ b/templates/watch/watch.html
@@ -82,7 +82,7 @@
<a href="{% url "watch:watch_episode" anime.id episode.number %}{% if request.GET.mode %}?mode={{ request.GET.mode }}{% endif %}{% if request.GET.mode and request.GET.provider %}&provider={{ request.GET.provider }}{% elif request.GET.provider %}?provider={{ request.GET.provider }}{% endif %}"
class="flex flex-row w-full gap-4 {% if episode.number == current_episode_number %}bg-{{ user.preferences.accent_colour }}-600{% elif episode.number in watched_episodes %}bg-{{ user.preferences.accent_colour }}-600 bg-opacity-20{% else %}bg-white bg-opacity-10{% endif %} p-2 rounded hover:bg-{{ user.preferences.accent_colour }}-600 hover:bg-opacity-30 mb-4" id="{% if episode.number == current_episode_number %}active-episode-grid{% endif %}">
<div class="w-32 h-18 flex-shrink-0">
- <img src="{{ episode.metadata.image }}" alt="Episode {{ episode.number }}" class="w-full h-full object-cover rounded" style="aspect-ratio: 16/9;">
+ <img loading="lazy" src="{{ episode.metadata.image }}" alt="Episode {{ episode.number }}" class="w-full h-full object-cover rounded" style="aspect-ratio: 16/9;">
</div>
<div class="flex flex-col justify-between flex-grow overflow-hidden">
<div>
@@ -216,7 +216,7 @@
{% endif %}
<div class="flex flex-col lg:flex-row w-full my-4 bg-neutral-950 rounded p-2 gap-4">
<div class="flex flex-col items-center lg:items-start gap-2 min-w-32">
- <img src="{{ anime.image }}" alt="{{ anime.title.english }}" class="rounded-lg w-56 h-72 object-cover"/>
+ <img loading="lazy" src="{{ anime.image }}" alt="{{ anime.title.english }}" class="rounded-lg w-56 h-72 object-cover"/>
<div class="flex flex-row gap-2 w-full">
<a href="https://anilist.co/anime/{{ anime.id }}" target="_blank" class="text-xs font-bold bg-{{ user.preferences.accent_colour }}-400 bg-opacity-30 flex-1 justify-center flex hover:bg-opacity-50 rounded px-2 py-1">
<svg stroke="currentColor" fill="currentColor" stroke-width="0" role="img" viewBox="0 0 24 24" height="1.5rem" width="1.5rem" xmlns="http://www.w3.org/2000/svg"><path d="M24 17.53v2.421c0 .71-.391 1.101-1.1 1.101h-5l-.057-.165L11.84 3.736c.106-.502.46-.788 1.053-.788h2.422c.71 0 1.1.391 1.1 1.1v12.38H22.9c.71 0 1.1.392 1.1 1.101zM11.034 2.947l6.337 18.104h-4.918l-1.052-3.131H6.019l-1.077 3.131H0L6.361 2.948h4.673zm-.66 10.96-1.69-5.014-1.541 5.015h3.23z"></path></svg>
@@ -535,7 +535,7 @@
{% for character in characters %}
<div class="w-full lg:w-1/2 p-2 flex justify-between">
<div class="flex flex-row gap-2 items-center">
- <img src="{{ character.image }}" alt="{{ character.name }}" class="rounded-full w-16 h-16 object-cover"/>
+ <img loading="lazy" src="{{ character.image }}" alt="{{ character.name }}" class="rounded-full w-16 h-16 object-cover"/>
<div class="flex flex-col gap-2">
<span class="font-bold">
{% if user.preferences.character_name_language == "romaji" %}
@@ -561,7 +561,7 @@
</span>
<span class="capitalize">{{ voice_actor.language }}</span>
</div>
- <img src="{{ voice_actor.image }}" alt="{{ voice_actor.name }}" class="rounded-full w-16 h-16 object-cover"/>
+ <img loading="lazy" src="{{ voice_actor.image }}" alt="{{ voice_actor.name }}" class="rounded-full w-16 h-16 object-cover"/>
</div>
{% endif %}
{% endfor %}
@@ -582,7 +582,7 @@
{% for related in related|slice:":5" %}
{% if related.type == "MANGA" or related.type == "NOVEL" %}
<div onClick="showToast('{% if related.type == "MANGA" %}Manga{% else %}Novel{% endif %} reading is not supported yet!', false)" class="cursor-pointer flex flex-row w-full gap-4 bg-white bg-opacity-10 p-2 rounded hover:bg-{{ user.preferences.accent_colour }}-600 hover:bg-opacity-30">
- <img src="{{ related.image }}" alt="{{ related.title.english }}" class="rounded-lg w-12 h-16 object-cover"/>
+ <img loading="lazy"src=" {{ related.image }}" alt="{{ related.title.english }}" class="rounded-lg w-12 h-16 object-cover"/>
<div class="flex flex-col gap-2">
<span class="font-bold flex gap-2 flex-row items-center">
{% if related.status == "Ongoing" %}
@@ -643,7 +643,7 @@
{% endif %}
{% if related.type == "TV" or related.type == "MOVIE" or related.type == "OVA" or related.type == "ONA" or related.type == "SPECIAL" or related.type == "TV_SHORT" %}
<a href="{% if not viaMal %}{% url 'watch:watch' related.id %}{% else %}{% url "watch:watch_via_zid" related.zid %}{% endif %}" class="flex flex-row w-full gap-4 bg-white bg-opacity-10 p-2 rounded hover:bg-{{ user.preferences.accent_colour }}-600 hover:bg-opacity-30">
- <img src="{{ related.image }}" alt="{{ related.title.english }}" class="rounded-lg w-12 h-16 object-cover"/>
+ <img loading="lazy" src="{{ related.image }}" alt="{{ related.title.english }}" class="rounded-lg w-12 h-16 object-cover"/>
<div class="flex flex-col gap-2">
<span class="font-bold flex gap-2 flex-row items-center">
{% if related.status == "Ongoing" %}
@@ -724,7 +724,7 @@
{% for recommendation in recommendations|slice:":10" %}
{% if recommendation.id or recommendation.zid %}
<a href="{% if not viaMal %}{% url 'watch:watch' recommendation.id %}{% else %}{% url "watch:watch_via_zid" recommendation.zid %}{% endif %}" class="flex flex-row w-full gap-4 bg-white bg-opacity-10 p-2 rounded hover:bg-{{ user.preferences.accent_colour }}-600 hover:bg-opacity-30">
- <img src="{{ recommendation.image }}" alt="{{ recommendation.title.english }}" class="rounded-lg w-12 h-16 object-cover"/>
+ <img loading="lazy" src="{{ recommendation.image }}" alt="{{ recommendation.title.english }}" class="rounded-lg w-12 h-16 object-cover"/>
<div class="flex flex-col gap-2 max-w-[calc(100%-4rem)]">
<span class="font-bold flex gap-2 flex-row items-center">
{% if recommendation.status == "Ongoing" %}