added helper for images with thumbnails and captions

7 files changed, 56 insertions, 97 deletions

diff --git a/helpers/extra_image_helpers.rb b/helpers/extra_image_helpers.rb
new file mode 100644
index 0000000..9c92d3c
--- /dev/null
+++ b/helpers/extra_image_helpers.rb
@@ -0,0 +1,27 @@
+module ExtraImageHelpers
+
+  # creates a div with image link, thumbnail and caption
+  # TODO make this work for non-image assets (pdf on 'verein' page)
+  def image_with_thumb(name, options={})
+    caption = options.delete(:caption)
+    full_path  = "/img/#{name}"
+
+    thumb_name = options.delete(:thumbnail) || default_thumbnail_for(name)
+    thumb_path = "/img/#{thumb_name}"
+
+    # oh boy, padrino-helpers has problems with nested content_for... FIXME
+    thumb_tag   = image_tag(thumb_path, options)
+    image_link  = content_tag(:a, thumb_tag, href: full_path)
+    caption_tag = content_tag(:p, caption)
+
+    content_tag :div, [image_link, caption_tag].join("\n")
+  end
+
+  private
+
+  def default_thumbnail_for(image_name_with_ext)
+    name, ext = image_name_with_ext.split(".")
+    "#{name}_klein.#{ext}"
+  end
+
+end
diff --git a/source/img/cryptocon/cryptocon-flyer-klein.png b/source/img/cryptocon/cryptocon-flyer_klein.png
index da72e03..da72e03 100644
--- a/source/img/cryptocon/cryptocon-flyer-klein.png
+++ b/source/img/cryptocon/cryptocon-flyer_klein.png
diff --git a/source/img/cryptocon/cryptocon13-klein.jpg b/source/img/cryptocon/cryptocon13_klein.jpg
index e5dc14c..e5dc14c 100644
--- a/source/img/cryptocon/cryptocon13-klein.jpg
+++ b/source/img/cryptocon/cryptocon13_klein.jpg
diff --git a/source/img/sfppcb1-small.jpg b/source/img/sfppcb1_klein.jpg
index 0e63ebb..0e63ebb 100644
--- a/source/img/sfppcb1-small.jpg
+++ b/source/img/sfppcb1_klein.jpg
diff --git a/source/projekte.html.erb b/source/projekte.html.erb
index 6f6f3d8..9a98533 100644
--- a/source/projekte.html.erb
+++ b/source/projekte.html.erb
@@ -26,14 +26,10 @@
   <h3>
     CryptoCon13
   </h3>
-  <div class="imagecontent">
-    <a href="img/cryptocon/cryptocon-flyer.png" class="img"><img class="contentimage" src="img/cryptocon/cryptocon-flyer-klein.png" alt="CryptoCon13 Flyer"></a>
-    <p class="subtext">
-    Der Flyer der CryptoCon13
-    </p>
-  </div>
+  <%= image_with_thumb("cryptocon/cryptocon-flyer.png", caption: "Der Flyer der CryptoCon13", height: "200") %>
   <p>
-  Die CryptoCon13, eine Vortrags- und Workshopveranstaltung zum Thema Daten- und Kommunikationssicherheit fand vom 11. bis 14. April 2013 im sublab statt.Die Phantomspeisung ist die vegane Volxküche im sublab.<br>
+  Die CryptoCon13, eine Vortrags- und Workshopveranstaltung zum Thema Daten- und Kommunikationssicherheit fand vom 11. bis 14. April 2013 im sublab 
+  statt. Die Phantomspeisung ist die vegane Volxküche im sublab.<br>
   Mehr Infos gibt es auf der Projektseite:<br>
   <a href="/cryptocon13">Mehr zur CryptoCon13</a>
   </p>
@@ -41,12 +37,7 @@
   <h3>
     Phantomspeisung
   </h3>
