From bc67ca11873afe2165e6b08cf38dd5e3a3fa735f Mon Sep 17 00:00:00 2001
From: JY Hsu <hsujoyao@gmail.com>
Date: Sat, 19 Oct 2024 01:51:40 +0900
Subject: [PATCH] Add project image (#987)

Co-authored-by: Emruz Hossain <hossainemruz@gmail.com>
---
 assets/styles/components/cards.scss |  9 +++++
 layouts/partials/cards/project.html | 56 ++++++++++++++++++-----------
 2 files changed, 44 insertions(+), 21 deletions(-)

diff --git a/assets/styles/components/cards.scss b/assets/styles/components/cards.scss
index c1c0490b5..d74110eca 100644
--- a/assets/styles/components/cards.scss
+++ b/assets/styles/components/cards.scss
@@ -9,6 +9,11 @@
     box-shadow: $box-shadow;
     border: 1px solid get-light-color('bg-primary');
     @include transition();
+    .card-img-top {
+      transform: scale(1.2);
+      object-fit: cover;
+      @include transition();
+    }
   }
 
   .card-head {
@@ -17,6 +22,10 @@
     overflow: hidden;
   }
 
+  .card-title {
+    font-size: large;
+  }
+
   .card-body {
     text-align: left;
   }
diff --git a/layouts/partials/cards/project.html b/layouts/partials/cards/project.html
index 6f193450b..1d1c83a42 100644
--- a/layouts/partials/cards/project.html
+++ b/layouts/partials/cards/project.html
@@ -4,34 +4,48 @@
 >
   <div class="card mt-1">
     <div class="card">
-      <a class="card-header" href="{{ if .repo }}{{ .repo }}{{ else if .url }}{{ .url }}{{ else }}javascript:void(0){{ end }}" {{ if or .repo .url }}target="_blank" rel="noopener"{{ end }}>
-        <div>
-          <div class="d-flex">
-            {{ if .logo }}
+      <a href="{{ if .repo }}{{ .repo }}{{ else if .url }}{{ .url }}{{ else }}javascript:void(0){{ end }}" {{ if or .repo .url }}target="_blank" rel="noopener"{{ end }}>
+        {{ if .image }}
+        <div class="card-head">
+          {{ $imageImage:= resources.Get .image}}
+          {{ if $imageImage }}
+            {{/*  svg don't support "Fit" operation   */}}
+            {{ if ne $imageImage.MediaType.SubType "svg" }}
+              {{ $imageImage = $imageImage.Fit "1000x1000" }}
+            {{ end }}
+            <img class="card-img-top" src="{{ $imageImage.RelPermalink }}" alt="{{ .name }}" />
+          {{ end }}
+        </div>
+        {{ end }}
+        <div class="card-header">
+          <div>
+            <div class="d-flex">
+              {{ if .logo }}
 
-              {{ if eq (len (findRE ".*/.*" .logo) ) 0 }}
+                {{ if eq (len (findRE ".*/.*" .logo) ) 0 }}
 
-                <i style="padding-right: 0.25em" class="{{.logo}} h4"></i>
+                  <i style="padding-right: 0.25em" class="{{.logo}} h4"></i>
 
-              {{ else }}
+                {{ else }}
 
-                {{ $logoImage:= resources.Get .logo}}
-                  {{ if $logoImage }}
-                    {{/*  svg don't support "Fit" operation   */}}
-                    {{ if ne $logoImage.MediaType.SubType "svg" }}
-                      {{ $logoImage = $logoImage.Fit "24x24" }}
+                  {{ $logoImage:= resources.Get .logo}}
+                    {{ if $logoImage }}
+                      {{/*  svg don't support "Fit" operation   */}}
+                      {{ if ne $logoImage.MediaType.SubType "svg" }}
+                        {{ $logoImage = $logoImage.Fit "24x24" }}
+                      {{ end }}
+                      <img class="card-img-xs" src="{{ $logoImage.RelPermalink }}" alt="{{ .name }}" />
                     {{ end }}
-                    <img class="card-img-xs" src="{{ $logoImage.RelPermalink }}" alt="{{ .name }}" />
                   {{ end }}
-                {{ end }}
 
-            {{ end }}
-            
-            <h5 class="card-title mb-0">{{ .name }}</h5>
-          </div>
-          <div class="sub-title">
-            <span>{{ .role }}</span>
-            <span>{{ .timeline }}</span>
+              {{ end }}
+              
+              <h5 class="card-title mb-0">{{ .name }}</h5>
+            </div>
+            <div class="sub-title">
+              <span>{{ .role }}</span>
+              <span>{{ .timeline }}</span>
+            </div>
           </div>
         </div>
       </a>