add external path for images - add contact and avatar shortcode

config.toml.sample

@@ -9,6 +9,15 @@ theme = "landingpage-flex-hugo-for-noobs"
 [params]
 custom_css = ["css/custom.css"]  # can add other files in array and file in assets/css/
 # font = "Acme"  # a valid google font name, default Roboto, sets for entire site, can be specifically overridden
+# imagespath = ""  # prepended to any image filename otherwise /images is assumed.  Allow you to house images elsewhere like s3 bucket
+
+[params.contact]
+  # name = ""
+  # email = ""
+  # address = ""
+  # cell = "541-xxx-xxx"
+  # cell_image = "cell.jpg"
+  # avatar = "me.jpg"
 
 [params.navbar]
   #logo_text = "Will override site title"  # default is to use the site title
@@ -73,6 +82,8 @@ custom_css = ["css/custom.css"]  # can add other files in array and file in asse
   # hover_color ="purple"
   # hover_bg_color ="white"
 
+
+
 # TODO enable via shortcode
 [[params.social]]
     #title = "email"

layouts/partials/head/styles.html

@@ -49,7 +49,10 @@
  {{ with .hero }}
 
   {{ with .img }}
-  #hero {background-image: url("{{ . }}");}
+  {{ with $.Site.Params.imagespath }} {{ $.Scratch.Set "path" ( . ) }} {{ else }}{{ $.Scratch.Set "path" "/images/" }}{{ end }}
+  #hero {
+    background-image: url("{{ $.Scratch.Get "path" }}{{ . }}");
+  }
   {{ end }}
 
   {{ with .font }}

layouts/shortcodes/avatar.html

@@ -0,0 +1,5 @@
+<div class="box box--avatar">
+  {{ with .Get "link" }}<a href="{{.}}">{{ end }}
+  <img src="{{ .Page.Params.imagespath }}{{ .Get "filename" }}"/>
+  {{ with .Get "link" }}</a>{{ end }}
+</div>

layouts/shortcodes/box-item.html

@@ -1,3 +0,0 @@
-<div class="box box-{{ .Get 0 }}">
-{{ .Inner }}
-</div>

layouts/shortcodes/box.html

@@ -1,3 +1,3 @@
-<div class="box box-{{ .Get 0 }}">
+<div class="box box--{{ .Get 0 }}">
 {{ .Inner }}
 </div>

layouts/shortcodes/contact.html

@@ -0,0 +1,23 @@
+{{ with .Site.Params.contact }} {{ $path := "/images/" }} {{ with $.Site.Params.imagespath }} {{ $path := ( . ) }}{{ end }}
+<div class="box box__contact">
+	<img class="avatar" src="{{ $path }}{{ .avatar | default " avatar.jpg "}}"/>
+	<div class="box box__contact-info">
+		<h4>{{ .name }}</h4>
+		<div class="box">
+			<a class="btn" onClick="javascript:window.open('mailto:{{ .email }}', 'mail');event.preventDefault()" href="{{ .email }}">
+				<i class="fa fa-envelope-o fa-fw"></i>
+			</a>
+			<div id="cell" class="btn clickable">
+				<i class="fa fa-mobile fa-fw"></i>
+			</div>
+			{{ if .cell_image | or .cell }}
+			{{ if .cell_image }}
+			<img id="cell-number" class="hide" src="{{ $path }}{{ .cell_image }}"/>
+			{{ else }}
+			<div id="cell-number" class="hide">{{ .cell }}</div>
+			{{ end }}
+			{{ end }}
+		</div>
+	</div>
+</div>
+{{ end }}

layouts/shortcodes/image.html

@@ -1,24 +1,13 @@
-
+{{ $path := "/images/" }}
-<figure class="box box--column box--image"
+{{ with $.Site.Params.imagespath }} {{ $path := ( . ) }}{{ end }}
-{{ with .Get "position" }}class="{{.}}"{{ end }}>
+<div class="box box--column box--image">
+{{ with .Get "title" }}
+  <div class="box__title">{{ . }}</div>
+  {{ end }}
 {{ with .Get "link"}}<a href="{{.}}">{{ end }}
-
+<img src="{{ $path }}{{ .Get "filename" }}" />
-<img src="{{ .Page.Params.imagespath }}{{ .Get "filename" }}"{{ if or (.Get "alt") (.Get "caption") }}alt="{{ with .Get "alt"}}{{.}}{{else}}{{ .Get "caption" }}{{ end }}"{{ end }} />
 {{ if .Get "link"}}</a>{{ end }}