-  <div class="imagecontent">
-    <a href="img/phantomspeisung_1.jpg" class="img"><img class="contentimage" src="img/phantomspeisung_1_klein.jpg" alt="Phantomspeisung im sublab"></a>
-    <p class="subtext">
-    Phantomspeisung im sublab
-    </p>
-  </div>
+  <%= image_with_thumb("phantomspeisung_1.jpg", caption: "Phantomspeisung im sublab") %>
   <p>
   Die Phantomspeisung ist die vegane Volxküche im sublab.<br>
   Seit 16. Oktober 2010 gibt es jeden Samstag ab 20 Uhr vegane Köstlichkeiten. Zubereitet werden diese von verschiedenen Kochteams aus dem sublab Dunstkreis.<br>
@@ -70,12 +61,7 @@
   <h3>
     Die Turmuhr
   </h3>
-  <div class="imagecontent">
-    <a href="/img/uhrwerk.jpg" class="img"><img class="contentimage" src="/img/uhrwerk_klein.jpg" alt="Die Steuerung der Aussenzeiger"></a>
-    <p class="subtext">
-    Die Turmuhr von innen
-    </p>
-  </div>
+  <%= image_with_thumb("uhrwerk.jpg", caption: "Die Turmuhr von innen") %>
   <p>
   Wir haben die Turmuhr des Westwerks wieder zum Laufen gebracht. Wenn du mehr darüber erfahren möchtest, dann komm doch einfach mal vorbei.
   </p>
@@ -83,16 +69,10 @@
   <h3>
     SFP
   </h3>
-  <div class="imagecontent">
-    <a href="img/sfppcb1.jpg" class="img"><img class="contentimage" src="http://sublab.org/img/sfppcb1-small.jpg" alt="Adapterplatine mit SFP"></a>
-    <p class="subtext">
-    SFP-Stacking Adapter
-    </p>
-  </div>
+  <%= image_with_thumb("sfppcb1.jpg", caption: "SFP-Stacking Adapater") %>
   <p>
   Wir haben für die <a href="http://h10010.www1.hp.com/wwpc/ca/en/sm/WF06b/12136296-12136298-12136298-12136298-12136326-12136328-29584727.html">HP2524</a>-Switche 
   im sublab eine Adapterplatine gebaut, mit der sich SFPs über den Stacking-Port ansteuern lassen.<br>
-  <!--	<a href="/sfp">Mehr zum SFP-Adapterprojekt</a>-->
   </p>
 
   <h3>
diff --git a/source/raeume.html.erb b/source/raeume.html.erb
index 76ad31c..c1d7cd1 100644
--- a/source/raeume.html.erb
+++ b/source/raeume.html.erb
@@ -8,92 +8,50 @@
   Hier findest du eine kurze Auflistung der Räume mit ihrem Zweck, ihrem Zweck und Zustand<br>
   </p>
 
-  <h3>
-    Lounge
-  </h3>
-  <div class="imagecontent">
-    <a href="img/lounge.jpg" class="img"><img class="contentimage" src="img/lounge_klein.jpg" alt="Die Bar"></a>
-    <p class="subtext">
-    Die Bar
-    </p>
-  </div>
+  <h3>Lounge</h3>
+  <%= image_with_thumb("lounge.jpg", caption: "Die Bar") %>
   <p>
-  Der mit abstand größte Raum des sublabs ist die Lounge. neben einer Bühne (ca. 5m x 3m) ist hier auch die Bar sowie mehrere Sitzecken und der Kickertisch zu finden.
+  Der mit abstand größte Raum des sublabs ist die Lounge. neben einer Bühne (ca. 5m x 3m) ist hier auch die Bar sowie mehrere 
+  Sitzecken und der Kickertisch zu finden.
   </p>
 
