ImageFlow for Hugo

ImageFlow for Hugo

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

  • Example:
  • wallpaper_green.png wallpaper_red.png wallpaper_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 := .Get "path" -}}
    {{- $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 path="/static/imageflow/imageflow4hugo" 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 the purchase of a license under:

comments powered by Disqus