feat: update image paths to use static template tag and enhance Open …

…Graph/Twitter meta tags for blog detail pages
ridwaanhall · Jan 28, 2025 · 220725b · 220725b
1 parent 8b2f794
commit 220725b
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 22 deletions.
diff --git a/blog/templates/blog/blog.html b/blog/templates/blog/blog.html
@@ -23,7 +23,7 @@ <h2 class="subtitle">Berikut adalah daftar artikel blog yang tersedia.</h2>
                         {% if blog.thumbnail %}
                         <div class="card-image">
                             <figure class="image is-1by1">
-                                <img src="{{ blog.thumbnail }}" alt="{{ blog.title }}" loading="lazy" />
+                                <img src="{% static blog.thumbnail %}" alt="{{ blog.title }}" loading="lazy" />
                             </figure>
                         </div>
                         {% endif %}

diff --git a/blog/templates/blog/blog_detail.html b/blog/templates/blog/blog_detail.html
@@ -35,7 +35,7 @@ <h1 class="title mb-4">{{ blog.title }}</h1>
             <div class="card">
                 <div class="card-image">
                     <figure class="image is-16by9">
-                        <img src="{{ blog.image }}" alt="{{ blog.title }}" loading="lazy" />
+                        <img src="{% static blog.image %}" alt="{{ blog.title }}" loading="lazy" />
                     </figure>
                 </div>
             </div>
@@ -54,7 +54,7 @@ <h4 class="title is-4 mb-4">Artikel Lainnya</h4>
                             <!-- Image Column (4/12) -->
                             <div class="column is-4-desktop is-4-tablet is-4-mobile">
                                 <figure class="image is-16by9">
-                                    <img src="{{ other.image }}" 
+                                    <img src="{% static other.image %}" 
                                          alt="{{ other.title }}" 
                                          loading="lazy"
                                     >

diff --git a/staticfiles/site.webmanifest b/staticfiles/site.webmanifest
@@ -1,6 +1,6 @@
 {
-    "name": "Presensi Generator",
-    "short_name": "LupaPresensi",
+    "name": "Lumina",
+    "short_name": "Lumina",
     "icons": [
         {
             "src": "/static/icon-16x16.png",

diff --git a/templates/base.html b/templates/base.html
@@ -42,24 +42,50 @@
         <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css" />
 
         <!-- Open Graph (Social Sharing) -->
-        <meta property="og:title" content="Lumina: Generator Kode Presensi Otomatis" />
-        <meta property="og:description" content="Generator kode presensi otomatis. Atasi masalah lupa presensi dengan cepat dan mudah. Hasilkan kode presensi baru yang siap pakai dalam hitungan detik." />
-        <meta property="og:image" content="{% static 'img/lumina-16-9-191-1.webp' %}" />
-        <meta property="og:image:width" content="1200" />
-        <meta property="og:image:height" content="630" />
-        <meta property="og:image:alt" content="Lumina: Generator Kode Presensi Otomatis" />
-        <meta property="og:url" content="{% url 'absen-disini' %}" />
-        <meta property="og:type" content="website" />
-        <meta property="og:site_name" content="Lumina" />
-        <meta property="og:locale" content="id_ID" />
+        {% if request.resolver_match.url_name == 'blog-detail' %}
+            <meta property="og:title" content="{{ blog.title }}" />
+            <meta property="og:description" content="{{ blog.intro }}" />
+            <meta property="og:image" content="{% static blog.image %}" />
+            <meta property="og:image:width" content="1792" />
+            <meta property="og:image:height" content="1024" />
+            <meta property="og:image:alt" content="{{ blog.title }}" />
+            <meta property="og:url" content="{% og_url %}" />
+            <meta property="og:type" content="article" />
+            <meta property="og:site_name" content="Lumina" />
+            <meta property="og:locale" content="id_ID" />
+            <meta property="article:published_time" content="{{ blog.date }}" />
+            <meta property="article:author" content="ridwaanhall" />
+            <meta property="article:section" content="Blog" />
+            <meta property="article:tag" content="{% for tag in blog.tags %}{{ tag.name }}{% if not forloop.last %}, {% endif %}{% endfor %}" />
+        {% else %}
+            <meta property="og:title" content="Lumina: Generator Kode Presensi Otomatis" />
+            <meta property="og:description" content="Generator kode presensi otomatis. Atasi masalah lupa presensi dengan cepat dan mudah. Hasilkan kode presensi baru yang siap pakai dalam hitungan detik." />
+            <meta property="og:image" content="{% static 'img/lumina-16-9-191-1.webp' %}" />
+            <meta property="og:image:width" content="1200" />
+            <meta property="og:image:height" content="630" />
+            <meta property="og:image:alt" content="Lumina: Generator Kode Presensi Otomatis" />
+            <meta property="og:url" content="{% og_url %}" />
+            <meta property="og:type" content="website" />
+            <meta property="og:site_name" content="Lumina" />
+            <meta property="og:locale" content="id_ID" />
+        {% endif %}
 
         <!-- Twitter Card (Social Sharing) -->
-        <meta name="twitter:card" content="summary_large_image" />
-        <meta name="twitter:title" content="Lumina: Generator Kode Presensi Otomatis" />
-        <meta name="twitter:description" content="Generator kode presensi otomatis. Atasi masalah lupa presensi dengan cepat dan mudah. Hasilkan kode presensi baru yang siap pakai dalam hitungan detik." />
-        <meta name="twitter:image:src" content="{% static 'img/lumina-16-9-191-1.webp' %}" />
-        <meta name="twitter:site" content="@ridwaanhall" />
-        <meta name="twitter:creator" content="@ridwaanhall" />
+        {% if request.resolver_match.url_name == 'blog-detail' %}
+            <meta name="twitter:card" content="summary_large_image" />
+            <meta name="twitter:title" content="{{ blog.title }}" />
+            <meta name="twitter:description" content="{{ blog.intro }}" />
+            <meta name="twitter:image:src" content="{% static blog.image %}" />
+            <meta name="twitter:site" content="@ridwaanhall" />
+            <meta name="twitter:creator" content="@ridwaanhall" />
+        {% else %}
+            <meta name="twitter:card" content="summary_large_image" />
+            <meta name="twitter:title" content="Lumina: Generator Kode Presensi Otomatis" />
+            <meta name="twitter:description" content="Generator kode presensi otomatis. Atasi masalah lupa presensi dengan cepat dan mudah. Hasilkan kode presensi baru yang siap pakai dalam hitungan detik." />
+            <meta name="twitter:image:src" content="{% static 'img/lumina-16-9-191-1.webp' %}" />
+            <meta name="twitter:site" content="@ridwaanhall" />
+            <meta name="twitter:creator" content="@ridwaanhall" />
+        {% endif %}
 
         <!-- Application and Theme -->
         <meta name="application-name" content="Lumina" />
@@ -77,7 +103,7 @@
                 "@context": "https://schema.org",
                 "@type": "WebSite",
                 "name": "Lumina",
-                "url": "{% url 'absen-disini' %}",
+                "url": "{% og_url %}",
                 "description": "Generator kode presensi otomatis. Atasi masalah lupa presensi dengan cepat dan mudah.",
                 "image": "{% static 'img/lumina-16-9-191-1.webp' %}",
                 "datePublished": "2025-01-26",