Browse Source

from /tags to tiles

master
Chris 4 years ago
parent
commit
4f6f9af264
  1. 6
      content/posts/pendel-bildbetrachter/index.md
  2. 9
      content/posts/pendel-los-gehts/index.md
  3. 10
      content/posts/pendel-plugin/index.md
  4. BIN
      content/posts/pendel-ueber/20110914-073000.jpg
  5. 34
      content/posts/pendel-ueber/index.md
  6. BIN
      content/posts/pendel-ueber/kalender-deckel.jpg
  7. BIN
      content/posts/pendel-zeitreise/bildbetrachter.png
  8. 30
      content/posts/pendel-zeitreise/index.md
  9. BIN
      content/posts/pendel-zeitreise/landen-status.png
  10. BIN
      content/posts/pendel-zeitreise/leinwand-mit-scrolleiste.png
  11. 7
      content/tags/dierundestunde/_index.md
  12. 7
      content/tags/kollegenrunde/_index.md
  13. 7
      content/tags/myequis/_index.md
  14. 8
      content/tags/pendel/_index.md
  15. 2
      layouts/index.html
  16. 3
      layouts/partials/tag-cover.html
  17. 26
      layouts/tag/list.html
  18. BIN
      static/img/favicon/favicon.png

6
content/posts/pendel-bildbetrachter/index.md

@ -10,6 +10,8 @@ showFullContent = false
readingTime = false
+++
Nachdem sich nun die ersten Plättchen auf der weißen Leinwand platziert haben, kam dann doch recht schnell der Wunsch auf, die eigentlichen Bilder in einem Bildbetrachter ansehen zu können. Das war ursprünglich nicht vorgesehen, schließlich geht es um die Plättchen auf der Leinwand; die zugrunde liegenden Bilder sind eher als Rohmaterial zu sehen.
Andererseits ist die noch recht leere Leinwand auch nicht wirklich spannend - und auf einem Mobilgerät schon gar nicht. Also kann man nun auf die Plättchen klicken und sich das Bild ansehen. Man erkennt dann auch, dass das Plättchen keine reine Verkleinerung des Bildes ist, sondern vielmehr einen Ausschnitt zeigt (genau gesagt ein quadratischer Ausschnitt mit 500 Pixel Kantenlänge). Deshalb kann man die Erstellung des Plättchenbildes auch nicht automatisieren, es wird 'von Hand' erstellt.
Nachdem sich nun die ersten Plättchen auf der weißen Leinwand platziert haben, kam dann doch recht schnell der Wunsch auf, die eigentlichen Bilder in einem Bildbetrachter ansehen zu können. Das war ursprünglich nicht vorgesehen, schließlich geht es um die Plättchen auf der Leinwand; die zugrunde liegenden Bilder sind eher als Rohmaterial zu sehen.
Andererseits ist die noch recht leere Leinwand auch nicht wirklich spannend - und auf einem Mobilgerät schon gar nicht. Also kann man nun auf die Plättchen klicken und sich das Bild ansehen. Man erkennt dann auch, dass das Plättchen keine reine Verkleinerung des Bildes ist, sondern vielmehr einen Ausschnitt zeigt (genau gesagt ein quadratischer Ausschnitt mit 500 Pixel Kantenlänge). Deshalb kann man die Erstellung des Plättchenbildes auch nicht automatisieren, es wird 'von Hand' erstellt.
Unter dem Bild wird noch Titel, Beschreibung und GPS-Position angegeben, sowie ein Link zur OSM-Karte. Das gezeigt Bild hat eine Auflösung von 1900 Pixel, in voller Größe findet man die Bilder im flickr-Album Pendel.

9
content/posts/pendel-los-gehts/index.md

