ImageFlow for Hugo

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

  • Example:
  • wallpaper_brown.pngwallpaper_colors.pngwallpaper_green.pngwallpaper_orange.pngwallpaper_various.pngwallpaper_yellow.png
  • 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 }}
    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.


    ImageFlow has been created by Finn Rudolf


    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: