Was ich so treibe...

Uli's IT-Blog - Konzeption, Entwicklung, Betrieb

Fotogallerie für Octopress

Zur Illustration der CentOS-Installation benötige ich eine Fotogallerie in meiner Octopress-Installation. In diesem Artikel beschreibe ich das Vorgehen.

Neues Plugin: octopress-gallery

Ich verwende das Plugin Octopress-Gallery zur Anzeige der Fotogallerie.

Vorbereitungen

Pfad zur Octopress-Installation: OP=/home/UliHeller/octopress

Grundinstallation

  • Auschecken: git clone https://github.com/yortz/octopress_gallery.git
  • Kopieren
    • cp octopress_gallery/plugins/gallery_tag.rb "${OP}/plugins/."
    • cp octopress_gallery/plugins/mini_magick.rb "${OP}/plugins/."
  • Erweitern von “${OP}/Gemfile”: Neue Zeile gem 'mini_magick'
  • Installieren der Zusatz-Gems: cd "${OP}"; bundle install

Bilder ablegen

  • mkdir "${OP}/sources/images/galleries"
  • mkdir "${OP}/sources/images/galleries/test"
  • cp *.jpg "${OP}/sources/images/galleries/test"

Gallerie konfigurieren

_config.yml

1
2
3
4
5
6
7

mini_magick:
    test_thumbnail:
      source: images/galleries/test
      destination: images/galleries/test/thumbs
      commands:
        - thumbnail: "64x48^"
        - crop: "64x48-0x0"

Gallerie in Artikel “anziehen”

Diese Zeile muß in einem Artikel auftauchen:

{{ 'test' | image_list }}

Hübschere Präsentation mit Fotorama

Die Präsentation der Gallerie ist in der Grundversion sehr schlicht. Durch die Verwendung von Fotorama wird das deutlich hübscher.

JQuery und Fotorama runterladen und ablegen

  • mkdir ${OP}/source/javascripts/fotorama
  • wget http://code.jquery.com/jquery-1.10.2.min.js
  • mv jquery-1.10.2.min.js ${OP}/source/javascripts/fotorama/.

Fotorama runterladen und ablegen

  • wget http://fotorama.s3.amazonaws.com/4.2.3/fotorama-4.2.3.zip
  • mv fotorama-4.2.3.zip fotorama-4.2.3.zip.gz
  • gzip -d fotorama-4.2.3.zip.gz
  • unzip -d tmp fotorama-4.2.3.zip
  • mv tmp/fotorama-4.2.3/foto* ${OP}/source/javascripts/fotorama/.
  • rm -rf tmp

Anpassungen an plugins/gallery_tag.rb

Anpassungen an plugins/gallery_tag.rb 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

diff --git a/plugins/gallery_tag.rb b/plugins/gallery_tag.rb
index 6dc0c14..b2d8037 100644
--- a/plugins/gallery_tag.rb
+++ b/plugins/gallery_tag.rb
@@ -4,14 +4,20 @@ module ImageList
   def image_list( name )
    unless name == nil
     list = Array.new
+    list << %Q{<script src="/javascripts/fotorama/jquery-1.10.2.min.js"></script>}
+    list << %Q{<link href="/javascripts/fotorama/fotorama.css" rel="stylesheet">}
+    list << %Q{<script src="/javascripts/fotorama/fotorama.js"></script>}
+    list << %Q{<div class="fotorama" data-autoplay="3000" data-transition="dissolve" data-nav="thumbs" data-allow-full-screen="true" data-keyboard="true" data-w
     dir = Dir.new( File.join(BASE_DIR, name) )
-    dir.each do | d |
+    dir.sort.each do | d |
       image = File.basename(d, File.extname(d))
       unless d =~ /^\./ || d =~ /thumbs/
-        list << %Q{<a href="/images/galleries/#{name}/#{d}" rel="shadowbox" title="#{image}"><img src="/images/galleries/#{name}/thumbs/#{d}" /></a>}
+#        list << %Q{<a href="/images/galleries/#{name}/#{d}" rel="shadowbox" title="#{image}"><img src="/images/galleries/#{name}/thumbs/#{d}" /></a>}
+        list << %Q{<a href="/images/galleries/#{name}/#{d}"><img src="/images/galleries/#{name}/thumbs/#{d}"/></a>}
       end
     end
-    list.sort.join( "\n" )
+    list << %Q{</div> <!--class="fotorama" data-nav="thumbs" -->}
+#    list.sort.join( "\n" )
    end
   end
 end

Probleme

Liquid Exception: no implicit conversion of nil into String in atom.xml

Die Ausführung von rake generate bricht ab mit einer Fehlermeldung:

1
2
3
4
5
6
7
8
9
10

$ rake generate
## Generating Site with Jekyll
unchanged sass/print.scss
identical source/stylesheets/screen.css 
Configuration from .../dp-octopress/_config.yml
Building site: source -> public
Liquid Exception: no implicit conversion of nil into String in atom.xml
.../dp-octopress/plugins/gallery_tag.rb:10:in `join'
.../dp-octopress/plugins/gallery_tag.rb:10:in `image_list'
...

Abhilfe: Anpassungen an plugins/gallery_tag.rb vornehmen:

Anpassungen an plugins/gallery_tag.rb 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

diff --git a/plugins/gallery_tag.rb b/plugins/gallery_tag.rb
index f895040..6dc0c14 100644
--- a/plugins/gallery_tag.rb
+++ b/plugins/gallery_tag.rb
@@ -2,6 +2,7 @@ BASE_DIR = 'source/images/galleries'

 module ImageList
   def image_list( name )
+   unless name == nil
     list = Array.new
     dir = Dir.new( File.join(BASE_DIR, name) )
     dir.each do | d |
@@ -11,6 +12,7 @@ module ImageList
       end
     end
     list.sort.join( "\n" )
+   end
   end
 end

Comments