-  <h3>
-    Werkstatt
-  </h3>
-  <div class="imagecontent">
-    <a href="img/werkstatttisch.jpg" class="img"><img class="contentimage" src="img/werkstatttisch_klein.jpg" alt="Werkstatt"></a>
-    <p class="subtext">
-    Die Werkstatt
-    </p>
-  </div>
+  <h3>Werkstatt</h3>
+  <%= image_with_thumb("werkstatttisch.jpg", caption: "Die Werkstatt") %>
   <p>
   Wenn es etwas zu basteln, schrauben, messen oder löten gibt, dann ist die Werkstatt genau der richtige Ort zur Lösung des Problems.<br>
   Hier finden sich nicht nur Werkzeuge sondern auch Verbrauchsmaterialien wie Schrumpfschläuche, Widerstände, Platinen, ... <br>
   Aber Achtung: nicht alles was rumliegt ist Public Domain! Im Zweifelsfall bitte nachfragen.
   </p>
 
-  <h3>
-    Hacklab
-  </h3>
-  <div class="imagecontent">
-    <a href="img/hacklab.jpg" class="img"><img class="contentimage" src="img/hacklab_klein.jpg" alt="Hacklab"></a>
-    <p class="subtext">
-    Das Hacklab
-    </p>
-  </div>
+  <h3>Hacklab</h3>
+  <%= image_with_thumb("hacklab.jpg", caption: "Das Hacklab") %>
   <p>
   Der Seminarraum im sublab aka. Hacklab ist nüchtern eingerichtet. Hierhin zieht man sich zurück, wenn man in Ruhe an einem Projekt arbeiten will.<br>
   Hier hängt ein riesiges Whiteboard (ca. 1,5m x 3m) an der Wand.
   </p>
 
-  <h3>
-    Uhrenraum
-  </h3>
-  <div class="imagecontent">
-    <a href="img/uhrenraum.jpg" class="img"><img class="contentimage" src="img/uhrenraum_klein.jpg" alt="Uhrenraum"></a>
-    <p class="subtext">
-    Der Uhrenraum
-    </p>
-  </div>
+  <h3>Uhrenraum</h3>
+  <%= image_with_thumb("uhrenraum.jpg", caption: "Der Uhrenraum") %>
   <p>
   Der Uhrenraum beherbergt neben der Ansteuerung für die Außenuhr auch eine gemütliche Sitzecke.<br>
   Es ist der einzige Raum im sublab, in dem das Rauchen gestattet ist.
   </p>
 
-  <h3>
-    Büro
-  </h3>
-  <div class="imagecontent">
-    <a href="img/buero.jpg" class="img"><img class="contentimage" src="img/buero_klein.jpg" alt="Das Buero"></a>
-    <p class="subtext">
-    Der Büro
-    </p>
-  </div>
+  <h3>Büro</h3>
+  <%= image_with_thumb("buero.jpg", caption: "Das Büro") %>
   <p>
-  Hier werden die wegweisenden Entscheidungen des Vorstandes des Trägervereins sublab e.V. gefällt. Wer diesen Raum betritt, spürt die ganz besondere Atmosphäre sofort im gesamten Körper. (Spoiler: Es ist Jucken am ganzen Körper, weil hier mal Steinwolle gelagert wurde)
+  Hier werden die wegweisenden Entscheidungen des Vorstandes des Trägervereins sublab e.V. gefällt. Wer diesen Raum betritt, spürt die ganz 
+  besondere Atmosphäre sofort im gesamten Körper. (Spoiler: Es ist Jucken am ganzen Körper, weil hier mal Steinwolle gelagert wurde)
   </p>
 
-  <h3>
-    Lager
-  </h3>
-  <div class="imagecontent">
-    <a href="img/werkstattregal.jpg" class="img"><img class="contentimage" src="img/werkstattregal_klein.jpg" alt="Werkstatt"></a>
-    <p class="subtext">
-    Eines der Lagerregale (Werkstatt)
-    </p>
-  </div>
+  <h3>Lager</h3>
+  <%= image_with_thumb("werkstattregal.jpg", caption: "Eines der Lagerregale (Werkstatt)") %>
   <p>
   Es gibt im sublab eine Menge an Lagerflächen und -regalen.
   Im Lagerraum liegt nur ein Bruchteil der Teile, die man hier so haben will.
   </p>
 
