Was ich so treibe...

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

Statische Fotogallerie für Octopress

In /blog/2013/08/04/gallery habe ich beschrieben, wie ich meine Fotogallerie in Octopress einbinde. Leider zeigt sich, dass der dort verwendete Ansatz den ganzen Generierungsprozess ziemlich stark ausbremst.

Ziel dieses Artikels ist die Beschleunigung des Generierungsprozesses.

Problembeschreibung

Das Plugin Octopress-Gallery zur Anzeige der Fotogallerie konvertiert die Bilder automatisch in’s Thumbnail-Format. Es ist zwar ein Algorithmus eingebaut, der die Konvertierung der Bilder nur dann durchführen soll, wenn sich die Bilder geändert haben – er funktioniert aber leider nicht.

Lösungsansatz

  • Ich erzeuge ein Skript, welches die Konvertierung vornimmt
  • Das Skript selbst hat auch eine “Änderungserkennung”, d.h. es werden wirklich nur die gänderten Bilder neu konvertiert
  • Das Skript muß manuell ausgeführt werden
  • Die konvertierten Bilder liegen im Verzeichnis “source” und werden mit in Git gespeichert.

Als Konsequenz dieser Änderungen müssen noch:

  • Die Konvertierung von Octopress-Gallery muß abgeklemmt werden
  • Skalierte Bilder einbinden in die Gallerie

Umsetzung

Konvertierungsskript

Das Konvertierungsskript befindet sich auf GitHub

Abklemmen der alten Konvertierung

Die alte Konvertierung wird abgeklemmt, in dem

  • das MiniMagick-Plugin gelöscht wird
  • die MiniMagick-Konfiguration entfernt wird

MiniMagick-Plugin löschen

MiniMagick-Plugin entfernen 
1

rm -f plugins/mini_magick.rb

MiniMagick-Konfiguration entfernen

MiniMagick-Konfiguration entfernen 
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/_config.yml b/_config.yml
index 33ac290..7371444 100644
--- a/_config.yml
+++ b/_config.yml
@@ -100,23 +100,3 @@ google_analytics_tracking_id:
 
 # Facebook Like
 facebook_like: false
-
-mini_magick:
-    test_thumbnail:
-      source: images/galleries/test
-      destination: images/galleries/test/thumbs
-      commands:
-        - thumbnail: "64x48^"
-        - crop: "64x48-0x0"
-    centos_thumbnail:
-      source: images/galleries/centos
-      destination: images/galleries/centos/thumbs
-      commands:
-        - thumbnail: "64x48^"
-        - crop: "64x48-0x0"
-    centos59_thumbnail:
-      source: images/galleries/centos59
-      destination: images/galleries/centos59/thumbs
-      commands:
-        - thumbnail: "64x48^"
-        - crop: "64x48-0x0"

Skalierte Bilder einbinden

Hierzu muß die Datei plugins/gallery_tag.rb angepasst werden. Wir ändern dies so, dass

  • für die Thumbnails die kleinen Bilder unterhalb von …/thumbs verwendet werden
  • für die Standard-Anzeige die mittleren Bilder unterhalb von …/scaled verwendet werden
  • für die Großanzeige die originalen Bilder verwendet werden
Änderungen 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

diff --git a/plugins/gallery_tag.rb b/plugins/gallery_tag.rb
index 2e09f9b..8be9ff4 100644
--- a/plugins/gallery_tag.rb
+++ b/plugins/gallery_tag.rb
@@ -7,13 +7,13 @@ module ImageList
     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-width="80%" data-thumb-with="64" data-thumb-height="48">} # data-width="100%" data-thumb-width= data-thumb-height=
+    list << %Q{<div class="fotorama" data-autoplay="3000" data-transition="dissolve" data-nav="thumbs" data-allow-full-screen="true" data-keyboard="true" data-width="640" data-height="480" data-thumb-with="64" data-thumb-height="48">} # data-width="100%" data-thumb-width= data-thumb-height=
     dir = Dir.new( File.join(BASE_DIR, name) )
     dir.sort.each do | d |
       image = File.basename(d, File.extname(d))
       unless d =~ /^\./ || d =~ /thumbs/ || d =~ /scaled/ || d =~ /_md5/
 #        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}/scaled/#{d}"><img src="/images/galleries/#{name}/thumbs/#{d}"/></a>}
+        list << %Q{<a href="/images/galleries/#{name}/scaled/#{d}" data-full="/images/galleries/#{name}/#{d}" data-fit="scaledown"><img src="/images/galleries/#{name}/thumbs/#{d}" data-fit="scaledown"/></a>}
       end
     end
     list << %Q{</div> <!--class="fotorama" data-nav="thumbs" -->}

Comments