add external path for images - add contact and avatar shortcode

master
David Kebler 2017-03-29 19:58:42 -07:00
parent 11432d8916
commit ec30819693
14 changed files with 111 additions and 33 deletions

View File

@ -9,6 +9,15 @@ theme = "landingpage-flex-hugo-for-noobs"
[params] [params]
custom_css = ["css/custom.css"] # can add other files in array and file in assets/css/ 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 # 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] [params.navbar]
#logo_text = "Will override site title" # default is to use the site title #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_color ="purple"
# hover_bg_color ="white" # hover_bg_color ="white"
# TODO enable via shortcode # TODO enable via shortcode
[[params.social]] [[params.social]]
#title = "email" #title = "email"

View File

@ -49,7 +49,10 @@
{{ with .hero }} {{ with .hero }}
{{ with .img }} {{ 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 }} {{ end }}
{{ with .font }} {{ with .font }}

View File

@ -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>

View File

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

View File

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

View File

@ -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 }}

35
layouts/shortcodes/image.html Executable file → Normal file
View File

@ -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 "link"}}<a href="{{.}}">{{ end }} {{ with .Get "title" }}
<div class="box__title">{{ . }}</div>
<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 }}
{{ if or (or (.Get "title") (.Get "caption")) (.Get "attr")}}
<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 }} {{ end }}
{{ with .Get "link"}}<a href="{{.}}">{{ end }}
</figure> <img src="{{ $path }}{{ .Get "filename" }}" />
{{ if .Get "link"}}</a>{{ end }}
{{ with .Get "caption"}}
<div class="box__caption">{{ . }}</div>
{{ end }}
</div>

View File

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

View File

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

View File

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

View File

@ -81,7 +81,7 @@
flex-wrap: wrap; flex-wrap: wrap;
align-content: center; align-content: center;
justify-content: center; justify-content: center;
padding: 0.5em; /*padding: 0.0em;*/
} }
.box--column { .box--column {
@ -91,6 +91,7 @@
.box--image { .box--image {
max-width: 450px; max-width: 450px;
padding: 0.5em;
} }
.box--headline { .box--headline {
@ -103,6 +104,24 @@
padding: 1rem; 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 { .box__embed {
/*height: 100vh;*/ /*height: 100vh;*/
width: 100%; width: 100%;
@ -113,6 +132,19 @@
align-items: center; 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*/ /*turn off default bullets*/
.box--gallery { .box--gallery {
list-style: none; list-style: none;

View File

@ -23,6 +23,10 @@
.section__container { .section__container {
max-width: 1200px; 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) { @media only screen and (min-device-width: 1200px) and (max-device-width: 1800px) {

View File

@ -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 // hero resizer
function heroResize(bfr = 15) { function heroResize(bfr = 15) {
var h = $(window).height(), var h = $(window).height(),