@ -1,5 +1,5 @@
+++
title = "Pendel Los Gehts"
title = "Los geht's"
date = "2017-08-31"
author = false
cover = ""
@ -10,5 +10,8 @@ showFullContent = false
readingTime = false
+++
Los geht’s im Pendel-Blog
Nachdem ich ersten Fotos geschossen und entwickelt habe, ist es nun Zeit, den Pendel-Blog aufzusetzen. Schließlich soll beides gleichzeitig entstehen. Machen wir also Nägel mit Köpfen... Ich habe zwar schon ein vage Vorstellung, wie ich die Bilder hier präsentieren möchte, ob das dann auch aber 'zieht', wird der Besucher dann aber erst später sehen. Außerdem habe ich natürlich noch die Aufgabe, die Darstellung zu programmieren, und dafür muss ich erst ein wenig PHP lernen.
# Los geht’s auf der Leinwand.
Nachdem ich ersten Fotos geschossen und entwickelt habe, ist es nun Zeit, die Leinwand aufzusetzen. Schließlich soll beides gleichzeitig entstehen. Machen wir also Nägel mit Köpfen...
Ich habe zwar schon ein vage Vorstellung, wie ich die Bilder hier präsentieren möchte, ob das dann auch aber 'zieht', wird der Besucher dann aber erst später sehen. Außerdem habe ich natürlich noch die Aufgabe, die Darstellung zu programmieren, und dafür muss ich erst ein wenig PHP lernen.

10
content/posts/pendel-plugin/index.md

@ -11,9 +11,11 @@ readingTime = false
+++
Die erste Version der Leinwand mit den ersten acht Bildern ist nun online! Umgesetzt als WordPress-Plugin.
Was bisher geschah
In den letzten Wochen wurde der 'Durchstich' des Plugins programmiert. Das Ziel war, ein minimales WordPress-Plugin zu erstellen, welches die Bilder als Kacheln anzeigt. Die Kacheln haben einen Schatten und bewegen sich leicht, wenn man mit der Maus bzw. dem Finger drübergeht. Außerdem musste ein passendes Theme gefunden und angepasst werden, damit die volle Browser-Seite genutzt werden kann. Ferner wurden Header und Footer minimalisiert.
Leinwand in Version 1 des WordPress-PluginsAußerdem bin ich natürlich gependelt, so dass man überhaupt etwas auf der Leinwand zu sehen bekommt.
Und wie geht's nun weiter?
# Was bisher geschah
In den letzten Wochen wurde der 'Durchstich' des Plugins programmiert. Das Ziel war, ein minimales WordPress-Plugin zu erstellen, welches die Bilder als Kacheln anzeigt. Die Kacheln haben einen Schatten und bewegen sich leicht, wenn man mit der Maus bzw. dem Finger drübergeht. Außerdem musste ein passendes Theme gefunden und angepasst werden, damit die volle Browser-Seite genutzt werden kann. Ferner wurden Header und Footer minimalisiert.
Leinwand in Version 1 des WordPress-PluginsAußerdem bin ich natürlich gependelt, so dass man überhaupt etwas auf der Leinwand zu sehen bekommt.
# Und wie geht's nun weiter?
Die Leinwand soll nun etwas mehr Interaktion bekommen, mal schau'n, ich habe da so ein paar Ideen.
Außerdem muss natürlich fleißig gependelt werden...

BIN
content/posts/pendel-ueber/20110914-073000.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 40 KiB

34
content/posts/pendel-ueber/index.md

