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.pngwallpaper_red.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 }}
      </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 the purchase of a license under: http://finnrudolph.de/ImageFlow/Download


comments powered by Disqus