One of the first things to do when you want to create a static blog or website is to set uo the tool chain to get it out of the way. We will start with simple image insertion workflow.
/layouts/shortcodes/img.html
../../static/images/
to store images in default image directory{{< img src="${imageFileName}" alt="${imageFileName}" >}}
If we want to insert an image into *.markdown post files we can do the following:
../../static/images
folder and insert a markdown-formatted image link into your document.Save the snippet below as /layouts/shortcodes/img.html
<!-- image -->
<div class="row">
<div class="three columns"> </div>
<div class="six columns">
<figure {{ with .Get "class" }}class="{{.}}"{{ end }} >
{{ with .Get "link"}}<a href="{{.}}">{{ end }}
<!-- u-max-full-width class added for Skeleton sizing -->
<img src="{{ .Site.BaseURL }}/images/{{ .Get "src" }}" {{ if or (.Get "alt") (.Get "caption") }}alt="{{ with .Get "alt"}}{{.}}{{else}}{{ .Get "caption" }}{{ end }}"{{ end }} class="u-max-full-width"/>
{{ if .Get "link"}}</a>{{ end }}
{{ if or (or (.Get "title") (.Get "caption")) (.Get "attr")}}
<figcaption>{{ if isset .Params "title" }}
<h4>{{ .Get "title" }}</h4>{{ end }}
{{ 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 }}
</figure>
</div>
<div class="three columns"> </div>
</div>
<!-- image -->