-
+{{ with .Get "caption"}}
-{{ if or (or (.Get "title") (.Get "caption")) (.Get "attr")}}
+<div class="box__caption">{{ . }}</div>
-
-<figcaption>
-
-{{ if or (.Get "caption") (.Get "attr")}}<p>
-{{ .Get "caption" }}
-{{ with .Get "attrlink"}}<a href="{{.}}"> {{ end }}
-{{ .Get "attr" }}
-{{ if .Get "attrlink"}}</a> {{ end }}
-</p> {{ end }}
-
-</figcaption>
-
 {{ end }}
-
+</div>
-</figure>

layouts/shortcodes/imagebreak.html

@@ -1 +0,0 @@
-<div class="imagebreak"></div>

static/css/base.css

@@ -10,6 +10,7 @@
 }
 
 /* regions */
+
 body {
   display: flex;
   color: black;
@@ -30,6 +31,7 @@ body {
 }
 
 /* mobile first column */
+
 .section__container {
   display: flex;
   width: 95%;
@@ -42,6 +44,7 @@ body {
 }
 
 /* Typography */
+
 body {
   font-size: 12px;
 }
@@ -93,12 +96,14 @@ li {
 }
 
 /* elements */
+
 nav,
 ul {
   list-style: none;
 }
 
-a {
+a,
+.clickable {
   color: inherit;
   opacity: 0.8;
   outline: 0;
@@ -106,7 +111,8 @@ a {
   cursor: pointer;
 }
 
-a:hover {
+a:hover,
+.clickable:hover {
   opacity: 1;
 }
 
@@ -139,6 +145,7 @@ figcaption {
 }
 
 /* divider */
+
 hr {
   width: 50%;
   height: 0;
@@ -168,3 +175,7 @@ hr {
   flex-wrap: wrap;
   justify-content: flex-start;
 }
+
+.hide {
+  visibility: hidden;
+}

static/css/navbar.css

@@ -41,7 +41,7 @@
 
 .nav-bar__menu {
   overflow-y: scroll;
-  max-height: 80vh;
+  max-height: 100vh;
 }
 
 .hide-menu {
@@ -68,7 +68,7 @@
   color: white;
 }
 
-@media only screen and (min-width: 850px) {
+@media only screen and (min-width: 860px) {
   .nav-bar {
     flex-direction: row;
     flex-wrap: nowrap;

static/css/page.css

@@ -81,7 +81,7 @@
   flex-wrap: wrap;
   align-content: center;
   justify-content: center;
-  padding: 0.5em;
+  /*padding: 0.0em;*/
 }
 
 .box--column {
@@ -91,6 +91,7 @@
 
 .box--image {
   max-width: 450px;
+  padding: 0.5em;
 }
 
 .box--headline {
@@ -103,6 +104,24 @@
   padding: 1rem;
 }
 
+.box--avatar  {
+  flex
+}
+
+
+.box--avatar > img,
+img.avatar {
+  object-fit: cover;
+  border-radius: 50%;
+  width: 100px;
+  height: 100px;
+  padding: .5em;
+}
+
+.box--avatar > a {
+  opacity: 1;
+}
+
 .box__embed {
   /*height: 100vh;*/
   width: 100%;
@@ -113,6 +132,19 @@
   align-items: center;
 }
 
+
+.box__contact-info > * {
+  padding: 0.1em;
+  align-self: center;
+}
+
+.box__contact-info > * > * {
+    margin : 0.2em;
+    align-self: center;
+}
+
+
+
 /*turn off default bullets*/
 .box--gallery {
   list-style: none;

static/css/responsive.css

@@ -23,6 +23,10 @@
   .section__container {
     max-width: 1200px;
   }
+  /* help with centering content with hidden phone number */
+  .box__contact {
+    margin-left: 6em;
+  }
 }
 
 @media only screen and (min-device-width: 1200px) and (max-device-width: 1800px) {

static/js/page.js

@@ -25,6 +25,10 @@ $('a[href*="#"]:not([href="#"])').click(function () {
 
 }());
 
+// using an image for phone and toggle hide it
+$('#cell').click(function () { $('#cell-number').toggleClass("hide"); });
+// $('#phone').click(function () { alert('phone clicked'); return false; });
+
 // hero resizer
 function heroResize(bfr = 15) {
   var h = $(window).height(),