ImageFlow for Hugo

Hugo is a static site generator, whereas ImageFlow implements a nice interactive image gallery on-top of hugo’s infrastructure.

• Example:
• 

These are the steps to install ImageFlow via hugo’s shortcode mechanism:

1. Download ImageFlow and copy the source to the website repository’s static directory.

2. Create the file imageflow.html in the [your_development_dir]\layouts\shortcodes directory and fill in declarations as stated further down in this post.

   ImageFlow Shortcode declaration:

   {{- $pathURL := .Get "pathURL" -}}
   
   {{- $path := (printf "%s%s" "/static" $pathURL) -}}
   {{- $files := readDir $path -}}
   
   <!-- This includes the ImageFlow CSS and JavaScript -->
   <link rel="stylesheet" href="/imageflow/imageflow.css" type="text/css" />
   <script type="text/javascript" src="/imageflow/imageflow.js"></script>
   
   <!-- This is all the XHTML ImageFlow needs -->
   <div class="content">
   <div id="myImageFlow" class="imageflow">
   	{{- range $files }}
   	<img src="{{ $pathURL }}{{ .Name | relURL }}"
   		longdesc="{{ $pathURL }}{{ .Name | relURL }}" width="400" height="300" alt={{ .Name }} />
   	{{- end }}
   </div>
   </div>
   
   

3. Once finished, you can already start writing a blog article as usual. Within the markdown it is now possible to create the imageflow presentation just by adding one single line (a so called hugo shortcode):

   Example of a shortcode:

   {{\< imageflow pathURL="/imageflow/imageflow4hugo" \>}}
   
   

   Please make sure to copy a bunch of images down to the static directory as stated in the shortcode sequence.

That’s all.

Credits:

ImageFlow has been created by Finn Rudolf http://finnrudolph.de/ImageFlow

IMAGEFLOW LICENCE:

ImageFlow is licensed under a Creative Commons Attribution-Noncommercial 3.0 Unported License. This means you need the author’s permission to use ImageFlow on commercial websites. The commercial use requires to purchase a license under: http://finnrudolph.de/ImageFlow/Download