turn intro image into a partial, add ability to position intro image, add image for team page

Author: JugglerX

exampleSite/config.toml

@@ -3,7 +3,6 @@ themesDir = "themes"
 theme = "hugo-serif-theme"
 languageCode = "en-us"
 title = "Hugo Serif Theme"
-summaryLength = 10
 
 [module]
   [module.hugoVersion]

exampleSite/content/_index.md

@@ -3,7 +3,8 @@ title: 'Homepage'
 meta_title: 'Hugo Serif Theme'
 description: "Serif is a modern business theme for Hugo."
 intro_image: "images/illustrations/pointing.svg"
-intro_image_absolute: true
+intro_image_absolute: true # makes the image use css position: absolute; so it looks "offset". It's a visual effect that might not always look good depending on the image you use.
+intro_image_absolute_offset: "auto auto -100px -80px" # used to tweak the positioning of the absolute image if enabled above
 intro_image_hide_on_mobile: true
 ---
 

exampleSite/content/team/_index.md

@@ -1,10 +1,11 @@
 ---
 title: 'Team'
-# intro_image: "images/smartworks-coworking-cW4lLTavU80-unsplash.jpg"
-# intro_image_absolute: false
-# intro_image_hide_on_mobile: false
+intro_image: "images/illustrations/meditate.svg"
+intro_image_absolute: true
+intro_image_absolute_offset: "auto auto -148px -102px"
+intro_image_hide_on_mobile: false
 ---
 
 # Meet The Team
 
-Our team of qualified accountants can help your business at any stage.
+Our team of qualified accountants can help your business at any stage. 

exampleSite/static/images/illustrations/meditate.svg

@@ -7,13 +7,7 @@
       <div class="col-12 col-md-7 col-lg-6 order-2 order-md-1">
         {{ .Content }}
       </div>
-      {{ if .Params.intro_image }}
-      <div class="col-12 col-md-5 col-lg-6 order-1 order-md-2 position-relative">
-        <img
-          class="intro-image{{ if .Params.intro_image_absolute }} intro-image-absolute{{ end }}{{ if .Params.intro_image_hide_on_mobile }} intro-image-hide-mobile{{ end }}"
-          src="{{ .Params.intro_image | relURL }}" />
-      </div>
-      {{ end }}
+      {{ partial "intro-image.html" . }}
     </div>
   </div>
 </div>

exampleSite/static/images/illustrations/team.svg

@@ -10,13 +10,7 @@
         {{ partial "call.html" (dict "site" .Site "context" . "show_button" "true") }}
         {{ end }}
       </div>
-      {{ if .Params.intro_image }}
-      <div class="col-12 col-md-5 col-lg-6 order-1 order-md-2 position-relative">
-        <img alt={{ .Title }}
-          class="intro-image{{ if .Params.intro_image_absolute }} intro-image-absolute{{ end }}{{ if .Params.intro_image_hide_on_mobile }} intro-image-hide-mobile{{ end }}"
-          src="{{ .Params.intro_image | relURL }}" />
-      </div>
-      {{ end }}
+      {{ partial "intro-image.html" . }}
     </div>
   </div>
 </div>

layouts/_default/list.html

@@ -0,0 +1,10 @@
+{{ if .Params.intro_image }}
+<div class="col-12 col-md-5 col-lg-6 order-1 order-md-2 position-relative">
+  <img
+    alt="{{ .Title }}"
+    class="intro-image{{ if .Params.intro_image_absolute }} intro-image-absolute{{ end }}{{ if .Params.intro_image_hide_on_mobile }} intro-image-hide-mobile{{ end }}"
+    src="{{ .Params.intro_image | relURL }}" 
+    style="{{ if .Params.intro_image_absolute_offset }}inset: {{ .Params.intro_image_absolute_offset }};{{end}}"
+  />
+</div>
+{{ end }}

layouts/index.html

@@ -7,14 +7,7 @@
       <div class="col-12 col-md-7 col-lg-6 order-2 order-md-1">
         {{ .Content }}
       </div>
-      {{ if .Params.intro_image }}
-      <div class="col-12 col-md-5 col-lg-6 order-1 order-md-2 position-relative">
-        <img
-          alt={{ .Title }}
-          class="intro-image{{ if .Params.intro_image_absolute }} intro-image-absolute{{ end }}{{ if .Params.intro_image_hide_on_mobile }} intro-image-hide-mobile{{ end }}"
-          src="{{ .Params.intro_image | relURL }}" />
-      </div>
-      {{ end }}
+      {{ partial "intro-image.html" . }}
     </div>
   </div>
 </div>

layouts/partials/intro-image.html

@@ -7,14 +7,7 @@
       <div class="col-12 col-md-7 col-lg-6 order-2 order-md-1">
         {{ .Content }}
       </div>
-      {{ if .Params.intro_image }}
-      <div class="col-12 col-md-5 col-lg-6 order-1 order-md-2 position-relative">
-        <img
-          alt="{{ .Title }}"
-          class="intro-image{{ if .Params.intro_image_absolute }} intro-image-absolute{{ end }}{{ if .Params.intro_image_hide_on_mobile }} intro-image-hide-mobile{{ end }}"
-          src="{{ .Params.intro_image | relURL }}" />
-      </div>
-      {{ end }}
+      {{ partial "intro-image.html" . }}
     </div>
   </div>
 </div>