Added option to add image (e.g. portrait) on front page

neslinesli93 · May 13, 2020 · aba0ed2 · aba0ed2
1 parent c3bf34a
commit aba0ed2
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 1 deletion.
diff --git a/assets/scss/_main.scss b/assets/scss/_main.scss
@@ -100,6 +100,11 @@ img {
   &.right {
     margin-left: auto;
   }
+  &.circle {
+    border-radius: 50%;
+    max-width: 25%;
+    margin: auto;
+  }
 }
 
 figure {

diff --git a/exampleSite/config.toml b/exampleSite/config.toml
@@ -98,6 +98,10 @@ disableHugoGeneratorInject = false
     # Set to a valid CSS time value to change the animation duration, "0s" to disable.
     # logoCursorAnimate  = "2s"
 
+  [params.portrait]
+    path = "/img/image.jpg"
+    alt = "Portrait"
+
   # Social icons
   [[params.social]]
     name = "twitter"

diff --git a/layouts/index.html b/layouts/index.html
@@ -1,8 +1,11 @@
 {{ define "main" }}
     <main aria-role="main">
         <div>
-            <h1>{{ .Site.Title }}</h1>
+            {{ if .Site.Params.portrait.path }}
+               <img src="{{ .Site.Params.portrait.path }}" class="circle" alt="{{ .Site.Params.portrait.alt }}" />
+            {{ end }}
 
+            <h1>{{ .Site.Title }}</h1>
             {{- with .Site.Params.homeSubtitle }}
                 <p>{{.}}</p>
             {{- end }}