@ -1,6 +1,6 @@
+++
title = "Pendel Ueber"
date = "2017-09-01"
title = "Über Pendel"
date = "2017-08-30"
author = false
cover = ""
tags = ["pendel"]
@ -10,16 +10,26 @@ showFullContent = false
readingTime = false
+++
Über dieses Projekt
# Über dieses Projekt.
Die Geschichte
Ich fahre manchmal mit dem Rad zur Arbeit. Das sind so ungefähr 40 km hin und das Gleiche zurück. Wie ein Pendel. Die Strecke geht von Gelnhausen-Meerholz (wo ich wohne) nach Frankfurt am Main (wo ich arbeite). Sie führt durch erst das Kinzigtal und dann am Main entlang und ist ausgesprochen flach. Zehn Jahre lang, bin ich immer die gleiche Strecke gefahren, nämlich die schnellste. Schließlich wollte ich schnell zur Arbeit bzw. wieder nach Hause kommen. Und so übersah ich lange Zeit dieses Projekt.
Der Pendler - ein SelbstportraitAb und zu hielt an, um ein Foto zu machen. Zu jener Zeit machte ich gerade das Projekt 'Tagesbild 2014' (s. Flickr). Ich musste also ein Foto machen und oft war die Fahrt die einzige Gelegenheit, kreativ zu werden. Irgendwann war dann 'Tagesbild' beendet und ich machte keine Fotos mehr auf dem Weg zur Arbeit.
Titelfoto aus dem Kalender-Projekt2015 brauchte ich ein Weihnachtsgeschenk für meinen Schwager. Ich beschloss, ihm einen Montagskalender mit 12 MTB-Touren zu schenken. Jede Tour sollte aus einem GPX-Track und einem Foto für den Kalender bestehen. Da ich weder GPX-Tracks noch Fotos hatten, fuhr ich also 12 Touren und machte dabei ein paar Fotos. Den Kalender nannte ich 'Alles fahrbar' (s. Flickr).
Dann suchte ich irgendwann nach einem neuen Projekt. Denn Fotos machen klappt bei mir nur als Projekt. Ich brauche diese konkrete Aufgabe und den Druck auf den Auslöser drücken zu müssen. Mir fiel aber nichts ein.
Zufällig sah ich in einer Zeitschrift Fotos der amerikanischen Künstlerin Benedikte Flores Ansell, welche mit kleinen Fotoplättchen großflächige Installationen macht. Die Künstlerin hatte ihre Fotos verfremdet und auf Plättchen gedruckt. Die Plättchen hatte sie mit je einem Nagel an einer großen Wand zu einer Art 'Kontinent' zusammengestellt.
Dann stieß ich auf das Odyssee-Projekt von Annette Meyer. Sie installiert Lochkameras an Orten rund um die Welt und macht damit Extrem-Langzeitbelichtungen. Sie berichtet darüber in ihrem Blog www.annette-meyer.com.
Die Idee
Die beiden Dinge, Fotos auf Touren und die Anordnung von Fotos zu einem Gesamtwerk, möchte ich zusammenbringen. Die Plättchen brachten mich auf die Idee, Fotos nach gewissen Kriterien anzuordnen. Warum nicht nach ihrem Entstehungsort? Und durch die Kalenderaktion war meine Neugier für alternative Strecken zu meiner bewährten, schnellen Pendelstrecke geweckt. Die Idee ist nun, zu Pendeln und dabei Fotos zu machen und diese Fotos auf einer weißen Website unter Berücksichtigung der Entstehungskoordinaten anzuordnen. Die Anordnung soll durch einen Algorithmus erfolgen, aber nicht punktgenau nach ihrer Position. Vielmehr wird die Position nur ein Parameter von mehreren sein. Was das nun genau bedeutet und wie das dann aussehen wird, weiß ich noch nicht, jetzt am Beginn. Ich werde es aber am Ende des Projekts wissen.
Die Umsetzung
----
![Der Pendler, Selbstportrait](20110914-073000.jpg)
Ab und zu hielt an, um ein Foto zu machen. Zu jener Zeit machte ich gerade das Projekt _Tagesbild 2014_ (s. [Flickr](https://flic.kr/s/aHsm9ZBogT)). Ich musste also ein Foto machen und oft war die Fahrt die einzige Gelegenheit, kreativ zu werden. Irgendwann war dann _Tagesbild_ beendet und ich machte keine Fotos mehr auf dem Weg zur Arbeit.
----
![Titelfoto aus dem Kalender-Projekt](kalender-deckel.jpg)
2015 brauchte ich ein Weihnachtsgeschenk für meinen Schwager. Ich beschloss, ihm einen Montagskalender mit 12 MTB-Touren zu schenken. Jede Tour sollte aus einem GPX-Track und einem Foto für den Kalender bestehen. Da ich weder GPX-Tracks noch Fotos hatten, fuhr ich also 12 Touren und machte dabei ein paar Fotos. Den Kalender nannte ich _Alles fahrbar_ (s. [Flickr](https://flic.kr/s/aHsknxjVj2)).
Dann suchte ich irgendwann nach einem neuen Projekt. Denn Fotos machen klappt bei mir nur als Projekt. Ich brauche diese konkrete Aufgabe und den Druck auf den Auslöser drücken zu müssen. Mir fiel aber nichts ein.
Zufällig sah ich in einer Zeitschrift Fotos der amerikanischen Künstlerin [Benedikte Flores Ansell](http://www.benniefloresansell.com/), welche mit kleinen Fotoplättchen großflächige Installationen macht. Die Künstlerin hatte ihre Fotos verfremdet und auf Plättchen gedruckt. Die Plättchen hatte sie mit je einem Nagel an einer großen Wand zu einer Art _Kontinent_ zusammengestellt.
Dann stieß ich auf das Odyssee-Projekt von Annette Meyer. Sie installiert Lochkameras an Orten rund um die Welt und macht damit Extrem-Langzeitbelichtungen. Sie berichtet darüber in ihrem Blog [www.annette-meyer.com](https://www.annette-meyer.com/lochkamera/).
## Die Idee
Die beiden Dinge, Fotos auf Touren und die Anordnung von Fotos zu einem Gesamtwerk, möchte ich zusammenbringen. Die Plättchen brachten mich auf die Idee, Fotos nach gewissen Kriterien anzuordnen. Warum nicht nach ihrem Entstehungsort? Und durch die Kalenderaktion war meine Neugier für alternative Strecken zu meiner bewährten, schnellen Pendelstrecke geweckt.
Die Idee ist nun, zu Pendeln und dabei Fotos zu machen und diese Fotos auf einer weißen Website unter Berücksichtigung der Entstehungskoordinaten anzuordnen. Die Anordnung soll durch einen Algorithmus erfolgen, aber nicht punktgenau nach ihrer Position. Vielmehr wird die Position nur ein Parameter von mehreren sein. Was das nun genau bedeutet und wie das dann aussehen wird, weiß ich noch nicht, jetzt am Beginn. Ich werde es aber am Ende des Projekts wissen.
## Die Umsetzung
Ich starte mit diesem Blog und einer leeren Seite für die Leinwand. Das gibt dem Ganzen erst mal einen Rahmen und erzeugt den nötigen Druck für kreative Ideen. Die leere Seite soll dann zur Leinwand werden. Und mit jedem Pendel kommt ein neues Foto und mit jedem Foto füllt und verändert sich das Gesamtbild. Gefällt es mir nicht, werde ich den Algorithmus für Anordnung ändern, bis es wieder passt.

BIN
content/posts/pendel-ueber/kalender-deckel.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 42 KiB

BIN
content/posts/pendel-zeitreise/bildbetrachter.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 186 KiB

30
content/posts/pendel-zeitreise/index.md

@ -10,22 +10,28 @@ showFullContent = false
readingTime = false
+++
Zeitreise
# Zeitreise
Pendel bietet nun die Möglichkeit, die Leinwand zu Blättern. Damit kann sich der Betrachter auf der Leinwand zeitlich vor- und zurück bewegen. Eine Zeitreise durch die Entstehung des Pendels...
Überlegungen
# Überlegungen
Von Anfang hat beschäftigte mich die Frage, wie mit Bilder umzugehen ist, die am gleichen Ort entstehen. Also Bilder, die auf der Leinwand übereinander liegen würden. Soll es eine Fotoregel sein, nur ein Bild pro Kachel zu machen? Oder soll ein neues Bild das alte einfach ersetzen? Oder sollen ein altes Bild dem neuen durch verschieben auf der Leinwand Platz machen?
Story Telling
All diese Ideen sind nicht überzeugend und fügen sich nach meinem Verständnis nicht gut in das Konzept ein. Die Idee einer zeitlichen Achse, gefällt mir um so besser. Darauf gestoßen, bin ich bei der wunderbaren Seite atterwasch.net. Wie dort Blättern als Vortrieb für die Geschichte genutzt wird und damit der Betrachter in die Geschichte eintaucht ist echt beeindruckend und schön gemacht.
Zeitreise
# Story Telling
All diese Ideen sind nicht überzeugend und fügen sich nach meinem Verständnis nicht gut in das Konzept ein. Die Idee einer zeitlichen Achse, gefällt mir um so besser. Darauf gestoßen, bin ich bei der wunderbaren Seite [atterwasch.net](http://atterwasch.net/). Wie dort Blättern als Vortrieb für die Geschichte genutzt wird und damit der Betrachter in die Geschichte eintaucht ist echt beeindruckend und schön gemacht.
# Zeitreise
Zurück zum Pendel-Projekt: Die Scrollleiste des Webbrowsers ist nun entfernt, die Leinwand wird stattdessen immer im Vollformat angezeigt. Der Besucher kann nun mit der Maus (bzw. durch Wischen) zurück und vor blättern. Und so bewegt man sich auf der Zeitachse des Pendels und sieht die Entstehungsreihenfolge der Bilder.
Leinwand mit Scrollleiste und Fußzeile
Leinwand mit Scrollleiste und Fußzeile
Was noch geändert wurde
![Leinwand mit Scrollleiste und Fußzeile](leinwand-mit-scrolleiste.png) Leinwand mit Scrollleiste und Fußzeile
# Was noch geändert wurde
Zur Orientierung beim Blättern wurde eine Fußleiste hinzugefügt. Diese zeigt neben dem Seitenname ('Leinwand') die aktuelle Position und die Anzahl der Bilder an.
Das Laden der Kachelbilder erfolgt nun asynchron. Derzeit hat die Leinwand zwar nur 25 Bilder, bis diese vom Server geladen sind, kann es aber schon ein Weilchen dauern. Während des Ladens, zeigt die Fußleiste den Fortschritt an.
Ladebalken in der Fußzeile
Ladebalken
![Ladebalken in der Fußzeile](landen-status.png) Ladebalken in der Fußzeile
Auch der Bildbetrachter wurde überarbeitet und zeigt sich nun im schicken Schwarz. Das Einzelbild wird nun formatfüllend angezeigt und asynchron geladen.
Bildbetrachter
Bildbetrachter
![Bildbetrachter](bildbetrachter.png) Bildbetrachter
So, nun habe ich das schlechte Winterwetter mit programmieren überbrückt. Jetzt gibt es aber keine Ausrede mehr für's Pendeln!

BIN
content/posts/pendel-zeitreise/landen-status.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 KiB

BIN
content/posts/pendel-zeitreise/leinwand-mit-scrolleiste.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 36 KiB

7
content/tags/dierundestunde/_index.md

@ -1,7 +0,0 @@
+++
title = "Die Runde Stunde"
urlLink = "kollegen.uber.space/dierundestunde/"
cover = "img/drs-logo.png"
coverCredit = "Besuche Die Runde Stunde"
description = "Unterwegs im R15"
+++

7
content/tags/kollegenrunde/_index.md

@ -1,7 +0,0 @@
+++
title = "Kollegenrunde"
urlLink = "kollegen.uber.space/kollegenrunde/"
cover = "img/kollegenrunde-logo.png"
coverCredit = "Webseite der Kollegenrunde"
description = "Der Kollege lädt ein"
+++

7
content/tags/myequis/_index.md

@ -1,7 +0,0 @@
+++
title = "My Equis"
urlLink = "kollegen.uber.space/japp/myequis"
cover = "img/myequis-logo.png"
coverCredit = "Besuche My Equis"
description = "In der Fahrrad-Werkstatt"
+++

8
content/tags/pendel/_index.md

@ -1,8 +0,0 @@
+++
title = "Pendel"
urlLink = "earls5.uber.space/pendel/"
cover = "img/pendel-logo.png"
coverCredit = "Pendel"
description = "Leinwand durch Raum und Zeit!"
+++

2
layouts/index.html

@ -40,8 +40,8 @@
</figure>
</div>
{{ end }}
</div>

3
layouts/partials/tag-cover.html

@ -14,7 +14,8 @@
{{- end -}}
{{- end -}}
{{ if .Params.urlLink }}
<!-- Context . is the correspnding tile for the particular tag name -->
{{ if .Params.UrlLink }}
{{if $cover -}}
<!-- Cover image found -->
<div>

26
layouts/tag/list.html

@ -1,24 +1,26 @@
{{ define "main" }}
{{ $tag := .Name }}
{{ $tile := . }}
{{ $title := .Name }}
{{ range where .Site.RegularPages "Type" "tiles" }}
{{ if eq .Params.CorrespondingTagName $tag }}
{{ $tile = . }}
{{ $title = .Title }}
{{ end }}
{{ end }}
<div class="post">
<div class="post-meta">
<div class="post-content">
{{ if .Description }}
{{ .Description | markdownify }}
{{ end }}
<h1 class="post-subtitle">{{ .Title | markdownify }}</h1>
<h1 class="post-subtitle">{{ $title | markdownify }}</h1>
</div>
</div>
{{ if .Params.tags }}
<span class="post-tags">
{{ range .Params.tags }}
#<a href="{{ (urlize (printf "tags/%s/" .)) | absLangURL }}">{{ . }}</a>&nbsp;
{{ end }}
</span>
{{ if $tile }}
{{ partial "tag-cover.html" $tile }}
{{ end }}
{{ partial "tag-cover.html" . }}
<div class="posts">
{{ $isntDefault := not (or (eq (trim $.Site.Params.contentTypeName " ") "posts") (eq (trim $.Site.Params.contentTypeName " ") "")) }}
{{ $contentTypeName := cond $isntDefault (string $.Site.Params.contentTypeName) "posts" }}

BIN
static/img/favicon/favicon.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 382 B

Loading…
Cancel
Save