-  <h3>
-    Getränkelager
-  </h3>
+  <h3>Getränkelager</h3>
   <p>
   Ist eigentlich kein richtiger Raum, dennoch aufgrund der enormen Wichtigkeit (Versorung der sublab-Mitglieder und Besucher mit Getränken) durchaus erwähnenswert.<br>
   Das Getränkelager befindet sich an einem geheimen Ort, der nur einem erlesenen Personenkreis bekannt ist.
diff --git a/source/verein.html.erb b/source/verein.html.erb
index 2fe6a3b..211ee04 100644
--- a/source/verein.html.erb
+++ b/source/verein.html.erb
@@ -7,39 +7,33 @@
   Der sublab e.V. wurde 2008 gegründet und hat seitdem die angemieteten Räumlichkeiten im Westwerk renoviert, elektrifiziert und in einen nutzbaren Zustand versetzt.<br>
   <a href="inc/sublab_ev_mitgliedsantrag.pdf">Hier</a> geht's zum Mitgliedsantrag.
   </p>
+
   <h3>
     Vereinsarbeit
   </h3>
-  <div class="imagecontent">
-    <a href="inc/was_ist_das_sublab.pdf" class="img"><img class="contentimage" src="img/wasistdassublab.png" alt="Was ist das sublab?"></a>
-    <p class="subtext">
-    Was ist das sublab? (pdf)
-    </p>
-  </div>
+  <%= image_with_thumb("was_ist_das_sublab.pdf", thumbnail: "wasistdassublab.png", caption: "Was ist das sublab? (pdf)") %>
   <p>
   Durch die Arbeit des Vereins werden vielen Leipziger Gruppen, die sich mit Technik und verwandten Themen beschäftigen, die Möglichkeiten gegeben sich zu treffen und zu arbeiten. Die notwendige Infrastruktur wird den Nutzernn vom sublab kostenlos zur Verfügung gestellt, da viele Gruppen keine finanziellen Mittel haben, eigene Räumlichkeiten zu unterhalten. 
   So trifft sich im sublab u.a. regelmäßig der Leipziger Chaostreff, um Workshops und Vorträge rund um aktuelle Technikthemen, z.B. Mikrokontrollerprogrammierung, zu halten. 
   Sobald die Räume fertig renoviert sind, werden im sublab auch Workshops stattfinden um Kinder und Jugendliche mit Technik in Berührung zu bringen, und ihre Kenntnisse über Funktionsweise aber auch Nutzen und Gefahren zu verbessern.
   </p>
+
   <h3>
     Gemeinnützigkeit
   </h3>
-  <div class="imagecontent">
-    <a href="inc/sublab-presentation.pdf" class="img"><img class="contentimage" src="img/presi.png" alt="sublab Presi Ubucon"></a>
-    <p class="subtext">
-    Ubucon Präsentation (pdf)
-    </p>
-  </div>
+  <%= image_with_thumb("sublab-presentation.pdf", thumbnail: "presi.png", caption: "Ubucon Präsentation (pdf)") %>
   <p>
   Der sublab e.V. ist ein gemeinnütziger Verein, der sich ausschließlich durch die Beiträge der Mitglieder und durch Spenden finanziert und finanzieren kann. Durch die anerkannte Gemeinnützigkeit sind wir in der Lage steuerlich absetzbare Spendenquittungen auszustellen.<br>
   Wenngleich wir bemüht sind die Strukturen flach zu halten bringt so ein juristischer Körper neben Vorteilen auch einige Anforderungen an den Papierkram mit sich.
   </p>
+
   <h3>
     Über den Verein
   </h3>
   <p>
   Eine kurze prägnante Beschreibung des sublab ist hier zu finden: <a href="inc/was_ist_das_sublab.pdf">Was&nbsp;ist&nbsp;das&nbsp;sublab?&nbsp;(pdf)</a>
   </p>
+
   <h3>
     Dokumente
   </h3>