Profile-Mode: Generate a resize image

if the image is present in `assets` directory.
- Resizing the image will reduce the size of a large image.
- Should improve image load time.
- Usage:
  - Add the image under assets directory.
  - Provide path in `profileMode.imageUrl`.
  - if image is located as `assets/images/image.png` mention `profileMode.imageUrl: images/image.png`.

1 files changed, 23 insertions, 1 deletions

diff --git a/layouts/partials/index_profile.html b/layouts/partials/index_profile.html
index 3851e715..1bb2079f 100644
--- a/layouts/partials/index_profile.html
+++ b/layouts/partials/index_profile.html
@@ -2,9 +2,31 @@
     {{- with site.Params.profileMode }}
     <div class="profile_inner">
         {{- if .imageUrl -}}
+        {{- $img := resources.Get .imageUrl }}
+        {{- if $img }}
+            {{- $processableFormats := (slice "jpg" "jpeg" "png" "tif" "bmp" "gif") -}}
+            {{- if hugo.IsExtended -}}
+                {{- $processableFormats = $processableFormats | append "webp" -}}
+            {{- end -}}
+            {{- $prod := (hugo.IsProduction | or (eq site.Params.env "production")) }}
+            {{- if and (in $processableFormats $img.MediaType.SubType) (eq $prod true)}}
+                {{- if (not (and (not .imageHeight) (not .imageWidth))) }}
+                    {{- $img = $img.Resize (printf "%dx%d" .imageWidth .imageHeight) }}
+                {{- else if .imageHeight }}
+                    {{- $img = $img.Resize (printf "x%d" .imageHeight) }}
+                {{ else if .imageWidth }}
+                    {{- $img = $img.Resize (printf "%dx" .imageWidth) }}
+                {{ else }}
+                    {{- $img = $img.Resize "150x150" }}
+                {{- end }}
+            {{- end }}
+            <img src="{{ $img.Permalink }}" alt="{{ .imageTitle | default "profile image" }}"
+                height="{{ .imageHeight | default 150 }}" width="{{ .imageWidth | default 150 }}" />
+        {{- else }}
         <img src="{{ .imageUrl | absURL }}" alt="{{ .imageTitle | default "profile image" }}"
             height="{{ .imageHeight | default 150 }}" width="{{ .imageWidth | default 150 }}" />
         {{- end }}
+        {{- end }}
         <h1>{{ .title | default site.Title | markdownify }}</h1>
         <span>{{ .subtitle | markdownify }}</span>
         {{- partial "social_icons.html" site.Params.socialIcons -}}
@@ -20,4 +42,4 @@
         {{- end }}
     </div>
     {{- end}}
-</div>
+</div>
\ No newline at end of file