Ideen-Sharing

Erstellt: 21.01.2014  Lesedauer 2 - 3 Min.

Es gibt Dinge die einen nicht loslassen. Das muss gar nichts großes sein, oft sind es sogar eher die kleinen Dinge, die sich zäh ins Unterbewusstsein setzen.

Bei mir war das — unter anderem — die Bilderproblematik hier im Blog. Die Lösung des „Draufklicken und Festhaltenmüssens“ war unbefriedigend1. Daher habe ich mich immer mal wieder auf die Suche begeben. Hat das vielleicht schon jemand gelöst? Denn zweimal das Rad erfinden, ist ineffizient.

Es gab einige Lösungen, die ich vor meiner ersten Variante ausprobiert hatte, die ich jedoch als noch unbefriedigender empfand. Denn damit sprang das Dokument immer an den Anfang zurück. Das geht gar nicht — zumindest für meinen Geschmack. Mir war klar, dass meine Lösung schon recht nah dran war, aber wie das manchmal so ist, steht man sich manchmal ziemlich breitbeinig selbst im Weg.

Die Lösung fand deutlich vor mir Gregory Shier, allerdings fand ich seinen Tipp erst relativ spät. So kann es manchmal halt gehen. Die Herausforderung, dass ich eigentlich gern eine Lösung hätte, die ohne HTML-Code im Markdown auskommt, findet sich sicherlich noch. Denn damit das klappen kann, muss ich ein paar Stilvorgaben mitgeben. Was mit Markdown nicht ganz trivial ist, insbesondere für Bilder, die im Text fließen. Da ist also noch reichlich Raum für Gedankenspiele.

Update (16.01.2016)

Weil das mit dem Festhalten auf Mobiltelefonen so eine Sache ist (genauer: Funktioniert nicht), habe ich schon eine ganze Weile nach einer Lösung gesucht. Heute morgen kam mir die Idee, die alle Anforderungen bedient:

[![Titel des Bildes]⟨Adresse zum Bild⟩]⟨#⟩

Sieht etwas kryptisch aus, ist aber das „Ei des Kolumbus“:

  • Es wird ein Link zur Adresse „#“ erzeugt (äußere Klammern)
  • Es wird ein Bild eingebettet
  • Für ein Bild in einem aktiven Link ist ein CSS für das Vergrößern hinterlegt.
  • Irgendwo anders hinklicken, der Link verliert den Fokus.

Update II (21.02.2016)

Nachdem ich noch ein paar weitere Versuche unternommen hatte, habe ich mich dann doch auf ein spezielles Plugin für den jetzt verwendeten Generator „Yello“ (Link unten) verlegt. Das erzeugt etwas aufwändigeren Code, als es der oben gezeigte Markdown-Code üblicherweise bildet. Dafür funktioniert es verlässlich in allen Browsern und es wird gleich noch ein Untertitel erzeugt. Alles auf HTML/CSS-Basis, letzteres leicht modifiziert, weil :focus nicht verlässlich beim Firefox funktioniert, ist es jetzt :target.

Update 25.01.2021

Bei der Übernahme der Daten in die „handgeklöppelte“ Variante mit »OffSiteEdit« hat mir dieser Artikel die Evolution dieser Funktion nochmals deutlich gemacht. Mittlerweile ist eine Lösung auf CSS-Basis gefunden, neben dem Blog in diverse Webprojekte eingeflossen ist. Für das mit »OffSiteEdit« abgelöste »Yellow« gibt es es eine von mir entwickelte Erweiterung, die bei GitHUB heruntergeladen werden kann.

Diese Erweiterung muss ggf. an die aktuelle Version von Yellow angepasst werden. Meinerseits findet keine Pflege mehr statt.


1Das bezog sich auf die Vorgängerlösung mit Pico und hat sich mit HTMLy erledigt.