Schöner Bloggen

Montag, 5. Dezember 2016

Videos reloaded - Neue Videoload-Version 2

Dieser Beitrag dokumentiert die nunmehr zweite, vollständig überarbeitete Version des Videoload-Werk­zeugs, mit dem sich in Twoday auf einfache Weise Video-, Audio- und andere Quell­formate einbinden lassen, die ansonsten mangels iframe-Möglich­keit unter Twoday draußen bleiben müssten. Er ersetzt voll­ständig die alte Doku­men­tation in diesem Beitrag vom Februar 2015.
Wichtige Infos für bisherige Videoload-Nutzer

1 Um die neue Videoload-Version nutzen zu können, müssen Sie den Aufruf des Scripts im Twoday-Skin Site.page einmalig ändern. Wie das geht, wird weiter unten im Abschnitt Upgrade auf Videoload Version #2 beschrieben.

2 Die alte Tool-Version bleibt zwar weiterhin abrufbar, wird jedoch nicht mehr gepflegt. Die neue Version ist um Größenordnungen schneller, beinhaltet außerdem neue Anbieter wie z.B. Bandcamp, dctp.tv, Slideshare sowie Speakerdeck und ist bereinigt um mittlerweile nicht mehr aktive Anbieter (z.B. myvideo.de). Ich rate wärmstens zum vertrauensvollen Umstieg auf Videoload #2! ;)

videoload/videoinst.jpg

In der IT ist das so eine Sache mit der Pflege und Wartung von Alt-Software. So schwankt man beim Wiederstudium von älteren eigenen JavaScript-Codeschnipseln zwischen sehr ambivalenten Gefühlen, die sich irgendwo zwischen "Diese in einem magischen Moment entstandene brillante Codestrecke verstehen nur noch Gott, Mark Zuckerberg oder mein früheres Ich!" und "War ich das? Wie schlecht ist das denn bitte programmiert?" bewegen.

Jeder hat eben das Recht, täglich etwas schlauer zu werden. Und so ist auch Videoload erwachsener geworden, sehr viel schlanker und auch deutlich schneller. Für interessierte Techies und Nerds gibt's hier weitere Informationen.

Warum Videoload und wozu dient es?

Seit die meisten Videoplattformen und Content-Anbieter den alten <embed>-Befehl zugunsten des mo­derneren <iframe>-Formats aufgegeben haben, ist eine Einbindung solcher Quellen mit Standardmitteln bei Twoday nicht mehr möglich. In Twoday-Beiträgen wird jeder mutige Versuch einer direkten iframe-Nutzung beim Speichern des Beitragstextes sofort wieder herausgefiltert.

Videoload führt einen Ausgleich zwischen Twodays berechtigtem Sicherheitsinteresse und den Content-Wünschen der Nutzer herbei, indem es valide und überprüfbare iframe-Aufrufe für einen definierten Kreis von sicheren Anbietern erzeugt. Derzeit (Stand: April 2017) generiert Videoload Verbindungen zu 17 verschiedenen Plattformen und bindet den gewünschten Inhalt (z.B. ein YouTube-Video) auf einfache Weise in den jeweiligen Blogbeitrag ein. Folgende Provider stehen zur Verfügung:

Klick auf Icon öffnet die jeweilige Anbieterseite

Videoload bietet nicht nur Zugriff auf die wichtigsten Videoanbieter, sondern stellt auch Audioinhalte (z.B. via Bandcamp, Soundcloud), Präsentationen (z.B. via Slides, Slideshare, Speakerdeck), GIFs (via Giphy) oder Code-Snippets (via Jsfiddle) bereit.

Erstmalige Installation

Zur Installation Ihrer neuen Videoload-Möglichkeiten ist eine einmalige Anpassung des Twoday-Skins Site.page erforderlich:

  1. Melden Sie sich auf Twoday mit Ihrem Account an und rufen Sie Ihr Blog auf.
  2. Wählen Sie in der Menüzeile oben AdminLayout und dann Skins (HTML).
  3. Klicken Sie auf die Überschrift Hauptseite (Site.page), danach in das Feld mit dem Scrollbalken und wandern Sie ganz an das untere Ende der Anzeige.
  4. Kopieren Sie dort vor das abschließende </body>-Element folgende Zeilen hinein:
    <script type="text/javascript" src="<% staticURL %>cdn/files/videoload2-min-js.js"></script>
    <script type="text/javascript">video2day.run();</script>

    Wie kopiere ich das?

    Ihr Skin Site.page sollte nun in etwa so aussehen:

    videoload/install.jpg

    <% staticURL %> ist ein Twoday-Makro und steht für "https://static.twoday.net/", dem abgesicherten Blogspeicher für Twoday-Bilder oder -Dateien.

  5. Klicken Sie auf "Speichern und Schließen" um Ihre Änderungen zu sichern. Sie können nun zu jeder Zeit in Ihren Twoday-Beiträgen Video- und Audioelemente der aufgeführten Plattformanbieter einbinden. Wie das funktioniert, finden Sie im übernächsten Abschnitt Videoload verwenden.

Upgrade auf Videoload Version #2

Falls Sie bereits die Erstversion des Videoload-Scripts nutzen, sollten Sie auf die neue Version 2 umstellen. Hierzu ist der Aufruf von Videoload im Skin Site.page anzupassen bzw. zu ergänzen.

Bisher steht dort am Ende des Skins, vor dem abschließenden </body>-Befehl, folgender Eintrag:

<script type="text/javascript" src="<% staticURL %>cdn/files/videoload-min-js.js"></script>

Bitte ändern/erweitern Sie den Aufruf wie folgt:

<script type="text/javascript" src="<% staticURL %>cdn/files/videoload2-min-js.js"></script>
<script type="text/javascript">video2day.run();</script>

Wie kopiere ich das?

d.h. also in Zeile 1 den Scriptnamen videoload in videoload2 ändern und die zweite Zeile darunter ergänzen.

Selbstverständlich ist die Version #2 vollständig abwärtskompatibel zur Erstversion, d.h. alle bisherigen Videoeinbettungen funktionieren sofort und ohne Änderung mit der neuen Version problemlos weiter.

Videoload verwenden

Um ein Video in einem Beitrag anzuzeigen, verwenden Sie einen einfachen DIV-Befehl, der z.B. für ein YouTube-Video so aussieht:

<div class="html5video youtube" id="DyfM7oLIlp0"></div> …

An der feststehenden Zeichenkette html5video erkennt das Videoload-Script, dass es innerhalb dieses div-Elements eine Einbettung vornehmen soll. Die darauf folgende Anbieterkennung bezeichnet die Plattform, von der das anzuzeigende Objekt stammt. Im Beispiel oben soll ein Youtube-Video generiert werden. Im Attribut id legen Sie fest, welches Youtube-Video angezeigt wird (jedes Anbieterelement hat eine eindeutige Identifikation).

Die betreffende ID findet sich meist recht einfach im Einbettungs­code des Videoanbieters (dem <iframe>-Befehl) und besteht i.d.R. aus einer kurzen Kombination von Zahlen und Buchstaben. In der Tabelle "Individuelle Parameter je Anbieter" weiter unten finden Sie eine genaue Information, wie Sie die benötigte ID bei jedem Anbieter manuell ermitteln. Außerdem stelle ich im Folgekapitel ein Tool vor, das die notwendigen Daten voll­automatisch aus dem kopierten iframe-Einbettungs­code ermittelt und für Sie den korrekten Twoday-DIV-Befehl gebrauchsfertig zusammenstellt. Damit entfällt die manchmal etwas umständliche Suche nach der richtigen ID.

Die passende Kennung für einen der 17 möglichen Anbieter finden Sie unten als Beschriftung in den blauen Tabulatoren. Um also ein Vimeo-Video einzufügen, heißt der entsprechende DIV-Befehl

<div class="html5video vimeo" id="{eine-vimeo-id}"></div>

Für die Anzeige eines GIFs von giphy.com wäre das DIV-Element folgendermaßen zu schreiben:

<div class="html5video giphy" id="{eine-giphy-id}"></div>

Minimal benötigt eine Einbettung also stets drei Informationen: den feststehenden Bezeichner html5video, die Textkennung des gewünschten Anbieters und die eindeutige ID des anzuzeigenden Elements.

Ergänzende Einstellparameter

Es gibt weitere Parameter, mit denen Sie die Breite und das Seitenverhältnis des einzubettenden Elements beeinflussen können. Diese beiden Parameter sind für alle Anbieter zulässig.

Parameter bestehen mindestens aus dem Parameternamen und — soweit erforderlich — aus einem Parameterwert, verbunden durch einen Bindestrich. Eine Breitenangabe kann z.B. width-500 sein; ein Parameter zum Seitenverhältnis z.B. ratio-1.6834. Kommazahlen müssen dabei stets mit Punkt geschrieben werden.
width — Breite festlegen/begrenzen

Im oben gezeigten Beispiel nimmt das Youtube-Video die volle Breite des umgebenden Containers ein, d.h. es füllt die Twoday-Beitragsspalte horizontal vollkommen aus. Falls Sie das Video kleiner darstellen wollen, können Sie zusätzlich eine Breitenangabe mithilfe des width-Parameters machen. Für eine Breite von z.B. 350 Pixeln lautet der Befehl:

<div class="html5video youtube width-350" id="DyfM7oLIlp0"></div> …

ratio — Seitenverhältnis einstellen/korrigieren

Die meisten Videos haben ein Seitenverhältnis von 16:9, d.h. ein Verhältnis von Breite zu Höhe von 1,77778. Manche Videos haben noch ein 4:3 Verhältnis (1,33333) und wieder andere eine sehr individuelle Streckung (z.B. bei Breitbildformaten). Das Script verwendet im Standard die 16:9-Anzeige. Wenn das Video verzerrt dargestellt wird, können Sie ein eigenes Seitenverhältnis einstellen. Der Befehl für ein Vine-Video mit einem Seitenverhältnis von 1,0 und einer Breite von 400 Pixeln lautet dann:

<div class="html5video vine ratio-1 width-400" id="OTtQVYI2JY2"></div> …

Dies bewirkt in diesem Fall, dass das Video die gleiche Höhe wie Breite erhält, d.h. 400 Pixel breit und hoch ist.

Neben diesen beiden grundsätzlich verwendbaren Parametern gibt es je Plattform verschiedene individuelle Parameter, mit denen man bestimmte Funktionen oder Darstellungsweisen des Anbieters aktiviert. Diese sind je Plattform in den nachstehenden Tabs beschrieben.

Individuelle Parameter je Anbieter

Klick auf ein Tab öffnet die Dokumentation für diesen Anbieter

Einen Moment bitte, die Dokumentation wird geladen...

Videoload-Tool nutzen

Twoday-Videoload-Code automatisch generieren

Es ist evtl. etwas mühsam, die oben beschriebenen Parameter für jeden der 17 Anbieter im Kopf zu behalten oder erst wieder nachzuschlagen, wenn man sie benötigt. Aus diesem Grund habe ich zusätzlich ein kleines Online-Tool erstellt, das den Twoday-Code automatisch für Sie zusammenstellt.

Sie müssen nur noch den vom jeweiligen Anbieter bereitgestellten iframe-Einbettungscode in das Formularfeld iframe-Code des Tools kopieren 1. Dieses erkennt die jeweilige Quellplattform, extrahiert die korrekte ID des Elements sowie alle anderen erkannten Einstellparameter. Daraus generiert es den kopierfertigen HTML-Befehl für Ihren Twoday-Beitrag und zeigt diesen im Feld HTML-Code an 2.

videoload/videoload1.jpg

Beispiel: Bandcamp-Audio

Nehmen wir ein konkretes Beispiel: Sie möchten das Album "Love & War & The Sea In Between" (Josh Garrels) von der Plattform Bandcamp in einen neuen Twoday-Beitrag einbetten. Sie haben den entsprechenden iframe-Befehl auf seiner Albumseite ermittelt und in die Zwischenablage kopiert. Nach Aufruf des Videotools fügen Sie den kopierten iframe-Befehl in das Eingabefeld iframe-Code ein 1.

Das Videotool analysiert den übergebenen Befehl und stellt alle erkannten Parameter in einem speziellen DIV-Kommando2 zusammen, aus dem das Videoload-Script später wieder den eigentlichen Einbettungsbefehl erstellt.

videoload/videoload2.jpg

Unter dem HTML-Befehl zeigt das Tool das von Ihnen gewünschte Element an, und zwar so wie es später auch beim Aufruf des Beitrags zu sehen sein wird 3. Sie haben nun die Möglichkeit, die Anzeige weiter zu konfi­gurieren, z.B. Größe und Erscheinungsbild zu ändern oder weitere Parametereinstellungen vorzunehmen, die für diesen Anbieter zulässig sind. Klicken Sie hierfür auf die grüne Schaltfläche "Parameter ändern / manuell setzen...".

videoload/videoload3.jpg

Statt des iframe-Code-Feldes wird nun eine Detailansicht mit allen verfügbaren Einstellparametern angezeigt. Die einzelnen Felder sind bereits mit den Werten vorbelegt, die aus dem iframe-Befehl herausgelesen werden konnten. Ändern Sie eine Einstellung, wird der zugehörige HTML-Befehl sofort neu generiert und als Kopiervorlage angezeigt.

videoload/videoload4.jpg

Wenn Sie z.B. die Bandcamp-Linkfarbe ändern und zusätzlich eine Tracklist mit 6 Songs anzeigen wollen, stellen Sie dies in den zugehörigen Feldern ein. Unmittelbar passt das Tool auch den HTML-Befehl an die veränderten Einstellwerte an.

videoload/videoload5.jpg

Das tatsächliche Aussehen des Elements können Sie unterhalb des Codes kontrollieren. Entspricht alles Ihren Vorstellungen, markieren Sie den fertigen HTML-Befehl und kopieren ihn in die Zwischenablage.

videoload/videoload6.jpg

Navigieren Sie nun zu Ihrem Beitrag und fügen Sie den kopierten Code an der gewünschten Stelle in den Text ein:

videoload/videoload7.jpg

Dieser Ablauf funktioniert für jeden der 17 Anbieter identisch. Wollen Sie also ein YouTube-Video in Ihren Beitrag einfügen, kopieren Sie den entsprechenden iframe-Code des Videos und das Tool zeigt Ihnen das passende DIV-Kommando für die Einbettung im Twoday-Beitrag.

Das Videotool finden Sie dauerhaft unter folgender Linkadresse:

https://neonwilderness.twoday.net/stories/videotool2

oder per Schaltfläche hier im Beitrag sowie rechts unten in der Sidebar:

Videotool aufrufen...

Videoload parametrisieren (für erfahrene Nutzer)

Script-Verhalten über Parameter steuern

Im Aufruf des Videoload-Scripts video2day.run(); (siehe Abschnitt "Installation") müssen keine Parameter innerhalb der Klammer mitgegeben werden, wenn Sie die Standardeinstellungen nutzen wollen. Gleichwohl kennt das Script eine Reihe von Einstellparametern, mit denen Sie sein Verhalten beeinflussen können. Diese werden nachstehend erläutert. Parameter übergeben Sie stets in geschweiften Klammern, wobei die einzelnen Parameter durch Komma getrennt sind:

video2day.run( {parameter1: wert, parameter2: wert, ... , parameterx: wert} );

Um z.B. die Breite für alle Videoload-Elemente auf maximal 400 Pixel zu begrenzen und außerdem den Debug-Modus einzuschalten, muss der Videoload-Aufruf inkl. der entsprechenden Parameter folgendermaßen aussehen:

video2day.run( {maxWidth: 400, debug: true} );

Die Reihenfolge der Parameter untereinander ist beliebig. Folgende Möglichkeiten stehen zur Verfügung:

Script-ParameterStandardBedeutung/Wirkung
addFlexVideoClassfalsetrue aktiviert den "responsive"-Modus, in welchem alle Anbieterelemente responsiv, d.h. in Abhängigkeit einer sich verändernden Containergröße dargestellt werden. Dieser Modus wirkt sich nur innerhalb von responsiven Blog-Templates aus (die Standard-Templates von Twoday sind leider NICHT responsiv). Dieses Blog hier basiert auf einem eigenerstellten, responsiven Foundation5-Template. Bei der Ansicht von Blogseiten mit Videoload-Elementen werden diese im Portrait- oder Landscape-Modus eines Tablets bzw. Mobile Phones anders dargestellt. Auch bei der Verkleinerung des Browserfensters am Desktop wird die Größe der Videoelemente dynamisch im richtigen Aspektverhältnis angepasst.
contentClass'storyContent'Dies ist die div-Klasse des Containers, der einen gesamten Blogbeitrag umfasst und seine maximale Breite festlegt. Bei Twoday heißt diese Klasse storyContent (Standard).
debugfalsetrue aktiviert den Debug-Modus, in welchem zusätzliche Nachrichten auf die Browser-Console ausgegeben werden. Im Fehlerfall oder bei Unstimmigkeiten können hiermit wichtige Zwischenergebnisse des Scripts protokolliert und kontrolliert werden.
maxWidth-1Mit maxWidth können Sie für alle auf Ihrem Blog angezeigten Videoload-Elemente eine maximale Breite festlegen. Wenn z.B. kein Element breiter als 440 Pixel breit sein soll, geben Sie beim Scriptstart den Parameter { maxWidth: 440 } mit. Dies erspart Ihnen in dem Fall eine Größenlimitierung in jedem einzelnen Element mitzugeben (z.B. per width-440 als Videoparameter).
position'bottom'Mit Hilfe des position-Parameters können Sie festlegen, wo der iframe des Anbieters eingefügt werden soll. Gültige Werte sind bottom, also am Ende des DIVs (das ist auch der Standard) oder top für den Anfang des DIVs. Text, der innerhalb des DIVs steht, wird also jeweils vor dem iframe (bei Einstellung bottom) oder nach dem iframe (bei Einstellung top) ausgegeben.
posterSize'cover'Für MP4-Videos (Videoload-Typ other) kann ein Posterbild angezeigt werden, solange der Nutzer das Video noch nicht gestartet hat. Über den Script-Parameter posterSize lässt sich einstellen, wie das Bild in der festgelegten Größe des Videorahmens angezeigt wird: cover streckt das gesamte Bild, so dass es den Videorahmen vollständig ausfüllt. contain skaliert das Bild auf die längste Seite (es können Ränder entstehen). Die Standardeinstellung ist { posterSize: 'cover' }.
selector'.html5video'Mit Hilfe des Selectors findet Videoload alle Stellen, in denen eine Einbettung eines Anbieterelements vorgenommen werden soll (z.B. ein YouTube-Video oder ein Bandcamp-Audio). Standardmäßig ist dafür die CSS-Klasse .html5video eingestellt.
useVideoJStrueFür die Anzeige beliebiger MP4-Videos wird der bewährte Videoplayer VideoJS genutzt. Dieser wird bei Vorliegen des Videoload-Typs other nachgeladen und mit dem Abspielen des Videos beauftragt. Allerdings beinhalten die meisten modernen Browser bereits eigene Routinen zum Abspielen von MP4-Videos (z.B. Chrome, Firefox), so dass man — wenn man das Problem für Nutzer älterer Browser ignoriert — eine separate Player-Lösung nicht bräuchte. Wer sich also nur auf den Browser als Abspielsoftware verlassen will, kann über die Einstellung { useVideoJS: false } das Nachladen eines universellen Players unterbinden und so noch ein paar Millisekunden Ladezeit einsparen.

Videotool 2

Anleitung: Kopieren Sie den Einbettungscode der Quellplattform in das Feld iframe-Code, um den entsprechenden Videoload2-Befehl zu erhalten. Ergänzend können Sie die Breite anpassen oder auch alle Parameter ändern bzw. vollständig selbst einstellen.

Den resultierenden HTML-Code kopieren Sie anschließend in Ihren Beitragstext (Videoload2-Script muss installiert sein!).

iframe-Code
HTML-Code für Twoday

Mittwoch, 11. März 2015

Twoday-Tipp #9 - Thalia Büchersuche repariert

thalia/thaliarepair.jpg

Datum Änderungen / Edits
27.01.2016 Anpassung der Büchersuche aufgrund struktureller Änderungen auf der thalia.at Webseite. Die aktualisierte Version 1.1 des Skins (module.modReadingSetup-v11.txt) muss neu installiert werden.

Beginnen wir mit einer Preisfrage: Was haben die Twoday-Büchersuche über Thalia.at und Amazon.de gemeinsam? Stimmt! Beide existierten einmal, aber keine davon funktioniert noch. Und trotz regelmäßiger Forumnachfrage sind Bemühungen zur baldigen Behebung des Dauer­brenners derzeit nicht erkennbar. Zeit, das Thema selbst in die Hand zu nehmen und auch ohne Server-Zugriff eine brauch­bare anwender­seitige Lösung zu schaffen.

Vor einigen Jahren hat Amazon bereits seine Bücher-/Produkt­suche für "normalen" Programmier­zugriff geschlossen. Für die Nutzung des Product Advertising APIs sind seither spezielle An­mel­dungen, Partner-IDs und Zugriffs­schlüssel erforderlich, was für eine Blog­plattform wenig Sinn macht, zumal die Anzahl der erlaubten Zugriffe limitiert ist. Bleibt also Thalia.at, die ihrer kürzlich neu entworfenen Webseite auch eine detaillierte, von außen ansteuerbare Suchfunktion spendiert haben.

Neue Büchersuche installieren

Das Skin module.modReadingSetup

Wie schon die alte Twoday-Standard-Büchersuche liegt auch die neue Funktion im Skin module.modReadingSetup. Im Gegensatz zu vielen anderen Skins, die über die Navigation AdminLayoutSkins (HTML) angesteuert und angepasst werden können, entzieht sich der für die Büchersuche zuständige Skin jedoch einem schnellen Zugriff. Um ihn ändern zu können, bedarf es der Anwendung eines kleinen Kniffs.

  1. Laden Sie zunächst einmalig den zukünftigen Inhalt des Büchersuche-Skins herunter. Klicken Sie dazu auf die nachfolgende Schaltfläche und speichern Sie die Textdatei in einem beliebigen Verzeichnis Ihrer Festplatte.

     module.modReadingSetup-v11.txt

  2. Öffnen Sie die Datei in einem Texteditor (z.B. Notepad, Notepad++, Wordpad, TextEdit) als reine Textdatei, markieren Sie den gesamten Inhalt (Strg-A für Windows, Cmd-A für Mac) und kopieren Sie diesen in die Zwischenablage (Strg-C für Windows, Cmd-C für Mac). Schließen Sie danach den Editor.

    thalia/thalia00.jpg

  3. Melden Sie sich auf Twoday mit Ihrem Account an und rufen Sie Ihr Blog auf.
  4. Wählen Sie in der Menüzeile oben AdminLayout und dann Skins (HTML)Falls Sie Ihre Menüzeile ausgeblendet haben, erreichen Sie die Skin­bearbeitung alternativ auch durch direkte Eingabe der Adresse http://blogalias.twoday.net/layouts (blogalias = Ihr Blogname) und dann durch Klick auf Skins (HTML).
  5. Klicken Sie dort auf ein beliebiges Skin. Im Beispiel verwenden wir das Skin Dayheader (Story.dayheader). Es ist aber nicht wirklich wichtig, welches Skin verwendet wird, weil es nur als Vorlage für die Adresse dient.

    thalia/thalia01.jpg

  6. Oben in der Adresszeile des Browsers wird nun folgende Zeichenkette angezeigt — natürlich mit Ihrem Blogalias und Layoutnamen:

    thalia/thalia02.jpg

  7. Markieren Sie den gesamten Rest hinter key= und schreiben Sie stattdessen module.modReadingSetup hinter das Gleichheitszeichen:

    thalia/thalia03.jpg

  8. Betätigen Sie die Datenfreigabetaste (Return), um den bisherigen Inhalt des Skins module.modReadingSetup anzuzeigen. Klicken Sie in das Feld mit dem Scrollbalken und markieren den gesamten Inhalt des Skins (Strg-A für Windows, Cmd-A für Mac):

    thalia/thalia04.jpg

  9. Fügen Sie nun den neuen Büchersuche-Inhalt (welcher sich seit Schritt 2 in Ihrer Zwischenablage befindet) in das Textfeld ein und ersetzen damit den markierten alten Inhalt vollständig (Strg-V für Windows, Cmd-V für Mac):

    thalia/thalia05.jpg

    Klicken Sie abschließend auf Speichern und Schließen um Ihre Änderung zu sichern.

    Gratulation! Die neue Suchfunktion über Thalia.at ist nun installiert. Im folgenden Kapitel lesen Sie, wie Sie die neue Büchersuche ab sofort verwenden können.

Büchersuche flexibel einsetzen

Büchersuche aufrufen

  1. Klicken Sie im Übersichtsbildschirm auf Module.

    thalia/thalia06.jpg

  2. Klicken Sie beim Eintrag "Bücherliste" auf Einstellungen.

    thalia/thalia07.jpg

  3. Unter der Überschrift Nach neuen Büchern suchen finden Sie den überarbeiteten Teil der Büchersuche, die nun über die Thalia.at Webseite erfolgt:

    thalia/thalia08.jpg

    Ein Büchersuche kann prinzipiell einfach oder strikt durchgeführt werden. Bei der einfachen Suche können Sie in jedem der beiden Eingabefelder beliebige, gemischte Suchwörter eingeben, unabhängig davon, ob sie zum Titel oder Autorennamen gehören. Bei der strikten Suche müssen die Suchwörter für Titel und Autor getrennt eingegeben werden. Standardmäßig ist die einfache Suche aktiviert (empfohlen).

  4. Einfache Suche
    Tippen Sie Nick Cave Munro in das Buchtitelfeld und klicken Sie anschließend auf die Jetzt auf Thalia.at suchen-Schaltfläche.
  5. Ein grafischer Indikator zeigt Ihnen an, dass die Suche gestartet ist. Nach kurzer Zeit werden die Suchergebnisse angezeigt. Jedes von Thalia gefundene Ergebnis wird in einem eigenen Kasten aufbereitet. Ein Klick auf das Buch führt direkt zur Webseite und weiteren Informationen.

    thalia/thalia09.jpg

    Um mehrfache Ergebnisse zu reduzieren, können Sie einen bestimmten Produkttyp einstellen, z.B. nur Bücher, oder nur eBooks, oder nur Hörbücher.

  6. Strikte Suche
    Für eine exakte Suche aktivieren Sie das Auswahlkästchen "Strikte Suche". Damit wird es erforderlich, Suchwörter strikt nach Titel bzw. Autorenname aufzuteilen. Beispiel: Tippen Sie Argo in das Titelfeld und Herbst in das Autorenfeld.

    thalia/thalia10.jpg

    Es kommt vor, dass Thalia bei der strikten Suche keine Suchergebnisse zurückliefert. Verwenden Sie dann die einfache Suche.

  7. Haben Sie Ihr gewünschtes Buch gefunden, können Sie es mit einem Klick auf das Pluszeichen automatisch in das Twoday-Eintragsformular übernehmen.

    thalia/thalia11.jpg

  8. Titel, Autor, Link und Bild werden in das Formular übernommen. Klicken Sie auf Hinzufügen, um das Buch endgültig in Ihre Bücherliste zu übernehmen.

    thalia/thalia12.jpg

  9. Alle Titel in Ihrer Bücherliste können Sie nach eigenen Wünschen umsortieren. Zum Abschluss klicken Sie auf Sichern um die Änderungen dauerhaft zu speichern.

    thalia/thalia13.jpg

Bücherliste in der Seitenleiste anzeigen

Das Modul "Bücherliste" in die Sidebar integrieren

Damit Ihre Bücherliste in der Seitenleiste Ihres Blogs angezeigt wird, sind folgende Schritte erforderlich:

  1. Klicken Sie in Ihrer Blog-Menüzeile oben auf AdminModule und dann auf Sidebar Module anordnen.Falls Sie Ihre Menüzeile ausgeblendet haben, erreichen Sie die Modul­anordnung alternativ auch durch direkte Eingabe der Adresse http://blogalias.twoday.net/modules/order (blogalias = Ihr Blogname).

    thalia/thalia14.jpg

  2. Wählen Sie das Büchermodul aus (im Twoday-Standard hat dies die Textbezeichnung "Mein Lesestoff") und übertragen Sie es durch Klick auf die entsprechende Schaltfläche in die erste (Sidebar 1) oder zweite (Sidebar 2) Seitenleiste.

    thalia/thalia15.jpg

  3. Nachdem Sie das Büchermodul eingefügt haben, speichern Sie ihre Änderung durch Klick auf Sichern.

    thalia/thalia16.jpg

  4. Klicken Sie auf Weblog ansehen, um die Anzeige des Büchermoduls zu kontrollieren.

    thalia/thalia17.jpg

    In der Seitenleiste werden nun die übernommenen Buchtitel angezeigt. Die Coverbilder haben teilweise unterschiedliche Größen und Titel/Autor sind sehr klein formatiert. Im folgenden Kapitel lesen Sie, wie Sie die Bücher nach Ihren Wünschen formatieren können.

    thalia/thalia18.jpg

Bücher in der Seitenleiste formatieren

Drei weitere Skins anpassen

Für die optische Aufbereitung der Bücherliste sind drei weitere Skins verantwortlich: Site.modReadingItem für den einzelnen Buchtitel, Site.modReadingDivider für den Trennbereich zwischen zwei Büchern und Site.modReading für den gesamten Container der Bücherliste. Die Skins sind sehr schnell und einfach anzupassen.

  1. Klicken Sie in Ihrer Blog-Menüzeile oben auf AdminModule.Falls Sie Ihre Menüzeile ausgeblendet haben, erreichen Sie die Modul­liste alternativ auch durch direkte Eingabe der Adresse http://blogalias.twoday.net/modules/sidebar (blogalias = Ihr Blogname).

    Klicken Sie im Eintrag Bücherliste auf Skins.

    thalia/thalia19.jpg

  2. Alle drei Skins benötigen kleine Anpassungen, um die einzelnen Bestandteile einer Buchtitelanzeige zukünftig besser formatieren zu können.

    thalia/thalia20.jpg

    Die Zahlen oben markieren die Reihenfolge der Änderungen. Klicken Sie also zunächst auf den Skin Site.modReadingItem.

  3. Markieren und kopieren Sie die nachstehenden Zeilen in die Zwischenablage, wechseln Sie in den geöffneten Skin Site.modReadingItem und ersetzen dort den gesamten Inhalt.
    <div class="sbBookItem">
        <% param.ReadingImage %>
        <div class="sbBookAuthor"><% param.ReadingAuthor %></div>
        <div class="sbBookTitle"><% param.ReadingTitle %></div>
    </div>

    Alter Inhalt

    thalia/thalia21.jpg

    Neuer Inhalt

    thalia/thalia22.jpg

    Klicken Sie auf Speichern und Schließen, um die Änderung zu sichern.

  4. Klicken Sie nun auf Site.modReadingDivider und entfernen Sie den gesamten Inhalt des Skins (im Standard ist dies ein einzelnes <br />).

    Alter Inhalt

    thalia/thalia23.jpg

    Neuer Inhalt

    thalia/thalia24.jpg

    Klicken Sie auf Speichern und Schließen, um diese Änderung zu sichern.

  5. Klicken Sie nun auf Site.modReading. Markieren/kopieren Sie die nachstehenden Zeilen in die Zwischenablage, wechseln Sie in den geöffneten Skin und ersetzen dort den gesamten Inhalt.
    <style>
    .sbBookContainer {}
    .sbBookItem { margin-bottom: 20px; font-size: 13px; }
    .sbBookItem img { box-shadow: 3px 4px 6px #ccc; max-height: 120px; }
    .sbBookAuthor { font-style: italic; margin-top: 10px; }
    .sbBookTitle {}
    </style>
    <div class="sbBookContainer">
        <% param.Reading %>
    </div>

    Alter Inhalt

    thalia/thalia25.jpg

    Neuer Inhalt

    thalia/thalia26.jpg

    Klicken Sie auf Speichern und Schließen, um auch diese Änderung zu sichern.

  6. Klicken Sie auf Weblog ansehen, um sich das Ergebnis der Änderungen anzusehen.

    thalia/thalia27.jpg

    Die im Skin Site.modReading definierten Formatanweisungen (CSS-Stile) haben folgendes bewirkt:

    .sbBookItem { margin-bottom: 20px; font-size: 13px; } definiert für jedes Buch einen unteren Abstand von 20 Pixel und stellt eine Zeichensatzgröße von 13 Pixel ein.

    .sbBookItem img { box-shadow: 3px 4px 6px #ccc; max-height: 120px; } erzeugt einen schmalen Schatten um das Buchcover und stellt die Höhe des Bildes auf maximal 120 Pixel ein (die Breite wird automatisch proportional angepasst).

    .sbBookAuthor { font-style: italic; margin-top: 10px; } stellt den Autorennamen in Kursiv dar und definiert einen oberen Abstand (zum Coverbild) von 10 Pixeln.

    Diese Vorbelegungen lassen sich jederzeit nach eigenen Wünschen anpassen. Rufen Sie dazu erneut den Skin Site.modReading auf und passen Sie die Stildefinitionen entsprechend an.
Probleme, Fragen, Ergänzungswünsche?

Falls Sie Probleme mit der Büchersuche bemerken, posten Sie diese bitte zusammen mit einem Screen­shot in die Kommentare.

Wichtiger Hinweis: Der Zugriff auf die Thalia.at Suchfunktion erfolgt über ein technisches Werkzeug (YQL), das von Yahoo bereitgestellt wird. Bei starker weltweiter Nutzung kann eine Überlastungssituation eintreten, in der das Tool keine Ergebnisse zurückmeldet. Wiederholen Sie dann einfach Ihre Suchabfrage.

Um diesen Beitrag zu drucken, klicken Sie bitte in der Menüzeile oben rechts auf das Druckersymbol

module.modReadingSetup, site.modReading/modReadingItem/modReadingDivider © 2015 NeonWilderness — lizensiert unter MIT.

Mittwoch, 11. Februar 2015

Twoday-Tipp #8 - Videos anzeigen

Wichtiger Hinweis

Die in diesem Beitrag beschriebene Erstversion des Videoload-Scripts ist veraltet. Bitte nutzen Sie die neue Version #2, die hier dokumentiert ist.

video2day.jpg

Datum Änderungen / Edits
08.06.2016 Neue Parameter zur Anzeige einer wählbaren Zeitspanne (von/bis) von YouTube-Videos: start und endat
07.02.2016 Audioplattform soundcloud.com neu aufgenommen (Dokumentation siehe Kapitel Videos im Blogbeitrag anzeigen).
15.01.2016 Videoanbieter putpat.tv wurde entfernt (Übernahme durch ampya.com, die keine Einbettungen mehr ermöglichen), Plattform jsfiddle.net zur Anzeige von HTML/CSS/JS-Lösungen neu aufgenommen.
28.10.2015 Videoanbieter blip.tv wurde entfernt (Übernahme durch maker.tv), GIF-Plattform giphy.com neu aufgenommen.
03.03.2015 Plattform vube.com wurde entfernt (Webseite ist inaktiv), Plattform funnyordie.com neu aufgenommen.

Eine der ältesten, am häufigsten nachgefragten und trotzdem stoisch ignorierten Twoday-Nutzer­anforderungen ist die der simplen Anzeige von Videos. Seit die großen Videoplattformen den historischen, in Twoday noch erlaubten Einbettungscode mittels <object> und <embed> zugunsten des moderneren <iframe>-Befehls aufgegeben haben, fühlt sich das Thema Videoeinbindung bei Twoday so an, wie wenn man im Casino zu spät seine Chips auf den Tisch schiebt: "Rien ne va plus!".

Der Grund: Twoday lässt iframe-Befehle in Beitragstexten aus Sicherheits­erwägungen grund­sätzlich nicht zu, filtert diese automatisch aus und lässt dem Nutzer nur die Möglichkeit eines drögen YouTube- oder Vimeo-Textlinks. Unnötig langweilig. Und inkonsequent. Und Zeit, dies zu ändern!

Selbstverständlich hat Twoday ein berechtigtes Sicherheitsinteresse, das es zu respektieren gilt, jedoch gibt es unzweifelhaft gute und sicherheitskonforme Lösungen, zu denen es auch schon vor über 2 Jahren Vorschläge gab. Passiert ist seitdem, wie so oft, nichts.

Die nachstehend beschriebene Open-Source-Lösung ermöglicht Ihnen die einfache und schnelle Videoeinbindung von derzeit 12 verschiedenen Videoplattformen sowie die Anzeige beliebiger MP4-Videodateien.

Das Video-Script einmalig installieren

Nur ein Script — und alles wird gut

Um ab sofort in Ihrem Blog Videos aller großen Plattformen oder auch eigene MP4-Videodateien anzeigen zu können, benötigen Sie nur ein Script, das Sie einmalig im Skin Site.page einbinden:

  1. Melden Sie sich auf Twoday mit Ihrem Account an und rufen Sie Ihr Blog auf.
  2. Wählen Sie in der Menüzeile oben AdminLayout und dann Skins (HTML)
  3. Klicken Sie auf die Überschrift Hauptseite (Site.page), danach in das Feld mit dem Scrollbalken und wandern Sie ganz an das Ende der Anzeige.
  4. Kopieren Sie dort vor das abschließende </body>-Element folgende Zeile hinein:
    	<script type="text/javascript" src="<% staticURL %>cdn/files/videoload-min-js.js"></script>
    Kopieren einfach gemacht: Fahren Sie mit der Maus über das schwarze Codefeld oben und klicken dort auf pop-up. Markieren Sie den Text in dem erscheinenden Pop-Up-Fenster und kopieren Sie ihn in die Zwischen­ablage. Falls bei Ihnen der Link copy angezeigt wird (Rechner mit Adobe Flash-Installation), können Sie darauf klicken, um den Text ohne Pop-Up-Fenster sofort in die Zwischen­ablage zu kopieren. Gehen Sie nun in Ihren Skin Site.page und kopieren dort aus der Zwischenablage an die richtige Stelle vor </body>.Ihr Skin Site.page müsste nun in etwa so aussehen:

    video1.jpg

  5. Klicken Sie auf "Speichern und Schließen" um Ihre Änderungen zu sichern. Sie können nun zu jeder Zeit in Ihren Beiträgen Videos einbinden und anzeigen.
Das Script ist so geschrieben, dass es die Videofunktion nur dann lädt, wenn auf der aktuell anzuzeigenden Seite tatsächlich ein Videobefehl gefunden wird. Es gibt also keine Verzögerung bei den Ladezeiten für Seiten ohne Videos.

Videos im Beitragstext einbinden

Videos im Blogbeitrag anzeigen

Um ein Video in einem Beitrag anzuzeigen, verwenden Sie einen einfachen DIV-Befehl, der z.B. für ein YouTube-Video so aussieht:

<div class="html5video youtube" id="DyfM7oLIlp0"></div>

An der feststehenden Zeichenkette html5video erkennt das eingebundene Script, dass hier ein Video angezeigt werden soll. Die darauf folgende Kennung beschreibt die Plattform, von der das Video stammt. Derzeit kann das Script Videos von folgenden Anbietern generieren:

KennungVideoanbieter
youtubewww.youtube.com
vimeowww.vimeo.com
vevowww.vevo.com
giphywww.giphy.com
dailymotionwww.dailymotion.com
jsfiddlewww.jsfiddle.net
soundcloudwww.soundcloud.com
funnyordiewww.funnyordie.com
liveleakwww.liveleak.com
vinewww.vine.co
metacafewww.metacafe.com
myvideowww.myvideo.de
othereigene URL eines MP4-Videos

Im DIV-Parameter id wird die ID des jeweiligen Videos vermerkt. Diese Video-ID findet sich meist recht einfach im iframe-Befehl des Videos (Einbettungs­code des Videoanbieters) und besteht i.d.R. aus einer kurzen Kombination von Zahlen und Buchstaben. Weiter unten stelle ich ein Tool vor, das die notwendigen Daten voll­automatisch aus dem kopierten iframe-Einbettungs­code ermittelt und für Sie den korrekten Twoday-HTML-Befehl gebrauchsfertig zusammenstellt.

Ergänzende Videoparameter

Breite

Im oben gezeigten DIV-Befehl nimmt das Video die volle Breite des umgebenden Containers ein, d.h. es füllt die Twoday-Beitragsspalte horizontal vollkommen aus. Falls Sie das Video kleiner darstellen wollen, können Sie zusätzlich eine Breitenangabe machen. Der Befehl für das obige Video in einer Breite von 350 Pixeln lautet dann:

<div class="html5video youtube width-350" id="DyfM7oLIlp0"></div>

Seitenverhältnis

Die meisten Videos haben ein Seitenverhältnis von 16:9, d.h. ein Verhältnis von Breite zu Höhe von 1,7778. Manche Videos haben noch ein 4:3 Verhältnis (1,3333) und wieder andere eine sehr individuelle Streckung (z.B. bei Breitbildformaten). Das Script verwendet im Standard die 16:9-Anzeige. Wenn das Video verzerrt dargestellt wird, können Sie ein eigenes Seitenverhältnis einstellen. Der Befehl für ein Putpat-Video mit einem Seitenverhältnis von 2,4 und einer Breite von 400 Pixeln lautet dann:

<div class="html5video putpat ratio-2.4 width-400" id="3qs5vhn"></div>

Eigene MP4-Videodateien

Sie können auch eigene MP4-Videodateien in einem Videoplayer anzeigen lassen. Diese müssen eine öffentlich erreichbare URL besitzen, also z.B. bei einem Cloudspeicheranbieter wie Dropbox, GoogleDrive oder auf eigenem Webspace liegen. Für die Anzeige wird der bekannte Open Source HTML5 Videoplayer VideoJS verwendet. Die Adresse/URL des Videos wird im Parameter id übergeben. Der Befehl für die Einbindung eines eigenen MP4-Videos hat dann folgendes Format:

<div class="html5video other ratio-2.4" id="https://dl.dropboxusercontent.com/u/16775880/movies/oceans-clip.mp4"></div>

Posterbild für eigene MP4-Videodateien

Über einen weiteren Parameter weisen Sie die Videofunktion an, ein Posterbild im Videobereich anzuzeigen, solange das Video noch nicht vom Anwender gestartet wurde. Das Posterbild ist ein "Standbild" in einem beliebigen Bildformat (z.B. jpg, png, gif, bmp) und muss sich an gleichem Ort wie das MP4-Video befinden.

Wenn ein MP4-Video im Pfad http://www.meinewebadresse.de/videos/meinvideo.mp4 zu finden ist, muss ein zugehöriges jpg-Standbild die Adresse http://www.meinewebadresse.de/videos/meinvideo.jpg besitzen. Für die Anzeige eines Standbilds ergänzen Sie einfach poster als zusätzlichen Übergabewert. Ist das Standbild nicht vom Typ jpg, so definieren Sie je nach Dateityp ergänzend ein image-png, image-gif oder image-bmp.

Beispiel: Für ein MP4-Video in 500 Pixel Breite, einem Seitenverhältnis von 2,4 und einem gif-Standbild lautete der DIV-Befehl dann so:

<div class="html5video other width-500 ratio-2.4 poster image-gif" id="https://dl.dropboxusercontent.com/u/16775880/movies/oceans-clip.mp4"></div>

Der poster-Parameter funktioniert nur bei MP4-URL-Videos (Typ other)! Bei Videos von Plattformen wie z.B. YouTube hat er keine Wirkung.
Anzeige einer wählbaren Zeitspanne (von/bis) von YouTube-Videos

new.pngFalls Sie nur einen selektiven Ausschnitt eines YouTube-Videos zeigen möchten, d.h. ab einer gewissen Stelle des Videos starten und/oder an einer bestimmten Stelle des Videos enden wollen, so verwenden Sie dafür den start- bzw. den endat-Parameter. Beide Angaben erfordern einen zusätzlichen Zeitwert in Sekunden. Dazu ist die Beginn- bzw. Endestelle in Sekunden umzurechnen, z.B. 21:32 entspricht 1292 (21*60+32).

Beispiel: Um einen Song eines längeren Festival-Videos von Stelle 21:32 bis Stelle 31:35 anzuzeigen, ist folgender Befehl zu verwenden:

<div class="html5video youtube start-1292 endat-1895" id="qNNecZkPY2Y"></div>

Um nur ab einer bestimmten Stelle zu starten, reicht die alleinige Angabe des start-Parameters.

Anzeige von jsfiddle-Codebeispielen

jsfiddle.net ist eine Plattform, mit der das Zusammenspiel von HTML-, CSS- und JavaScript-Elementen dargestellt, getestet und visualisiert werden kann. Fertige Lösungen können zu Lernzwecken auf anderen Webseiten eingebunden werden. Das hat zwar wenig mit Videos zu tun, allerdings ist der Einbettungsbefehl fast identisch mit einem Video-iframe-Kommando. Zur Einbindung eines jsfiddle-iFrames wird — ähnlich der Videofunktion — nur eine ID benötigt:

<div class="html5video jsfiddle" id="{id-des-jsfiddles}"></div>

Die benötigte ID des jsfiddles entspricht der ID-Kennung hinter der Adressangabe 'https://jsfiddle.net/':video3.jpg

Zusätzlich können Sie den Umfang der Anzeige festlegen. Im Standard zeigt das eingebettete jsfiddle alle vier Komponenten (html, css, js und result) an. Mit Hilfe des scope-Parameters können Sie diesen Umfang eingrenzen (Elemente durch Komma, jedoch ohne Leerzeichen, trennen, z.B. scope-css,html):

<div class="html5video jsfiddle scope-html,css,js" id="tx2w4s19"></div>

Für das Aussehen des Einbettungsobjekts stehen die Layoutversionen hell ("light") und dunkel ("dark" = Standard) zur Verfügung — diese werden über den color-Parameter aktiviert, z.B. so:

<div class="html5video jsfiddle color-light scope-html,css,js" id="tx2w4s19"></div>

Einbindung von Soundcloud-Audiostücken
soundcloud.png

soundcloud.com ist eine Musikplattform, deren Audiosamples in Webseiten eingebettet und abgespielt werden können. Da die Einbindung sich sehr ähnlich zu der einer Videodatei darstellt, kann die Videoload-Lösung dies einfach mit erledigen: benötigt wird wie immer nur die ID des Audiostücks, die sich relativ einfach aus dem iframe-Code ermitteln und kopieren lässt:video4.jpg

Noch einfacher ist es, den gesamten iframe-Code des Audiostücks in das vorhandene Videotool zu kopieren — das Tool erkennt die Quelle und die ID automatisch und liefert Ihnen den fertigen Twoday-konformen HTML-Befehl als Kopiervorlage:video5.jpg

Ein Beispiel für die Einbindung des Audiosamples Be merciful der Gruppe Kula Shaker würde demnach mit folgendem Code erzeugt werden:

<div class="html5video soundcloud" id="20636707"></div>

Um die Soundcloud-Anzeige etwas schmaler zu gestalten, kann man den Zusatz stripe ergänzen. Der Befehl

<div class="html5video soundcloud stripe" id="20636707"></div> erzeugt

Tool für Twoday-Videocode nutzen

Twoday-Videocode automatisch generieren

Es ist evtl. etwas mühsam, die oben beschriebenen Parameter für einen Videoaufruf im Kopf zu behalten oder erst wieder nachzuschlagen, wenn man sie für ein Video benötigt. Aus diesem Grund habe ich zusätzlich ein kleines Online-Tool erstellt, das den Twoday-Code automatisch für Sie zusammenstellt.

Sie müssen nur noch den vom Videoanbieter bereitgestellten iframe-Einbettungscode in das Formularfeld iframe-Code 1 des Tools kopieren. Dieses erkennt den Videoanbieter, extrahiert die korrekte Video-ID, errechnet aus Breite und Höhe das empfohlene Seitenverhältnis und stellt diese Ergebniswerte im Bereich Optionen Videoanzeige 2 ein.

Dort können Sie nun noch nach Wunsch eine kleinere Breite einstellen oder ein anderes Seitenverhältnis wählen. Bei jeder Änderung wird der entsprechende Twoday-HTML-Code neu generiert 3 und als Kopiervorlage angezeigt.

video2.jpg

Direkt unter dem Feld HTML-Code wird das gewünschte Video auf Basis Ihrer gewählten Einstellungen eingeblendet. Entspricht alles Ihren Vorstellungen, kopieren Sie den generierten HTML-Code einfach in Ihren Beitragstext.

Das Videotool finden Sie dauerhaft unter folgender Linkadresse:

http://neonwilderness.twoday.net/stories/videotool

oder per Schaltfläche hier im Beitrag sowie rechts unten in der Sidebar:

Videotool aufrufen...

Probleme, Fragen, Ergänzungswünsche?

Falls Sie Probleme mit dem Videotool oder bei der Anzeige von Videos bemerken, posten Sie diese bitte zusammen mit einem Screen­shot in die Kommentare. Dies gilt auch für evtl. Änderungs-/Erweiterungs­wünsche — z.B. zusätzliche Video­anbieter/Platt­formen, die integriert werden sollen.

Falls ein Videofenster schwarz bleibt, liegt der Grund meist darin, dass diese Plattform Flash-Videos verwendet. Dazu muss auf Ihrem Endgerät Adobe Flash installiert sein, was z.B. auf allen Apple- und den meisten Android-Geräten nicht der Fall ist.

Demovideos anzeigen...

Um diesen Beitrag zu drucken, klicken Sie bitte in der Menüzeile oben rechts auf das Druckersymbol

videoload.js und video2day.js © 2015-2016 NeonWilderness — lizensiert unter MIT. Quelldateien:  GitHub.
video.js © 2013 Brightcove, Inc. — lizensiert unter Apache2.

Dienstag, 30. Dezember 2014

Twoday-Tipp #7 - Beitragsmarkierung

newupdatestory.jpg

In tiefer Weihnachtsnacht wurde dem Forum die Frage beschert, ob es möglich sei, Beiträge und Kommentare in der Seitenspalte je nach Aktualisierungsstatus automatisch mit Neu oder Update zu kennzeichnen. Und auch hier heißt die richtige Antwort wieder: "Im Prinzip Twoday-Standard nein, jedoch, mit zwei kleinen Ergänzungen in den richtigen Skins geht es doch.

Zwar bietet die Twoday-Software keine direkte Funktion, um einen neuen von einem geänderten Beitrag zu unterscheiden, allerdings gibt es zu jedem Beitrag (und auch zu jedem Kommentar) zwei Zeitstempelfelder, die per Makro abrufbar sind:

  1. <% story.createtime %> gibt das Ersterstellungsdatum eines Beitrags,
  2. <% story.modifytime %> das Datum der letzten Beitragsänderung wieder.

Wenn modifytime also gleich createtime ist, darf man davon ausgehen, dass der betreffende Beitrag noch nie geändert wurde, also "Neu" ist.

Relativierung: Dies wirft allerdings folgende Fragen auf: Wie lange gilt ein neuer Beitrag als "neu"? Soll er nach Ablauf einer gewissen Zeitspanne immer noch als "neu" gekennzeichnet werden? Wohl eher nicht. Und ab wann gilt ein neuer Beitrag als "geändert"? Bereits dann, wenn man drei Minuten nach dem Anlegen einige Tippfehler korrigiert?

Diese Festlegungen sind individuell und können nach eigenem Gusto in der unten beschriebenen Lösung angepasst werden. Als Vorbelegung sind folgende Regeln abgebildet:

  1. Ist ein Beitrag oder Kommentar älter als 7 Tage, erhält er keine Kennzeichnung mehr als "neu" oder "geändert".
  2. Liegt zwischen Änderungsdatum und Erstellungsdatum nicht mehr als eine Minute, so gilt der Beitrag weiter als "neu".
Der Abstand von einer Minute darf übrigens nicht auf Null verringert werden, da Twoday manchmal schon beim Neuanlegen eine (falsche) Minutendifferenz zwischen den beiden Zeitstempeln hat.
Installation der Beitragskennzeichnung

Um die Beitragsmarkierung zu aktivieren, müssen sowohl im Skin Site.style sowie in Story.historyview kleine Ergänzungen vorgenommen werden:

  1. Melden Sie sich auf Twoday mit Ihrem Account an und rufen Sie Ihren Blog auf.
  2. Wählen Sie in der Menüzeile oben AdminLayout und dann Skins (HTML)
  3. Klicken Sie auf die Überschrift Stylesheet (Site.style), danach in das Feld mit dem Scrollbalken und wandern Sie ganz an das Ende der Anzeige.
  4. Kopieren Sie dort folgende Zeilen hinein:
    .historyItem:before { content: ""; padding: 2px 4px; color: #fff; border-radius: 3px; font-size: 10px; font-weight: bold; margin-right: 5px; vertical-align: bottom; display: block; }
    .historyItem.new:before { content: "New"; background: #ee2424; display: inline; }
    .historyItem.update:before { content: "Update"; background: #aaa; display: inline; }
    Kopieren einfach gemacht: Fahren Sie mit der Maus über das schwarze Codefeld und klicken dort auf pop-up. Markieren Sie den Text in dem erscheinenden Pop-Up-Fenster, kopieren Sie ihn in die Zwischenablage und von da in das Skin-Textfeld.
    Ihr Stylesheet müsste nun in etwa so aussehen:

    newupdatestory3.jpg

  5. Klicken Sie auf "Speichern und Schließen" um Ihre Änderungen zu sichern.
  6. Scrollen Sie nun in der Skinübersicht weiter herunter bis zur Überschrift "Elemente in den Seitenleisten" und klicken Sie dort auf »kürzlich geändert« Eintrag (Story.historyview).
  7. Kopieren Sie das nachstehende Script vor das letzte </div> in diesem Skin:
    <script type="text/javascript">
        var now = Date.now(), modified = Date.parse("<% this.modifytime format="yyyy/MM/dd HH:mm" %>"), created = Date.parse("<% this.createtime format="yyyy/MM/dd HH:mm" %>");
        if (now - modified < 7*24*60*60*1000){
            scriptTag = document.getElementsByTagName("script");
            scriptTag[scriptTag.length-1].parentNode.className += (modified - created > 60000 ? " update" : " new");
        }
    </script>
    
  8. Ihr Modulcode sollte nun folgendermaßen aussehen:

    newupdatestory1.jpg

  9. Klicken Sie nach erfolgter Änderung unten auf "Speichern und Schließen". In der Anzeige unter "Aktuelle Beiträge" sollten nun farbige Markierungen neben den Beiträgen auftauchen (Hard-Reload via Strg-F5 nicht vergessen!).

    newupdatestory0.jpg

Markierung auch für Kommentare aktivieren

Falls Sie auch Kommentare automatisch mit "Neu/Geändert"-Markierungen versehen wollen, müssen Sie noch eine weitere Änderung vornehmen. Statt Story.historyview heißt der entsprechende Skin Comment.historyview. Dieser wird nicht direkt über die Skinseite zur Änderung angeboten, kann aber leicht folgendermaßen aufgerufen und verändert werden:

  1. Rufen Sie zunächst erneut den bereits geänderten Skin Story.historyview auf (siehe oben).
  2. Gehen Sie nun oben in die Browseradresszeile und ersetzen Sie "Story" durch "Comment"

    newupdatestory2.jpg

  3. Nachdem Sie die Datenfreigabe-/Return-Taste gedrückt haben, wird der Skin Comment.historyview angezeigt. Kopieren Sie das oben erwähnte Script auch hier vor das letzte </div> und speichern Sie die Änderung.
Zeitspannen ändern

Die vorbelegte Zeitspanne von 7 Tagen, ab der keine Markierungen mehr angezeigt werden, kann einfach geändert werden.

Twoday-Zeitstempel reflektieren vergangene Millisekunden seit einem bestimmten Fixdatum. Die Differenz aus modifytime und createtime ist also eine Millisekundenzahl. Im Script finden Sie eine Stelle now - modified < 7*24*60*60*1000, die die Millisekundenzahl für 7 Tage darstellt. Wollen Sie die Markierung beispielsweise erst nach 14 Tagen stoppen, ersetzen Sie 7 durch 14.

Sie können auch ändern, wie lange ein Beitrag die Markierung "Neu" behält, obwohl Sie ihn zwischenzeitlich ändern.

Im Script wird an der Stelle modified - created > 60000 geprüft, ob bereits eine Minute (60 Sekunden * 1000 Millisekunden) vergangen ist, bevor eine "Änderung" konstatiert wird. Wollen Sie z.B. 4 Stunden für eigene Anfangskorrekturen reservieren, dann ersetzen Sie die 60000 durch 4*60*60*1000.
Farben oder Text ändern

Farben oder Text ändern Sie im Stylesheet (Skin Site.style). Die Neu-Markierung wird durch den eingefügten Eintrag .historyItem.new:before gesteuert, die Geändert-Markierung entsprechend durch .historyItem.update:before. Die Hintergrundfarbe wird über den Parameter background: #farbe gesetzt. Den richtigen Wert für Ihre Wunschfarbe können Sie z.B. hier ermitteln.

Texte ändern Sie im Parameter content. Dort können Sie für "New" und "Update" z.B. "Neu" und "Geändert" oder beliebige andere kurze Texte einsetzen.

Problematische Änderungserkennung unter Twoday

Die Twoday-Software erkennt nicht immer zuverlässig Textänderungen an Beiträgen oder Kommentaren (wodurch dann der modifytime-Zeitstempel nicht verlässlich gesetzt wird). Z.B. wird keine Änderung erkannt, wenn man nur den Titel ändert. Auch im Textbereich eines Beitrags/Kommentars werden Änderungen erst ab einem bestimmten, größeren Umfang registriert.

Wenn man also eine Änderungserkennung erzwingen will, kopiert man eine längere Zeichenkette, sichert einmal, löscht diese wieder und sichert erneut. Umständlich, aber das funktioniert dann.

Um diesen Beitrag zu drucken, klicken Sie bitte in der Menüzeile oben rechts auf das Druckersymbol

© 2014 NeonWilderness — lizensiert unter MIT.

Donnerstag, 4. Dezember 2014

Twoday-Tipp #6 - Berechtigungen für Twoday-Module

module2role/role01.jpg

Die Anfrage von LadySaville im Hilfe-Forum wirft eine interessante Fragestellung auf: Wie kann man ausgewählte, eigene Twoday-Module bestimmten Mitgliedergruppen zuordnen und die Modulanzeige auf diese beschränken?

Beispiel: Als Blogbesitzer möchte ich die Liste meiner Abonnements (Sidebar-Modul: "Abonnements"), meine Bücherliste (Sidebar-Modul: "Bücherliste") sowie meine Kommentare auf anderen Blogs (Sidebar-Modul: "Meine Kommentare") nur meinen eingetragenen Abonnenten anzeigen. Wie kann man dies realisieren?
Das Twoday-Berechtigungsmodell

Für plattforminterne Berechtigungsprüfungen verwendet Twoday 5 Rollen­definitionen, mit denen jeweils bestimmte Erlaubnisse verbunden sind. Der Berech­tigungs­umfang entspricht einer invertierten Pyramide und wächst vom einfachen Blogleser mit minimaler Berechtigung bis zum Administrator mit maximalen Berechtigungen an. Jede höhere Stufe umfasst automatisch auch alle Berechtigungen der darunter liegenden Stufen.
Beispiel: Die Rolle "Contributor" hat neben den speziellen Berechtigungen für diese Rolle auch alle Berechtigungen eines Subscribers oder Bloglesers.

module2role/role02.jpg

Ein Blogbesitzer (Eigentümer) ist gleichzeitig immer auch "Administrator". Ein normaler Abonnent erhält automatisch die Standardberechtigung "Subscriber", kann aber vom Administrator des Blogs (individuell) auf höhere Berechtigungsstufen angehoben werden. Jeder Besitzer eines Twoday-Blogs kann die beschriebenen Berechtigungsrollen unter AdminMitglieder (bzw. der Direkt-URL blogname.twoday.net/members/main) an beliebige andere Twoday-Mitglieder vergeben oder diese auch wieder zurücknehmen:

module2role/role03.jpg

Als wahrscheinlich häufigste Anwendungsfälle (Use-Cases) für Modulberechtigungen kann man sich folgende Szenarien vorstellen:

  • Twoday-Module, die man nur seinen eingetragenen Abonnenten zeigen will,
  • Module, die man nur selbst als Blogbesitzer (respektive Administrator) angezeigt bekommen soll.

Trotz dieser zwei plausibelsten Fälle habe ich die Routine zur Berechtigungsprüfung sofort allgemeingültig realisiert, d.h. dass prinzipiell alle definierten Twoday-Rollen für Berechtigungsprüfungen verwendet werden können.

Installation der Berechtigungsprüfung für Twoday-Module

Die Aktivierung der Berechtigungsprüfung auf Modulebene ist sehr einfach und besteht in der Ergänzung zweier Zeilen im Skin Seitenleiste 2 (Site.sidebar02):

  1. Melden Sie sich auf Twoday mit Ihrem Account an und rufen Sie Ihren Blog auf.
  2. Wählen Sie in der Menüzeile oben AdminLayout und dann Skins (HTML)
  3. Scrollen Sie herunter bis zur Überschrift "Seitenleisten" und klicken Sie dort auf Seitenleiste 2 (Site.sidebar02).

    module2role/role04.jpg

  4. Geben Sie dort hinter der vorhandenen Zeile <% site.sidebarItems for="sidebar02" %> die nachstehenden zwei neuen Zeilen ein:
    <div id="loginStatus" style="display:none"><% site.loginstatus %></div>
    <script src="//static.twoday.net/cdn/files/module2role-min-js.js">
  5. Ihr Modulcode sollte nun folgendermaßen aussehen:

    module2role/role05.jpg

  6. Klicken Sie abschließend unten auf "Speichern und Schließen":

    module2role/role06.jpg

    Fertig! Damit haben Sie die Berechtigungsprüfung prinzipiell aktiviert und können nun daran gehen, einzelne Module bestimmten Rollen zuzuordnen.

Module bestimmten Twoday-Rollen zuordnen

Unter "Module" versteht man diejenigen Elemente, die Sie in Ihre zwei Sidebars aufnehmen können. Klicken Sie in Ihrer Blog-Menüzeile auf AdminModule und dann Sidebar Module, um sich die 26 verfügbaren Module anzeigen zu lassen.

Nehmen wir an, Sie haben das Modul "Free-Text (4)" in Ihre Sidebar aufgenommen, wollen seinen Inhalt aber nur Ihren Contributoren anzeigen. Um das Modul also der Berechtigung "Contributor" zuzuordnen, gehen Sie in die Einstellungen zu diesem Modul und ergänzen in der Überschrift ganz einfach den Text @[Contributor] und sichern danach Ihre Änderung:

module2role/role07.jpg

Wollen Sie ein Modul nur Ihren eingetragenen Abonnenten zeigen, ergänzen Sie ein @[Subscriber] in der Überschrift. Soll ein Modul nur für Sie als Blogbesitzer (=Administrator) sichtbar sein, fügen Sie stattdessen ein @[Administrator] an.

Beim Aufruf des Blogs wird das obige Beispiel folgendermaßen in der Sidebar angezeigt — natürlich nur, wenn man über die Berechtigung Contributor oder höher verfügt:

module2role/role08.jpg

Wie man sehen kann, entfernt die Routine vor der Anzeige des Moduls den Berechtigungszusatz aus der Überschrift.

Verfügt man als Aufrufer der Webseite nicht über die erforderliche Berechtigung, wird das betreffende Modul aus der Sidebar-Anzeige entfernt.

Auf diese Weise können Sie nun alle in Ihrer Sidebar angezeigten Module — so das Sinn macht — nacheinander gewünschten Berechtigungsgruppen zuordnen. Hat ein Modul keinen Berechtigungszusatz, so bleibt es grundsätzlich für alle Blogbesucher sichtbar.

Um diesen Beitrag zu drucken, klicken Sie bitte in der Menüzeile oben rechts auf das Druckersymbol

© 2014 NeonWilderness — module2role ist OpenSource und lizensiert unter MIT.Quellcode

Mittwoch, 5. November 2014

Twoday-Tipp #5 - Blog Export on steroids

export/blog2go.jpg

Um diesen Beitrag zu drucken, klicken Sie bitte in der Menüzeile oben rechts auf das Druckersymbol

Datum Änderungen / Edits
19.01.2016 Neue Exportversion 0.96 - Verbesserte NiceUrl-Verarbeitung und -Konvertierung, Erweiterung der Konsolennachrichten im Debugging-Modus (Änderungen)
13.01.2016 Neue Exportversion 0.95 - Neue Debug- und Timeout-Parameter, Umsetzung von NiceUrls auf Standard-Twoday-Beitragsnummern (ermöglicht bessere Übernahme und Querreferenzierung in Wordpress), Bessere Erkennung/Verarbeitung von image-Macros (Änderungen)
09.03.2015 Neue Exportversion 0.92 - Blogexport für wordpress.com-Nutzer, Gast-Kennung in Benutzernamen, Übernahme der Beitrags-ID (Änderungen)
25.02.2015 Neue Exportversion 0.91 - Textlinks werden nun auf Anforderung automatisch in klickbare HTML-Links gewandelt (Autolink-Funktion)
20.02.2015 Neue Exportversion 0.9 - Bereinigung potenzieller Formatfehler für Datum/Autor bei unregistrierten Autoren (Credits: Archivalia)
06.11.2014 Browserkompatibilität
Das Problem

Die Sicherung und Übertragung von Twoday-Bloginhalten auf andere Plattformen mit Hilfe der vorhandenen Standardexportfunktion konfrontiert Twoday-Blogger mit erheblichen Problemen und umfangreichen manuellen Nachpflegearbeiten. Die Gründe dafür sind vielfältig:

  • das von Twoday ausgegebene MovableType-Format ist nicht korrekt (die Wordpress-Importfunktion für dieses Format kennt z.B. weder SHOWONFRONT: , EDITABLEBY:, DISCUSSIONS: oder REPLY:EMAIL: müsste eigentlich URL: heißen und ein TITLE: für Kommentare ist unzulässig),
  • wichtige Informationen werden nicht bzw. nicht korrekt exportiert,
  • Antworten auf Kommentare werden falsch als fortlaufender Kommentar eingespielt, wodurch Struktur und Lesbarkeit der Inhalte leiden,
  • Offline-Beiträge werden prinzipiell nicht für einen Export angeboten,
  • eine Selektion oder Eingrenzung auf bestimmte Beiträge (z.B. nach Kategorien oder Datum) ist nicht möglich.

Gleichwohl ist das Bedürfnis verständlicherweise groß, auf Basis des allgemeinen Twoday-Zustands, einer gefühlten Plattform-Obsoleszenz sowie allgemeiner Absetzbewegungen seine Blogdaten bestmöglich gesichert zu wissen — auch, wenn man selbst keinen unmittelbaren Wechsel plant.

Die Lösung

Im folgenden stelle ich eine selbst programmierte Lösung vor, die rein anwenderseitig alle Beiträge und Kommentare/Antworten eines Blogs in korrektem, sofort weiterverwendbaren MovableType-Format ausgibt. Dabei benötigt sie keinerlei Twoday-Ressourcen (z.B. freien Blogspeicherplatz für die Exportdatei), erlaubt verschiedene Auswahloptionen und stellt zusätzlich eine Liste zur Verfügung, in der alle verwendeten statischen Twoday-Bilder aufgeführt werden.

Vorteile / Eigenschaften der Exportlösung:
  • Auswahlmöglichkeiten: Beiträge können nach Zeitraum (von-bis), Status (Alle, Nur Veröffentlichte, Nur Unveröffentlichte), Kategorie/n und Anzahl selektiert werden.
  • Sicherheit: nur Sie als angemeldeter Administrator können Blogbeiträge exportieren; exportierte Daten werden nur auf Ihrem Rechner gespeichert.
  • Struktur: Ein zusätzlich bereitgestelltes Wordpress-Import-Plugin stellt sicher, dass Kommentare und Antworten mit der Originalstruktur (Einrückung) in Wordpress eingespielt werden.
  • Bilderservice: Eine verlinkte Referenzliste mit allen zu übertragenden statischen Twoday-Bildern ermöglicht ein einfaches Anklicken und Speichern aller relevanten Blogbilder.
  • Einfachheit: Die Gesamtlösung wird als gepackte Layoutdatei (zip) bereitgestellt und steht unmittelbar nach dem einfachen Import des zusätzlichen Layouts zur Verfügung. Es sind keine weiteren manuellen Eingriffe erforderlich.
  • Kapselung: Die neue Exportfunktion ist vollständig im Layout twodayExport gekapselt. Andere Layouts, Skins oder Blogelemente werden nicht verändert.
  • Aktualität: Die Lösung verfügt über eine eigene Versionsprüfung, so dass Sie immer über aktuelle Softwareupdates informiert sind.

Das letzte Kapitel beschreibt außerdem detailliert, wie die aus Twoday exportierten Daten ohne manuelle Pflegetätigkeit vollständig nach Wordpress importiert werden können.

Installation und Nutzung

Die Exportlösung installieren

Die Layoutdatei twodayExport.zip

Eine Layoutdatei enthält u.a. verschiedene Skins, mit denen Aussehen und Funktionalität eines Twoday-Blogs festgelegt werden. Ein Blog kann mehrere unterschiedliche Layouts besitzen, von denen jedoch immer nur eines aktiv sein kann. Dieses aktive Layout wird dazu verwendet, die Bloginhalte (Beiträge) für Blogbesucher aufzubereiten und anzuzeigen.

Währenddessen können Sie als Blogbesitzer (unsichtbar für normale Leser) ein anderes vorhandenes Layout testen — diese Möglichkeit macht sich die Exportlösung zunutze, die ihre neuen Exportfunktionen in einer eigenständigen Layoutdatei bündelt.

Das neue Layout installieren

  1. Laden Sie die Layoutdatei herunter und speichern Sie sie in ein beliebiges Arbeitsverzeichnis:  twodayExport Layout downloaden
  2. Melden Sie sich mit Ihrem Twoday-Account an, rufen Sie Ihr Blog auf und klicken im Menü auf AdminLayout
  3. Klicken Sie im Layoutmenü auf Meine Layoutsexport/tdexp01.jpgAlternativ (wenn Sie z.B. die Menüzeile ausgeblendet haben), können Sie die Layoutübersicht sofort durch Anhängen von layouts/main an Ihre Blog-URL erreichen (Bsp.: http://neonwilderness.twoday.net/layouts/main)
  4. Klicken Sie im Layout-Übersichtsbild auf Layout importierenexport/tdexp02.jpg
  5. Klicken Sie auf Datei auswählen und suchen/öffnen Sie die in Schritt 1 heruntergeladene Layoutdatei.export/tdexp03.jpg
  6. Nachdem Sie die Layoutdatei zugeordnet haben, scrollen Sie ganz nach unten und klicken auf Importieren.export/tdexp04.jpgexport/tdexp05.jpg
  7. Oben sollte nun eine Nachricht über den erfolgreich verlaufenen Import angezeigt werden. Das Layout twodayExport wird nun in der Übersichtsliste aufgeführt. Es muss/sollte NICHT aktiviert werden, da es kein "Besucherlayout" ist, sondern ausschließlich die Aufgabe hat, für Sie als Blog-Administrator Beiträge zu exportieren. Klicken Sie hierzu auf testen & bearbeiten.export/tdexp06.jpg
  8. Sobald Sie in den Testmodus gewechselt sind, erinnert Sie eine entsprechende Nachricht über die Dauer der Testphase, dass Sie derzeit nicht das normale Layout sehen. Klicken Sie nun auf Weblog ansehen, um die Admin-Seiten zu verlassen!export/tdexp07.jpg
  9. Nach jedem Testbeginn und -ende sollten Sie einmal einen Hard Reload ausführen (Strg-F5 für Windows bzw. Cmd-Umschalt-R für Mac), damit vorherige Layoutformate aus dem Browserspeicher (Cache) entfernt werden und das neue Layout korrekt aufgebaut werden kann. Ihre Anzeige sollte nun folgendem Bild entsprechen:export/tdexp08.jpg
  10. Die Installation ist damit vollständig abgeschlossen. Im nächsten Kapitel lernen Sie, wie Sie das neue Layout nutzen, um Beiträge auszuwählen und zu exportieren. Nachdem Sie die gewünschten Exporte durchgeführt haben, reicht ein Klick auf Test beenden sowie ein weiterer Hard Reload (vgl. Punkt 9), damit auch für Sie als Administrator wieder das gewohnte Layout angezeigt wird.

    Für zukünftige Exporttätigkeiten reicht es aus, unter Meine Layouts neben twodayExport erneut auf testen & bearbeiten zu klicken (vgl. Punkt 7).

    Sollten Sie das Exportlayout dauerhaft nicht mehr benötigen, können Sie es unter Meine Layouts auch problemlos löschen.

Bloginhalte auswählen und exportieren

Vorarbeiten

Um Bloginhalte selektieren und exportieren zu können, muss die twodayExport-Layoutdatei erfolgreich installiert und außerdem durch Klick auf testen & bearbeiten in den Testmodus geschaltet worden sein (vgl. Kapitel Die Exportlösung installieren). Als Administrator Ihres Blogs sehen Sie beim Aufruf nun folgendes Bild:
export/tdexp08.jpgDie Schaltfläche "Blog exportieren..." wird ausschließlich für angemeldete Administratoren angezeigt.

Beiträge für einen Export auswählen

  1. Klicken Sie auf Blog exportieren. Es wird folgendes Auswahlfenster angezeigt (der Rest des Bildschirms wird leicht abgedunkelt). Klicken Sie zunächst oben rechts auf Info.export/tdexp09.jpg
  2. Es wird eine kurze Information angezeigt. Klicken Sie nun auf Versionscheck.export/tdexp10.jpg Die Exportlösung überprüft selbsttätig, ob es eine aktuellere, verbesserte Version der Software gibt und informiert Sie über das Ergebnis.export/tdexp11.jpgFalls eine neuere Version gefunden wurde, wird dies mit einer gelben Warnmeldung angezeigt.export/tdexp12.jpgLaden Sie in diesem Fall die neue Programmversion über den angezeigten Link herunter. Schließen Sie die Anwendung (Klick auf Info, danach auf Abbrechen), löschen Sie unter Meine Layouts das bisherige Layout twodayExport und importieren Sie es neu (vgl. Kapitel Die Exportlösung installieren).
  3. Schließen Sie die Information mit einem erneuten Klick auf Info. Im Auswahlfenster sehen Sie Ihre verschiedenen Möglichkeiten, Beiträge für einen Export auszuwählen. Wenn Sie alle Beiträge exportieren wollen, wählen Sie die Option "Alle" für Zeit, Status, Kategorie und Anzahl. Andernfalls können Sie durch Klick auf Zeitspanne und Eingabe eines Von-Bis-Zeitraums Ihre Beiträge eingrenzen:export/tdexp13.jpg
  4. Im Auswahlfeld Status können Sie den gewünschten Beitragsstatus abfragen:export/tdexp14.jpg
  5. Falls Sie nur eine (oder mehrere) bestimmte Kategorien exportieren wollen, können Sie diese über die Auswahlbox Kategorie festlegen:export/tdexp15.jpg
    Neben der Auswahlmöglichkeit "Alle" sowie "Unkategorisiert" und "Unveröffentlicht" werden alle Themen gelistet, die Sie in Ihrem Blog verwenden.
  6. Ergänzend haben Sie auch die Möglichkeit, Ihren Export über eine Anzahlfestlegung in kleinere Pakete zu unterteilen. Dies macht aber nur bei sehr großen Blogs Sinn oder wenn Sie den Exportprozess mit einer kleineren Anzahl von Beiträgen testen möchten (voreingestellt sind z.B. 10 Beiträge):export/tdexp16.jpgWichtig: Alle Filteroptionen wirken additiv. Um z.B. nur Offline-Beiträge aus 2013/14 zu exportieren, wählen Sie 01.01.2013 und 31.12.2014 als Von-Bis-Datum und im Status Nur Unveröffentlichte.
  7. Die letzte Option fragt ab, ob automatisch Ihre statischen Twoday-Bildadressen auf die Ziel-Blogadresse angepasst werden sollen. Statische Twoday-Bildadressen sind Bilder, die Sie auf Twoday hochgeladen haben und in Ihren Beiträgen entweder mit dem Bildmakro <% image name="bildname" %> oder mit ihrer internen Bildadresse http://static.twoday.net/{blogalias}/images/bildnamereferenziert haben.
    Diese Bilder sollten — sofern Sie Twoday nicht als (unsicheren) Bildspeicherplatz behalten wollen — in das Media-Verzeichnis des Zielblogs überführt werden. Wenn Sie diese Option aktivieren, werden die Bildadressen im Beitragstext schon während des Exports angepasst. Geben Sie hierzu einfach die URL Ihres neuen Wordpress-Blogs an. Bildadressen, die sich nicht auf den eigenen statischen Twoday-Speicher beziehen, bleiben selbstverständlich unverändert.export/tdexp17.jpgDie Überführung der Bilder selbst kann nicht maschinell erfolgen, da diese vom Blogeigentümer einzeln oder mit dem Wordpress-Mehrdateienuploader hochgeladen werden müssen.
  8. Unten im Auswahlbildschirm finden Sie drei Schaltflächen:export/tdexp18.jpgExport starten beginnt den produktiven Exportprozess und gibt alle selektierten Beiträge in eine Exportdatei (.txt) aus. Parallel wird eine Bildreferenzliste für statische Twoday-Bilder erstellt.

    Nur Infos (Probelauf) simuliert den produktiven Exportprozess, erstellt jedoch keine Ergebnisdateien. Trotzdem erhalten Sie die gleiche Auswertungsstatistik und Informationen über die Laufzeit sowie die errechnete Größe der Exportdatei.

    Über Abbrechen oder die Escape-Taste wird der Auswahlbildschirm ohne weitere Aktion beendet.

Export durchführen

  1. Der Probelauf unterscheidet sich vom echten Exportlauf nur insoweit, als dass er keine Ergebnisdateien erstellt. Trotzdem verhält er sich nahezu identisch, bereitet die gewählten Beiträge für das MovableType-Exportformat auf und errechnet die Export-Dateigröße.export/tdexp19.jpgAus diesem Statusbildschirm kann man ablesen, dass 250 Beiträge sowie 4643 Kommentare meines Blogs in knapp 90 Sekunden gelesen, selektiert und formatiert wurden. Die sich ergebende Zieldatei hätte eine Größe von 1734 Kilobyte.
  2. Beim echten Exportlauf wird eine zusätzliche Schaltfläche im Ergebnisbildschirm angezeigt.export/tdexp20.jpgDurch einen Klick auf Datei... werden nacheinander beide Ergebnisdateien (Exportdatei und Bildreferenzliste) zum Speichern auf Ihren Rechner angeboten.export/tdexp21.jpgexport/tdexp22.jpg
  3. Durch Doppelklick auf die gespeicherte Bildreferenzliste (.html) wird diese in Ihrem Browser angezeigt:export/tdexp23.jpgIn dieser Liste existiert ein Eintrag für jeden Beitrag, der ein statisches Twoday-Bild verwendet. Sowohl Beitrag als auch Bild sind direkt verlinkt und sofort aus der Liste aufrufbar. Um alle statischen Bilder in ein Sammelverzeichnis Ihrer Festplatte zu speichern, klicken Sie diese in der Liste nacheinander an.
  4. Im Beispiel wurde das Bild darksea.jpg angeklickt und im Browser angezeigt. Durch Rechtsklick auf das Bild und Bild speichern unter... können Sie nun das Twoday-Bild einfach in ein Zielverzeichnis sichern.export/tdexp24.jpgTipp: Speichern Sie alle statischen Twoday-Bilder in ein separates Verzeichnis Ihrer Festplatte. Diese lassen sich dann später in einem Durchgang mit dem Mehrdateienuploader in Ihr Wordpress-Medienverzeichnis übertragen.
  5. Durch Doppelklick auf die Exportdatei (.txt) können Sie sich diese in einem Texteditor ansehen und dort bei Bedarf Änderungen vornehmen:export/tdexp25.jpgBitte die Exportdatei ausschließlich in reinen Texteditoren (Notepad, Notepad++, Wordpad etc.), nicht jedoch z.B. in Microsoft Word bearbeiten. Durch die Word-Formatanweisungen wird die Exportdatei ansonsten unbrauchbar und führt beim Import zu Fehlern.
  6. Nachdem Sie beide Ausgabedateien gespeichert haben, klicken Sie auf OK, um den Statusbildschirm zu schließen. Zur Beendigung des Exportlayouts klicken Sie abschließend auf Test beenden (Hard Reload nicht vergessen), wodurch Ihr gewohntes Bloglayout wieder angezeigt wird:export/tdexp26.jpg
  7. Herzlichen Glückwunsch! Sie haben Ihren ersten Blogexport erfolgreich abgeschlossen. Im folgenden Kapitel wird erklärt, wie Sie die exportierten Daten in ein Wordpress-Blog einspielen.

Exportierte Beiträge nach Wordpress übernehmen

Vorarbeiten

Es würde an dieser Stelle zu weit führen, die Installation und Erstanpassung von Wordpress zu beschreiben. Hierfür gibt es auf Youtube, Vimeo oder der deutschen Wordpressseite detaillierte Tutorials und Dokumentationen. Um exportierte Twoday-Beiträge in Ihren Wordpress-Blog einspielen zu können, sollten Sie daher folgenden Status erreicht haben:

  • Sie haben Wordpress auf Ihrer eigenen Domain/Webseite oder bei einem Wordpress-Anbieter vollständig installiert.
  • Sie haben sich mit dem Wordpress-Backend (aka die Administrationsseiten von Wordpress) vertraut gemacht und beherrschen die wichtigsten Funktionen.
  • Sie kennen Ihre Blogadresse (Domain) und haben erfolgreich ein Export Ihres Twoday-Blogs mit der hier beschriebenen Softwarelösung durchgeführt.
  • Sie haben die aus Twoday zu übertragenden Blogbilder in ein Sammelverzeichnis auf Ihrer Festplatte gespeichert.

Gesicherte Bilder hochladen

Im Standard organisiert Wordpress hochgeladene Bilder in monats- und jahresbasierten Ordnern, die jeweils unterhalb des Medienverzeichnisses wp-content/uploads angelegt werden. Für die Erstübernahme ist dieses Verhalten unerwünscht, da in dem Fall jede Bildadresse in einem Altbeitrag mit Bild angepasst werden müsste. Führen Sie zur Übernahme der Bilder folgende Schritte durch:

  1. Klicken Sie im Administrationsbereich von Wordpress auf EinstellungenMedien. Entfernen Sie den Haken im Kontrollkästchen Organisiere meine Uploads in monats- und jahresbasierten Ordnern und bestätigen Sie die Änderung mit Klick auf Änderungen übernehmen.export/img01.jpg
  2. Klicken Sie anschließend auf den Hauptmenüpunkt Medien, darunter auf Datei hinzufügen und dann auf Dateien auswählen.export/img02.jpg
  3. Suchen Sie Ihr Sammelverzeichnis mit den gespeicherten Twoday-Bildern, markieren Sie alle Bilder und klicken dann auf Öffnen.export/img03.jpg
  4. Wordpress lädt alle Bilder nacheinander hoch und informiert Sie per Fortschrittsbalken über den aktuellen Stand. Je nach Anzahl und Größe der Bilder kann dies etwas dauern.export/img04.jpgNach erfolgreichem Upload aller Alt-Bilder können Sie, wenn Sie dies möchten, die chronologische Bildorganisation wieder aktivieren (vgl. Schritt 1).

Import-Plugin für Twoday-Beiträge installieren

Das von Wordpress mitgelieferte Import-Plugin ist im Standard nicht in der Lage, die von Twoday bekannte Kommentar-/Antwortstruktur abzubilden. Ich habe das Plugin daher so ergänzt, dass es Antworten auf Kommentare mit dem korrekten Bezug in die Wordpress-Datenbank übernimmt. Zur Installation dieses überarbeiteten Plugins führen Sie folgende Schritte durch:

  1. Laden Sie die gepackte Plugindatei herunter und speichern Sie sie in ein beliebiges Arbeitsverzeichnis:  Importplugin für Twoday-Blogdaten downloaden
  2. Melden Sie sich mit Ihrem Administrator-Account in Ihrem Wordpress-Blog an und rufen Sie das Backend (die Administrationsseiten) auf. Klicken Sie auf Plugins. Sollten Sie bereits das Standard-Plugin für MovableType-Import installiert haben, so deaktivieren und löschen Sie es bitte. Klicken Sie danach oben auf Installieren.export/wp02.jpg
  3. Klicken Sie oben auf Plugin hochladen.export/wp03.jpg
  4. Das erweiterte Import-Plugin liegt als direkt ladbare Zip-Datei (inkl. deutscher Übersetzung) vor. Klicken Sie daher auf Datei auswählen.export/wp04.jpg
  5. Suchen/öffnen Sie die in Schritt 1 heruntergeladene Plugindatei movabletype-importer-neon.zip und klicken Sie dann auf Installieren.export/wp05.jpg
  6. Nach erfolgreichem Abschluss der Installation klicken Sie auf Aktiviere dieses Plugin, um es nachfolgend für Importläufe verwenden zu können.export/wp06.jpg
  7. Prüfen Sie, ob das Plugin aktiviert wurde und in der Liste der verfügbaren Plugins unter dem Namen Twoday MovableType Importer aufgeführt wird.export/wp07.jpg

Twoday-Daten nach Wordpress importieren

Sobald das Twoday MovableType Importer Plugin installiert und aktiviert ist, können Sie beliebig oft Blogdaten einspielen, die mit der neuen Exportlösung aus Twoday exportiert wurden. Sie können die Beiträge jahresweise ausgeben und übernehmen, oder nach Kategorien getrennt, oder einfach als Gesamtexport. Jeder Import läuft nach folgendem Schema ab:

  1. Melden Sie sich in Ihrem Wordpress-Blog an und klicken Sie im Administrationsmenü auf Werkzeuge, darunter Daten importieren und dann Movable Type and Typepad.export/wp08.jpg
  2. Das spezielle Twoday-Import-Plugin wird gestartet. Nach Klick auf Datei auswählen können Sie eine Exportdatei (.txt) zuordnen.export/wp09.jpg
  3. Den Importprozess starten Sie durch Klick auf Datei aktualisieren und importieren.export/wp10.jpg
  4. Nach kurzer Zeit erscheint ein Zwischenbildschirm, der die Autorennamen aller Beiträge, Kommentare und Antworten der Exportdatei auflistet. Jetzt haben Sie die Gelegenheit, diese Benutzer-IDs bereits im Wordpress-Blog definierten Benutzern zuzuordnen. Wenn es eine Ersteinspielung ist, werden Sie außer Ihrem eigenen Benutzernamen alle anderen Usernamen unverändert lassen.export/wp11.jpg
  5. Scrollen Sie in der Liste ganz nach unten und klicken auf die Submit-Schaltfläche, um nun den eigentlichen Import der Beiträge zu starten.export/wp12.jpg
  6. Je nach Performance Ihres Wordpress-/Web-Anbieters und der Größe Ihrer Exportdatei kann das Einspielen der Beiträge und Kommentare in die Datenbank einige Zeit in Anspruch nehmen. Haben Sie Geduld, wenn Sie nicht immer unmittelbar einen kontinuierlichen Fortschritt sehen. Der Importer meldet jeden erfolgreich eingespielten Beitrag mit Titeltext zeilenweise zurück.export/wp13.jpgNach Abschluss des Imports können Sie durch Klick auf Zur Anzeige in das Wordpress-Frontend wechseln.
  7. Je nach verwendetem Theme (hier: das Wordpress-Standardtheme "Twenty Fourteen") können Sie die letzten Beiträge und Kommentare überprüfen.export/wp14.jpg
  8. Eine detailliertere Überprüfung können Sie über das Backend im Menüpunkt Beiträge durchführen.export/wp15.jpg
  9. Abschließend noch der Strukturcheck bei den Antworten auf Kommentare: die Einrückung bei Twoday-Kommentarantworten ist auch bei Wordpress angekommen.export/wp16.jpg
Epilog

Dieser Beitrag ist lang — ausgedruckt wohl gut 23 Seiten. Allein die Softwarelösung des Exportprozesses umfasst zusätzlich knapp 1000 Zeilen HTML, CSS und JavaScript. Diese Arbeit lizensiere ich als OpenSource unter MIT, d.h. jede/r Blogger:in kann diese kostenfrei und ohne jedwede kompensatorische Verpflichtung verwenden und einsetzen. Dies ist mein "Danke" an eine Community, in der ich nun bereits über 8 Jahre viel Freude habe und interessante Menschen kennenlernen durfte.

Wichtig ist mir, dass sowohl dieser Beitrag als auch die Softwarelösung weder Aufforderung noch Begründung sein sollen, Twoday zu verlassen. Diese Plattform ist vielen vertraut und es gibt keine akuten Indikatoren für ein hartes Ende. Es kann jedoch nicht von Nachteil sein, seine Bloghistorie an sicherem Ort gespeichert zu wissen und sich ohne Druck mit potenziellen Alternativen vertraut zu machen, sollten diese eines Tages benötigt werden. Wenn dieser Text dazu beiträgt, das individuelle Sicherheitsgefühl zu verbessern, würde ich mich freuen.

Was tun bei Problemen / Fehlern?

 There's always one more bug heißt es in Lubarsky's Law of Cybernetic Entomology. Sehr wahrscheinlich ist diese neue Exportlösung keine Ausnahme von dieser Regel. Wenn Sie einen Fehler oder eine Verbesserungsmöglichkeit entdecken, können Sie diese gerne als Kommentar hinterlassen.

Eine Bitte: Fügen Sie Ihren Problembeschreibungen alle Informationen bei, die helfen können, das Problem zu analysieren und möglichst schnell zu einer Lösung zu kommen. Dazu gehören:

  • Name und URL Ihres Blogs (Twoday und ggf. Wordpress),
  • Name und Version Ihres Browsers,
  • eine Referenz / einen Link auf die Stelle, wo das Problem aufgetreten ist (z.B. ein bestimmter Beitrag),
  • ein Bild/Screenshot des Problems,
  • möglichst genaue Ursache-Wirkung-Beschreibung der Problemsituation (d.h. was haben Sie gemacht/eingegeben/geändert vs. was ist das [unerwünschte] Ergebnis dieser Aktivität).
Browserkompatibilität

Diese Exportlösung nutzt modernste Techniken (z.B. FileAPI, Blobs) und ist daher nur in modernen Browsern lauffähig! Getestet ist sie auf aktuellen Versionen von Chrome (empfohlen) und Firefox. Falls Sie den Internet Explorer nutzen müssen (Sie haben mein volles Mitgefühl), müssen Sie mindestens über die Version 10 (oder höher) verfügen.

Version 0.91
Autolink-Ergänzung

In Twoday-Beiträgen ist es möglich, klickbare Links durch Eingabe einer einfachen Text-URL zu erzeugen. Da die Linkfunktionalität serverseitig erst bei der Aufbereitung der Blogseite generiert wird, gingen die Links bislang beim Export verloren (d.h. waren wieder nur einfacher Text). Ab Version 0.91 werden nun alle erkannten einfachen Textlinks automatisch in echte HTML-Links umgewandelt und in die Exportdatei ausgegeben.

Die Autolink-Funktionalität ist über einen Einstellparameter im Infobildschirm abschaltbar (Standard=aktiviert).

Version 0.92
Blogexport für wordpress.com

Blogbesitzer auf wordpress.com haben leider nicht die Möglichkeit, individuelle Plugins zu installieren. Sie konnten daher bislang diese Exportlösung nicht nutzen, da die spezielle Twoday-Kommentarstruktur (eingerückte Antwort auf einen Kommentar) nur mit dem selbsterstellten Plugin einspielbar war.

Wordpress.com Benutzer als auch jene, denen eine einfache, fortlaufende Darstellung der Kommentare ausreichend ist (ohne Einrückung), können nun auch die Exportroutine nutzen. In den "Einstellungen" ist dazu das Auswahlkästchen "Für wordpress.com exportieren" anzukreuzen. Dann kann der Import mit dem Standard-Movable-Type Importer von Wordpress erfolgen.

Entfernung der Gast-Kennung

Anonyme, unregistrierte Benutzer erhalten seitens Twoday zusätzlich eine "(Gast)"-Kennung an die gewählte Benutzerkennung angehängt. Über eine Auswahlbox in den Einstellungen lässt sich für den Export diese Gast-Kennung aus dem Benutzernamen entfernen.

Beitrags-ID als Benutzerfeld in Wordpress

Jeder Twoday-Beitrag besitzt eine eindeutige Nummer (ID). Diese Kennung wird nun im Wege des Imports durch das Plugin als benutzereigenes Feld "storyID" nach Wordpress übernommen (Tabelle POSTMETA). Hierdurch lassen sich in Wordpress z.B. Links zum Twoday-Originalbeitrag herstellen (http://blogalias.twoday.net/stories/storyid) oder Querverweise auf eigene Alt-Beiträge anpassen.

Version 0.95
Neue Debug- und Timeout-Parameter (für "Techniker")

Über zwei neue Parameter kann nun eine Debug-Funktion aktiviert werden sowie die Timeout-Zeitspannen individuell eingestellt werden. Bei aktivierter Debugfunktion werden wichtige Stati/Zwischenmeldungen über die Konsole des Browsers ausgegeben. Die Timeout-Angaben in Millisekunden legen fest, wie lange das Script zwischen Serverzugriffen warten soll, um Fehlermeldungen des Twoday-Servers zu vermeiden. Die Vorgabewerte 500/5/5 (für Indexseiten/Beiträge/Kommentare) sollten nur durch erfahrene Anwender geändert werden.

Umsetzung der NiceUrls auf numerische Adressen

Jeder Beitrag in Twoday besitzt eine eindeutige Nummer, über die der Beitrag z.B. auch für Querreferenzen adressiert werden kann (Bsp: http://neonwilderness.twoday.net/stories/1022396398). Hat der Twoday-Nutzer das NiceUrl-Modul aktiviert, wird diese Nummer durch einen textlichen Schlüssel ersetzt (obiges Beispiel: http://neonwilderness.twoday.net/stories/twoday-tipp-8-videos-anzeigen). Zur späteren, besseren Umsetzung der alten Twoday-Beitragsnummern auf neue Wordpress-Artikel-IDs ist es hilfreich, wenn alle Beiträge einheitlich eine Nummer anstatt Textfragmente enthalten. Ab Version 0.95 stellt das Script sicher, dass für den Export alle NiceUrl-Beitragsadressen wieder in numerische Beitragsadressen umgesetzt werden.

Verbesserte Erkennung/Verarbeitung von image-Macros

Twoday-Bildmacros der Form <% image %> sind komplex und haben viele Parametervarianten (Antville Dokumentation). Für den Export generiert das Script daraus echte Bildadressen und berücksichtigt dabei auch weitere vorhandene Makro-Parameter.

Version 0.96 Exportlösung Importplugin
Verbesserte NiceUrl-Verarbeitung

Interne Querverweise auf eigene Blogbeiträge mit NiceUrls (in Textform) werden nun besser erkannt und verarbeitet, auch wenn sie unnötige Linkanhängsel wie "/main" oder "/edit" oder direkt angesteuerte Kommentar-IDs ("#{comment-id}") aufweisen. Credits an QUH für die Problembeschreibung und die Testmöglichkeit im Originalblog.

Erweiterte Konsolennachrichten im Debugging-Modus

Die Prozess- und Statusnachrichten, die während des eingeschalteten Debugging-Modus über die Konsole ausgegeben werden, wurden erweitert.

Montag, 29. September 2014

Twoday-Tipp #4 - Wordpress heiratet Twoday

wpmeets2day.jpg

Datum Änderungen / Edits
13.03.2017 Ersatz der Dropbox-Links wg. Abschaltung des Dropbox-Public-Ordners
23.12.2014 Ersatz der Wuala-Links und Umleitung auf GoogleDrive
01.10.2014 Text: Varianten "gefahrlos" testen
Code: "Weblog abonnieren"-Link in Variante1.hmtl.txt und Variante2.html.txt integriert
Das Problem

Der Trend (siehe kürzlich Herr Kulturflaneur und nun auch Herr Schneck), sich als Twoday-Mitglied mehr Sicherheit, Modernität und Erweiterbarkeit im Wege eines Wordpress-Zweitblogs zu verschaffen, scheint sich zu verstärken.

Ein Haupthemmnis für viele Blogger, die den Schritt hin zu einer moderneren Bloggingplattform machen möchten, ist, dass sie damit auch die bisherige Einbindung in die Twoday-Community verlassen, es sei denn, sie pflegten beide Blogs (Wordpress und Twoday) parallel identisch weiter. Ideal wäre es hingegen, wenn man z.B. nur den Wordpress-Blog mit neuen Beiträgen bestücken und diesen im Twoday-Blog anzeigen könnte sowie gleichzeitig die bisherigen Verbindungen (Verwaltung von Mitgliedern/Abonnements) unter Twoday weiterführen könnte — und das alles vorzugsweise mit minimaler Doppelarbeit. Wie man so etwas realisieren kann, wird im folgenden erklärt.

Die Lösung

Das kleine Monster hatte als erstes die ziemlich geniale Idee, sein neues Wordpress-Blog per <iframe>-Befehl vollflächig in sein bestehendes Twoday-Blog zu integrieren. Dabei ergibt sich zunächst der Nachteil, dass eine vollständige Anzeige des WP-Blogs als bildschirmfüllendes Fenster den Zugang zu wichtigen Twoday-Funktionen (Admin, Abonnements) erschwert bzw. verhindert. Zu diesem Zweck habe ich eine ergänzende Lösung geschaffen, die zusätzlich über der eigentlichen Bloganzeige eine Schaltfläche einblendet, die bei Mausklick ein (beliebig) einstellbares Menü, z.B. mit Twoday-Funktionen, aufruft.

Um eine bessere Vorstellung davon zu bekommen, wie so etwas aussehen kann, schaut man sich am besten die beiden Blogversionen an:

Neuen Wordpress-Blog vom kleinen Monster ansehen (Original)
Twoday-Blog mit Menübutton ansehen (Wordpress-Blog eingebettet)

Position, Farbe, Größe und Erscheinungsbild des Menübuttons in der Twoday-Anzeige sind prinzipiell frei einstellbar. Bei diesem Blog wird er links oben in hellrot angezeigt.

wpmeets2day1.jpg

Bei einem Mausklick auf den Button wird der Blog in einer Animation perspektivisch verzerrt um Platz für das eingeblendete Menü zu machen. Ein weiterer Klick auf das linke Blogbild schließt das Menü und stellt den alten Zustand wieder her.

wpmeets2day2.jpg

Die 3D-Animation mit perspektivischer Verzerrung funktioniert jedoch nur in modernen Browsern, will heißen ab:

  • Internet Explorer 10+
  • Firefox 30+
  • Chrome 27+ und Chrome für Android 37+
  • Safari 5.1+ und iOS Safari 7.1+
  • Opera 23+
  • Android 2.3+

Als Alternative zur oben gezeigten Animation habe ich noch eine zweite Variante der Menü­einblendung realisiert. In diesem Beispiel verwende ich das neue Wordpress-Blog von Herrn Kulturflaneur, welches in Twoday mit überlagerndem Menüknopf dargestellt wird — diesmal rechts oben als transparente Schaltfläche.

wpmeets2day3.jpg

Ein Klick auf den Menüknopf blendet auf der linken Seite ein einfaches Menü mit beliebig einstellbaren Links ein (hier z.B. Twoday-Funktionen). In der oberen Kopfzeile ist Platz für weitere Links (hier beispielhaft Social Links wie Twitter, Facebook, E-Mail). Ein zweiter Klick auf die Menüschaltfläche schließt die Einblendung wieder.

wpmeets2day4.jpg

Die Einbauanleitung

Einen eigenen (neuen) Wordpress-Blog mit der beschriebenen Lösung zusätzlich unter der bisherigen Twoday-Adresse anzuzeigen, gestaltet sich sehr einfach:

  1. Kopieren Sie den gesamten Inhalt Ihres Site.page Skins in eine Textdatei und sichern Sie diese ab (falls Sie den alten Zustand bei Bedarf wieder herstellen wollen).
  2. Laden Sie eine der oben beschriebenen Varianten herunter (Textdatei und PDF-Dokumentation) und speichern Sie die Dateien in einem beliebigen Arbeitsverzeichnis oder auf dem Desktop:
    Variante 1: Perspektivische Verzerrung
    Variante1.html.txtVariante1.pdf
    Variante 2: Seitliche Einblendung
    Variante2.html.txtVariante2.pdf
  3. Öffnen Sie die txt-Datei in einem Texteditor (z.B. Notepad) und führen Sie dort die notwendigen Änderungen anhand der Hinweise im PDF-Dokument durch:
    • Passen Sie im Kopfbereich Titel, Beschreibung und Autor des Blogs an.
    • Legen Sie die Position und Farben der Menüschaltfläche fest.
    • Passen Sie die Blog-Zieladresse im iframe-Befehl an. Für Herrn Schneck sähe dieser z.B. dann folgendermaßen aus: <iframe src="http://schneckinternational.me/"></iframe>
    • Verändern Sie bei Bedarf die Menütexte, Icons, Links nach Ihren Wünschen.
  4. Kopieren Sie nun den gesamten Code aus der angepassten Textdatei in Ihren site.page Skin (der alte Inhalt muss vollständig ersetzt werden) und speichern Sie die neue Version.
  5. Fertig. Rufen Sie Ihr Blog auf und kontrollieren Sie Aussehen und Funktionalität. Für weitere Anpassungen oder Menüerweiterungen gehen Sie erneut in Ihren site.page Skin und führen dort die Änderungen direkt durch.
Varianten "gefahrlos" testen

Üblicherweise testet man neue technische Ideen und Funktionalitäten nicht sofort im Live-Originalblog. Auch in Twoday gibt es die Option, neue Dinge unsichtbar für den normalen Blogbesucher auszuprobieren.

Jeder Twoday Free-User hat die Möglichkeit, zwei Layouts anzulegen. Ein Layout ist — einfach gesagt — eine Darstellungsvariante für Ihren Blogcontent. Das Zweitlayout kann andere Farben, Schriftarten, Bildschirmaufteilungen haben — und eben auch andere Skins, die das Verhalten des Blogs festlegen.

Um nun eine der oben beschriebenen Varianten "gefahrlos" zu testen und anzuschauen, führen Sie folgende Schritte aus:

  1. Melden Sie sich bei Twoday mit Ihrem Account an
  2. Klicken Sie im Twoday-Menü auf AdminLayoutMeine Layouts
  3. Falls Sie nur ein Layout besitzen, legen Sie sich über Neues Layout anlegen ein zweites Layout an
  4. Klicken Sie in der Layoutübersicht beim Zweitlayout (dem nicht aktiven Layout) auf "testen & bearbeiten".
  5. Klicken Sie danach auf Skins (HTML), um den Skin Site.page mit einer der beschriebenen Varianten zu füllen.
  6. Klicken Sie auf Weblog ansehen, um die Darstellung zu kontrollieren.
  7. Zum Beenden des Tests klicken Sie in der angezeigten (gelben) Twoday-Nachricht auf "Test beenden". Dadurch wird das vorherige Layout auch für Sie wieder aktiviert.

Viel Spaß bei der Verheiratung Ihres Wordpress-Blogs mit Twoday!

Sonntag, 2. März 2014

Twoday-Tipp #3 - GoogleDrive-Einbindung

desperate3mb.jpg

Wichtiger Hinweis

Am 31.08.2016 hat Google die öffentliche Hosting-Funktion für beliebige in GoogleDrive gespeicherte Ressourcen eingestellt und abgeschaltet. Dies bedeutet, dass eine direkte Verlinkung/Einbettung von GoogleDrive-Dateien (z.B. von Bildern) in eine Webseite nicht mehr möglich ist. Damit ist die in diesem Beitrag aufgezeigte Lösung obsolet.

Sollten Sie allerdings über einen älteren Dropbox-Account verfügen (vor dem 04. Oktober 2012 angelegt), der noch einen öffentlichen Public-Ordner besitzt, können Sie die unten beschriebene Lösung weiter nutzen! Kopieren Sie dafür Ihren GoogleDrive-Images-Ordner zunächst vollständig in einen neuen Dropbox-Images-Ordner und verwenden Sie dann für den Script-Aufruf folgende Variante:

<script type="text/javascript" src="//static.twoday.net/cdn/files/gdimages-min-js.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $(".googledrive").gdimages().init({
        gdDomain: "https://dl.dropboxusercontent.com",
        gdRootFolder: "/u/xxxxxxxx",
        gdSubFolder: "images"});
});
</script>

wobei 'xxxxxxxx' Ihrer eigenen Dropbox-ID entspricht und 'images' das Verzeichnis unterhalb des Public-Ordners ist, in dem Ihre Bilddateien liegen. Bei Fragen bitte einfach ein Mail senden.

Es ist ein einschneidender Moment, in dem ein Twoday-Free-User in sanfter Verzweiflung realisiert, dass er rasant seiner 3 MB Webspace-Grenze entgegenbloggt. Schlaflose Nächte, in denen die Optionen sortiert werden:

  • in einen neuen Twoday-Free-Blog umziehen,
  • auf einen kostenpflichtigen Twoday-Tarif mit größerem Speicherangebot wechseln,
  • einen eigenen Webspace (inkl. Domain) erwerben,
  • zu Wordpress wechseln — der Funktionalität und immerhin 3000 Gratis-MB wegen,
  • sich endgültig von der bildhaften Welt lossagen und nie wieder Fotos, Skizzen, Zeichnungen posten.

Jedoch - ein Plattformwechsel ist nicht ganz unkompliziert und füttert die eigene ToDo-Liste ganz unnötig mit nicht-wertschöpfenden Copy/Paste-Arbeitsschritten an! Na denn: wenn Twoday so knauserig mit Blogspace ist, dann muss der dringend benötigte Speicherplatz eben an anderer Stelle akquiriert werden.

Wer den nachstehenden Lösungsvorschlag umsetzt, verfügt anschließend über mindestens 15 Gigabyte (in Worten: 15.360 Megabyte) zusätzlichen und kostenlosen Speicherplatz, der für beliebige Datei- und Ressourcentypen genutzt werden kann. Seit 2012 gestattet GoogleDrive nämlich, dort gespeicherte Dateien als direkt ladbaren Content zu verwenden, ganz ohne lästige Zwischenseiten oder vorherige Downloads.

Zusätzlich stellt GoogleDrive ein sehr effizientes Synchronisierungstool zur Verfügung, das nach seiner Installation das lokale GoogleDrive-Verzeichnis der Festplatte zu jeder Zeit mit dem Webspace synchron hält. Eine in den Ordner gezogene/gespeicherte Bilddatei steht so nach wenigen Sekunden auch online zur Verfügung und kann in Ihr Blog eingebunden werden.

Zur Abrundung stelle ich ein kleines, selbst geschriebenes jQuery-Script vor, das die direkte Verlinkung von GoogleDrive-Ressourcen für Twoday-User noch einfacher und performanter macht.

Ich verspreche, dass diese Lösung auch von bekennenden Technik-Grobmotorikern eingesetzt werden kann und versuche, alle Erläuterungen entsprechend "basic" und nachvollziehbar zu verfassen. Falls noch Unklarheiten verbleiben, bitte nicht mit Fragen zögern. Immerhin warten am Ende der Anstrengung 15 Gigabyte persönlicher, kostenfreier Online-Speicher und sorgenfreies Bloggen bis ans Ende aller Twoday-Tage.

Das Twoday-Platzproblem

Twoday Webspace - eine knappe Ressource

twoday.jpg

Die Hauptursache für rapide abnehmenden Twoday-Speicher besteht in größeren Ressourcenverbräuchen durch hochgeladene Bilder oder Dateien. Gemäß erklärtem Twoday-Prinzip wird der für Beitragstexte benötigte Platz nicht auf das 3 MB Budget angerechnet.

Allerdings reichen bereits zwei unkomprimierte Fotos einer moderneren Megapixelkamera um das knappe Kontingent vollständig aufzubrauchen.

Wohin also mit den Speicherfressern?

Es gibt eine Vielzahl von Plattformen (z.B. Dropbox, HiDrive, Wuala, Google Drive, Skydrive, SugarSync, Amazon Cloud Drive) oder auch unzählige Bilder-Hosting-Dienste, auf denen sich Bildressourcen unterbringen lassen. Entscheidungskriterien für die Auswahl sind:

  • Speichermenge
  • Verfügbarkeit
  • Performanz
  • Direktzugriff
  • Vertrauen auf eine nachhaltige Existenz

Wer einmal erlebt hat, wie sein Bilderportal über Nacht überraschend abgeschaltet wurde und alle dort gespeicherten Bilder verloren waren, der wird besonders in diesem letzten Punkt sehr empfindlich.

Leider erlauben viele Dienste keinen öffentlichen Direktzugriff oder haben diese Funktion für Neukunden deaktiviert. In einem Blog will man jedoch üblicherweise Bilder oder Filme direkt in das eigene Layout einbetten und nicht auf eine separate Anzeigeseite verlinken, über deren Aussehen und Funktion man keine Kontrolle hat.

Dropbox bietet anfänglich nur überschaubare 2 GB Speicherplatz, Wuala hat zeitweise Performance-Probleme, andere Anbieter erlauben teils keine direkte Dateieinbindung. GoogleDrive ist daher mit 15 GB kostenlosem Speicher, guter Zugriffsgeschwindigkeit und der langfristig wahrscheinlich besten Bestandssicherheit die sinnvollste Wahl.

Was ist GoogleDrive?

GoogleDrive — 15 GB kostenloser Webspace

googledrive.jpg

GoogleDrive ist zuallererst ein zentraler Online-Speicherplatz, auf den Sie beliebige Dateien hochladen können. Für GoogleDrive existieren Zugriffslösungen für alle wichtigen Plattformen, so dass Sie Ihre Dateien von Ihrem iOS/Android-Smartphone oder -Tablet, vom Windows-/Mac-Desktop, iPhone, iPod touch, iPad usw. zugreifen können.

GoogleDrive ist auch ein Synchronisierungstool. Wenn Sie an einem Rechner eine Datei aktualisieren, wird diese neue Version sofort auch allen Ihren anderen angeschlossenen Geräten zur Verfügung gestellt (Einführung inkl. Film). Ob Home-Tablet oder Arbeitsplatz-Rechner — Sie haben jederzeit und überall Zugriff auf die jeweils aktuellsten Versionen Ihrer Dokumente.

In GoogleDrive können Sie Dateien und Verzeichnisse sowohl privat (d.h. nur für Ihren eigenen Zugriff), für einen klar umrissenen Personenkreis oder auch vollständig öffentlich definieren. Für die Nutzung als Bildspeicherplatz für Twoday bietet es sich an, ein separates, öffentliches Verzeichnis anzulegen.

GoogleDrive installieren und einrichten

Google-Account anlegen

googleaccount.jpg

Für die Nutzung von GoogleDrive und die Freischaltung von 15 GB persönlichem Webspace benötigen Sie einen Google Account. Ein Google Account ist im Wesentlichen eine bestätigte E-Mail-Adresse. Dies kann eine (neue) gmail-Adresse sein oder auch jede andere E-Mail-Adresse, die Sie bereits besitzen und verwenden.

Falls Sie eine existierende E-Mail-Adresse nicht verwenden wollen, können Sie sich auch eine neue gmail-Adresse anlegen. Ob und in welchem Umfang Sie diese später tatsächlich verwenden, ist alleine Ihre Entscheidung.

Schritt 1: Anmeldung
  • Melden Sie sich bei GoogleDrive mit Ihrem GoogleAccount an. Falls Sie noch keinen GoogleAccount besitzen, klicken Sie darunter auf Konto erstellen und folgen Sie den dortigen Anweisungen. (Bild)

GoogleDrive einrichten

Sie können GoogleDrive ausschließlich über die GoogleDrive-Webseite benutzen, wenn Sie dies wünschen. Es ist jedoch eleganter und vereinfacht viele wiederkehrende Arbeitsschritte, wenn man das Synchronisierungsprogramm (googledrivesync) installiert. Dieses hält die relevanten Dateien auf dem GoogleDrive-Verzeichnis Ihrer Festplatte (PC/Mac), Ihrem Smartphone oder Ihrem Tablet jederzeit mit den Online-Dateien in der Cloud synchron.

Schritt 2: Synchronisierung installieren
  • Klicken Sie innerhalb von GoogleDrive auf die Schaltfläche Google Drive für PC herunterladen. Führen Sie das heruntergeladene Programm per Doppelklick aus und folgen Sie den Installationsanweisungen. (Bild) Wiederholen Sie die Installation an jedem Gerät, von dem aus Sie auf Google Drive Daten zugreifen wollen.
  • Für Smartphones und Tablets gibt es je nach Plattform eigene Apps. Besuchen Sie die für Ihr Endgerät relevante Quelle (Android: Google Play, Apple: iTunes/App Store), suchen Sie nach "Google Drive", installieren Sie die App und melden sich mit Ihrem Account an.
Die Synchronisierung mit einem Verzeichnis Ihrer Festplatte hat auch noch einen anderen Vorteil: Sollten Sie in der Zukunft auf einen anderen Anbieter wechseln wollen, haben Sie alle im Blog genutzten Bilder und Dateien lokal auf Ihrem Rechner. Kein Bild kann in der Cloud verloren gehen.

Dateien in GoogleDrive sind grundsätzlich "privat" klassifiziert, d.h. nur Sie als Besitzer haben mit Ihrem Account als E-Mail/Passwort-Kombination Zugriff. Für Bilder, die auf Ihrem Blog angezeigt werden sollen, macht das jedoch wenig Sinn. Diese müssen "öffentlich", d.h. für jeden sichtbar sein. Es bietet sich an, für öffentliche Blogbilder ein eigenes, separates Verzeichnis anzulegen und dieses als "öffentlich" zu kennzeichnen.

Schritt 3: Verzeichnisse einrichten
  • Melden Sie sich bei GoogleDrive Online mit Ihrem GoogleAccount an.
  • Klicken Sie innerhalb von GoogleDrive links auf Erstellen und dann auf Ordner. (Bild)
  • Geben Sie dem Ordner einen Namen, an dem erkennbar ist, dass dort öffentliche Dateien liegen, z.B. "Public". (Bild)
  • Klicken Sie in der Ordnerübersicht rechts auf den kleinen Pfeil neben dem öffentlichen Ordner (Bild), dann auf Freigeben... (Bild)
  • Klicken Sie in den Berechtigungseinstellungen auf Ändern... (Bild), dann auf Öffentlich im Web... (Bild) und schließlich auf Speichern
  • Legen Sie in Ihrem nun öffentlichen Ordner Public einen weiteren Unterordner an, in dem Sie später Ihre öffentlichen Bilder speichern. Klicken Sie im Public-Ordner erneut auf Erstellen und dann auf Ordner. (Bild). Unterverzeichnisse, die in einem schon öffentlichen Ordner angelegt werden, sind automatisch auch öffentlich. Nennen Sie das neue Unterverzeichnis z.B. "images" und klicken Sie dann auf Erstellen und freigeben. (Bild).

Bei Bedarf können Sie weitere öffentliche Unterordner anlegen, z.B. für Filme, Dokumente oder Texte. Eine klare Gliederung und Benennung der Unterordner hilft Ihnen, Ihre Dateien schnell wiederzufinden.

Um in GoogleDrive gespeicherte Dateien online zu verwenden, benötigen Sie die exakte Adresse, unter der die Datei in Ihrem GoogleDrive abgelegt ist. Diese Adresse Ihres Public-Ordners ermitteln sie folgendermaßen:

Schritt 4: Verzeichnisadresse herausfinden
  • Melden Sie sich bei GoogleDrive Online mit Ihrem GoogleAccount an.
  • Klicken Sie innerhalb von GoogleDrive links auf Meine Ablage und dann darunter auf den kleinen Pfeil neben Ihrem öffentlichen Verzeichnis Public und dann auf Details und Aktivität. (Bild)
  • Im angezeigten Fenster Details und Aktivitäten klicken Sie oben auf Details. Unter der Überschrift Hosting sehen Sie nun den Link, der exakt zu Ihrem öffentlichen Ordner führt. (Bild)
  • Wenn Sie auf den Link klicken, öffnet Ihr Browser ein weiteres Fenster und zeigt Ihnen den Inhalt Ihres öffentlichen Ordners. (Bild)
  • Tipp: Kopieren Sie sich die Linkadresse aus der Browser-Adresszeile in eine Textdatei, um sie jederzeit verfügbar zu haben.

Die vollständige Linkadresse einer öffentlichen Datei in Ihrem GoogleDrive können Sie folgendermaßen zusammensetzen:

https://öffentlicherordner/unterverzeichnis/dateiname.

Beispiel 1: Nehmen wir an, Ihr öffentlicher Ordner hat die Adresse https://googledrive.com/host/0B87rILWxyzIJTkpNZXF4VlNxyz/, das Unterverzeichnis für Bilder heißt images und der Name der gewünschten Datei meinbild.jpg, dann lautet die vollständige Bildadresse

https://googledrive.com/host/0B87rILWxyzIJTkpNZXF4VlNxyz/images/meinbild.jpg.

Beispiel 2: Angenommen, Sie haben in Ihrem öffentlichen Public-Ordner ein Unterverzeichnis movies für Filmschnipsel angelegt, in dem ein Urlaubsclip mit dem Namen ski.mpg gespeichert ist, dann ist seine öffentliche Linkadresse

https://googledrive.com/host/0B87rILWxyzIJTkpNZXF4VlNxyz/movies/ski.mpg.

GoogleDrive-Bilder in das Blog einbinden

Bilder nach GoogleDrive hochladen

Wie im letzten Abschnitt beschrieben, kann jede Datei in Ihrem öffentlichen Ordner über die Kombination https://öffentlicherordner/unterverzeichnis/dateiname für eine Verwendung in HTML-Befehlen herangezogen werden.

Bevor dies jedoch möglich ist, muss das Bild zunächst nach GoogleDrive hochgeladen werden. Hierfür gibt es zwei Möglichkeiten:

Schritt 5: Dateien nach GoogleDrive hochladen
  • Melden Sie sich bei GoogleDrive Online mit Ihrem GoogleAccount an.
  • Klicken Sie innerhalb von GoogleDrive links auf Meine Ablage und wählen Sie den Ordner an, in den Sie eine neue Datei hochladen möchten (z.B. images).
  • Klicken Sie oben auf Erstellen und dann auf Dateien. (Bild)
  • Wählen Sie im folgenden Auswahlbildschirm die Bilddatei aus, die Sie im Blog verwenden und anzeigen möchten. Beantworten Sie die Sicherheitsabfrage "In freigegebenen Ordner hochladen und freigeben?", indem Sie auf Hochladen und freigeben klicken. (Bild)
  • Schließen Sie nach erfolgtem Hochladen das Upload-Fenster. (Bild)
Alternatives Hochladen via GoogleDriveSync

Falls Sie in Schritt 2 das Synchronisierungsprogramm googledrivesync installiert haben, können Sie eine Datei noch einfacher hochladen.

Kopieren/Speichern Sie dazu einfach das hochzuladende Bild in den gewünschten Zielordner (z.B. Google Drive / Public / images) auf Ihrer Festplatte. Das Synchronisierungsprogramm wird sofort im Hintergrund damit beginnen, die Datei in das gleiche Verzeichnis nach GoogleDrive Online zu kopieren. Nach wenigen Sekunden steht das Bild online für eine Blog-Einbindung zur Verfügung.

Bilder manuell im Blog einbinden (ohne Scriptunterstützung)

Haben Sie ein Bild erfolgreich über eine der o.g. Methoden hochgeladen, können Sie es sofort in Ihrem Blog nutzen. Fügen Sie einfach die vollständige Linkadresse bestehend aus öffentlicher Ordner (z.B. https://googledrive.com/host/0B87rILWxyzIJTkpNZXF4VlNxyz/), dem Unterverzeichnis (z.B. images) und dem Dateinamen (z.B. meinbild.jpg) in den Image-Befehl ein:

<img src="https://googledrive.com/host/0B87rILWxyzIJTkpNZXF4VlNxyz/images/meinbild.jpg" alt="Mein Bild" width="720" height="300" />

Ziemlich einfach — wenn da nicht diese lange Adresse des öffentlichen GoogleDrive-Ordners wäre, die sich garantiert niemand merken kann. Man kann sich diesen kryptischen Link z.B. jedes Mal aus einer vorbereiteten Textdatei kopieren, die sich schnell erreichbar auf dem Desktop befindet. Noch eleganter ist jedoch die Nutzung eines kleinen Scripts, das ich nachfolgend vorstelle.

Verlinkung von Bildern mit Scriptunterstützung

Das Script gdimages wird durch den Browser bei jeder Aufbereitung einer Blogseite ausgeführt und vervollständigt die Bildadresse in jedem Image-Befehl, der sich auf ein GoogleDrive-Bild bezieht. Hierdurch wird ein Image-Befehl sehr viel übersichtlicher, da Sie nur noch den Dateinamen im alt-Parameter angeben müssen. Damit das Script weiß, welche Image-Befehle es vervollständigen muss, geben Sie diesen IMG-Befehlen eine Klasse googledrive mit:

<img class="googledrive" alt="meinbild.jpg" />

Um das Script einmalig in Ihr Blog zu integrieren, führen Sie folgende Schritte durch:

Schritt 6: jQuery aktivieren (einmalig)
  • Aktivieren Sie das Standard-Twoday-Modul jQuery. Klicken Sie dazu nach Ihrer Anmeldung bei Twoday oben im Menü auf AdminModuleExtension Module.
  • Klicken Sie ganz unten auf der Seite neben JQuery Integration auf Einstellungen (Bild), wählen Sie Ja aus und Sichern Sie Ihre Einstellung (Bild).
Schritt 7: Hilfsscript aktivieren (einmalig)
  • Klicken Sie im Twoday-Menü auf AdminLayoutSkins (HTML) und dann auf Hauptseite (Site.page).
  • Klicken Sie in das letzte Textfeld und scrollen Sie ganz an das Ende bis zum Befehl </body>.
  • Fügen Sie vor dem </body>-Befehl folgende Zeilen ein (diese können Sie aus der Box unten herauskopieren):
    <script type="text/javascript" src="//static.twoday.net/cdn/files/gdimages-min-js.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $(".googledrive").gdimages().init({gdRootFolder: "/host/0B87rILWxyzIJTkpNZXF4VlNxyz", gdSubFolder: "images"});
    });
    </script>
  • Ändern Sie den Wert des Parameters gdRootFolder auf Ihren öffentlichen Ordner ab — inkl. der vorlaufenden /host/-Kennung. Ändern Sie den Wert des Parameters gdSubFolder auf den Namen des Unterverzeichnisses, in welches Sie in GoogleDrive Ihre Blogbilder hochladen, also z.B. images oder bilder. Achten Sie beim Ändern der Werte auf die Groß-/Kleinschreibung von Buchstaben Ihres öffentlichen Ordners und Verzeichnisnamens!
  • Überprüfen Sie nochmals die Parameterwerte und sichern Sie dann Ihre Änderungen durch einen Klick auf Speichern und Schließen.
  • Geschafft! Ab jetzt können Sie Ihre auf GoogleDrive hochgeladenen Bilder auf sehr einfache Weise in Ihr Blog einbinden.

Einbindung von GoogleDrive-Bildern mit aktiviertem Hilfsscript

Da Sie Ihren öffentlichen Ordner und das Bildunterverzeichnis einmalig dem Script bekannt gemacht haben, brauchen Sie diese Informationen nun nicht mehr beim einzelnen Bild aufzuführen.

Beispiel 1: Um ein Bild wald.jpg aus dem Ordner images in einem Beitrag anzuzeigen, schreiben Sie folgenden IMG-Befehl:

<img class="googledrive" alt="wald.jpg" />

Beispiel 2: Wenn Sie in Ihrem Bilderverzeichnis images zur besseren Organisation weitere Unterverzeichnisse angelegt haben (z.B. urlaub für Urlaubsbilder), so können Sie Bilder aus diesen Teilverzeichnissen folgendermaßen anzeigen:

<img class="googledrive" alt="urlaub/strand.jpg" />

Wichtig ist, dass Sie den Bildnamen für GoogleDrive-Bilder stets im alt-Parameter übergeben, nicht wie üblich im src-Parameter!

Würde der Bildname im src-Parameter übergeben, würde der Browser bereits versuchen, dieses zu laden, obwohl die korrekte Adresse noch nicht vervollständigt wurde. Damit würde unnötig Ladezeit verbraucht.

Selbstverständlich stehen Ihnen weiterhin alle anderen bekannten Bildparameter zur Verfügung, z.B. width (Breite), height (Höhe) oder title (Titel).

Beispiel 3: In Ihrem images-Verzeichnis existiert ein weiteres Unterverzeichnis buchcover, das unter anderem ein Bild argo.jpg enthält. Dieses soll in der Größe 40 x 62 (BxH) Pixel angezeigt werden.

<img class="googledrive" alt="buchcover/argo.jpg" width="40" height="62" />

Weiterführende Referenzen

  1. Google Drive Hilfe (deutsch)
  2. Google Drive Blog (englisch)
  3. gdimages Quellcode (unkomprimiert)
© 2014 NeonWilderness — gdimages ist OpenSource und lizensiert unter MIT.

Mittwoch, 10. Juli 2013

Twoday-Tipp #2 - Kommentarformular anpassen

pimpmycommentform.jpg

Herr Nömix hat im Hilfe-Forum eine Frage zur Veränderung des Kommentarformulars aufgeworfen, die sicher auch für weitere Twoday-Blogger interessant ist.

Ich beschreibe nachstehend 2 Wege, wie man diese Änderungen umsetzen kann, rate jedoch nachdrücklich zu Methode #2 als dezentere und "unblutigere" Lösung. Methode #1 ist eher für HTML-/CSS-erfahrene Blogger gedacht, die eine Operation am offenen Twoday-Herzen nicht scheuen (Not for the faint of heart!) und sich des Risikos eines evtl. beschädigten Layouts bewusst sind.

#1 Modifikation von Layout-Skins

Bekannterweise können angemeldete Twoday-Nutzer über die Klickfolge AdminLayoutSkins (HTML) bestimmte CSS- und HTML-Elemente ihres gewählten Layouts ändern.

Unter anderem ist dort auch das Skin "Kommentarformular (Comment.edit)" änderbar - jedoch wird nach erster Code-Analyse schnell klar, dass die von Herrn Nömix anvisierten Felder offensichtlich in weiteren Skins versteckt sind, die selbst nicht so einfach für eine Änderung erreichbar sind.

Allerdings bietet Twoday unter AdminLayoutDieses Layout exportierenKomplett eine Möglichkeit an, sich die Gesamtmenge aller Skins in einer komprimierten Sammeldatei herunterzuladen, die mit jedem ZIP-Programm geöffnet werden kann.
 Tipp: Führen Sie den Download zweimal durch und speichern Sie eine Datei als "download_backup.zip" - so steht Ihnen immer ein frisches Original zum Re-Upload zur Verfügung, falls Ihre Änderungen das Layout beschädigt haben sollten.
Im Unterordner skins der ZIP-Datei finden sich die nach Funktionalitäten und Anwendungsbereichen geordneten Skin-Module. Für die gewünschten Änderungen am Kommentarformular sind folgende Module relevant:
  1. CommentanonymousCreatorForm.skin (Änderungen anzeigen) und
  2. HopObjectmodJCaptcha.skin (Änderungen anzeigen)
Die Bearbeitung kann ohne vorheriges Entpacken der zip-Datei direkt aus dem Programm erfolgen, wenn man zum Editieren einen geeigneten Texteditor (z.B. Notepad++) über die jeweiligen Optionen des Zip-Programms eingebunden hat. Dies hat den Vorteil, dass nach erfolgter Änderung und der Beendigung des Editors der geänderte Skin sofort in die Zip-Datei zurückgepackt wird.

Nach Abschluss aller Skin-Änderungen muss das modifizierte Layout als gepacktes Gesamtpaket wieder auf Twoday hochgeladen werden. Dies funktioniert unter AdminLayoutLayout importierenDatei auswählen. Nach Selektion der veränderten Zip-Datei wird diese mit Klick auf Importieren zurückgeladen.

Twoday legt automatisch ein neues Layout an, welches unter AdminLayoutMeine Layouts noch aktiviert werden muss. Spätestens nach einem Browser-Refresh (Umschalt-F5) sollten die durchgeführten Layout-Änderungen wirksam werden.

Soweit die arbeitsintensive DIY-Methode; die folgende Methode #2 offeriert einen eleganteren Weg, der zudem nur wenige Änderungen mit Standard-Twoday-Mitteln erfordert.

#2 Nutzung eines fertigen Scripts

1. jQuery aktivieren

script/jquery.jpg

jQuery ist ein Quasi-Industriestandard und umfasst sehr nützliche Basisfunktionen für die Analyse und Änderung von Webseiteninhalten mittels Javascript.

jQuery ist außerdem eine Standard-Twoday-Komponente und muss einmalig vom Nutzer in den Einstellungen aktiviert werden:

  1. Melden Sie sich in Twoday mit Ihrer Kennung an und klicken dann in Ihrem Blog oben auf AdminModuleExtension Module
  2. Klicken Sie beim Eintrag "JQuery Integration" (ganz unten) auf Einstellungen und stellen Sie den Auswahlwert auf "ja".
  3. Sichern Sie Ihre Änderung. Damit ist jQuery als zugrunde liegende Basiskomponente aktiviert und wird bei allen zukünftigen Aufrufen Ihres Blogs automatisch mit eingebunden.

2. Script 'commentform.js' herunterladen

Die in Methode #1 vorgestellten Einzeländerungen erledigt ein kleines Javascript-Schnipsel schneller und wesentlich aufgeräumter, da die Änderungen erst nach dem Laden der Webseite eingesteuert werden. Dabei werden nur die relevanten Feldnamen bearbeitet, so dass Seiteneffekte ausgeschlossen sind.

Laden Sie das Script herunter und speichern Sie es auf Ihrem Rechner. [Link]

3. Script-Parameter bearbeiten

script/script.jpg

Das Script bietet die Möglichkeit, die Überschriftentexte (Label) für die Felder Name, Url und Captcha sowie die verfügbare Feldbreite zu ändern. Außerdem kann damit die Captcha-Funktion (Eingabefeld und verzerrtes Bild) in der gleichen Zeile angezeigt werden oder das Titelfeld ganz ausgeblendet werden.

Der Anfangsbereich des Scripts enthält die eigentliche Bearbeitung der relevanten Webseitenfelder - diese sollten Sie nicht verändern. Der für Sie interessante Aufruf der Funktion PimpMyCommentForm(...) steht am Ende des Scripts (Zeile 62).

Die Funktion "PimpMyCommentForm" hat fünf Übergabeparameter:

  1. Text des Namensfeldes ("Name")
  2. Text des Url-Feldes ("Url")
  3. Text des Captcha-Feldes ("Bitte gib das verzerrt angezeigte Wort ein")
  4. Breite der Eingabefelder in Prozent der Containerbreite oder in Pixel
  5. true oder false, wobei true die Captcha-Anzeige einzeilig gestaltet und false den Standard (untereinander) beibehält
  6. true oder false, wobei true das Titelfeld ausblendet und false die Anzeige beibehält

Wird ein Text (Parameter 1-3) als Leerstring übergeben, bleibt der Twoday-Standard unverändert.

Parameter 4 ist nicht optional und muss angegeben werden. Parameter 5 und 6 sind hingegen optional und können auch weggelassen werden - es wird dann der Wert false angenommen.

// So erfolgt der Scriptaufruf im Standard
PimpMyCommentForm("Dein Name", "Deine Webseite", "", "420px", true, false);
// Beispiel 1
PimpMyCommentForm("", "Homepage", "Bitte den unten angezeigten Captcha-Code eingeben!", "95%", false, true);
// Beispiel 2
PimpMyCommentForm("Nickname", "Blogadresse", "Sicherheitscode eingeben:", "350px", true);
Ihre To-Dos
  1. Öffnen Sie das heruntergeladene Script commentform.js in einem geeigneten Texteditor (z.B. Notepad++)
  2. Passen Sie den Funktionsaufruf in den verfügbaren 6 Parametern nach Ihren Wünschen an.
  3. Speichern Sie Ihre Version des Scripts unter dem gleichen Namen.

4. Script auf Ihr Blog hochladen

  1. Melden Sie sich in Twoday mit Ihrer Kennung an und klicken dann in Ihrem Blog oben auf ContributeDateienNeue Datei hinzufügen.
  2. Klicken Sie auf Datei auswählen und selektieren Sie die von Ihnen in Schritt 3 gespeicherte commentform.js. Tippen Sie commentform in das Feld Name und einen beliebigen Text in das Feld Beschreibung. Klicken Sie auf Sichern, um die Datei hochzuladen.

Das Script steht Ihnen nun unter der Adresse http://static.twoday.net/{Ihr Username}/files/commentform.js zur Verfügung.

5. Script einbinden

  1. Klicken Sie in Ihrem Blog oben auf AdminLayoutVorlagen bearbeiten (HTML) und dann auf Hauptseite (Site.page).
  2. Navigieren Sie an das Ende der HTML-Anzeige und geben Sie direkt vor </body> folgenden Code zur Einbindung des Scripts ein:
    <script src="http://static.twoday.net/<% site.alias %>/files/commentform.js"></script>

    Zum einfachen Kopieren auf pop-up klicken, Text markieren und mit Strg-C in die Zwischenablage übernehmen.

  3. Klicken Sie auf Speichern und Schließen. Melden Sie sich ab und versuchen Sie (als anonymer Benutzer), testweise einen Kommentar in einem Ihrer Blogbeiträge abzugeben. Das Kommentarform sollte nun die von Ihnen eingestellten Änderungen reflektieren.

[Edit 13.07.2013] Über einen weiteren Parameter im commentform.js Script kann nun das (ungeliebte) Titelfeld im Kommentarform ausgeblendet werden.

[25.09.2016 - Bild-/Linkadressen aktualisiert]
Außergewöhnliches
Dinge, die gut sind
Entgleisungen
Gemalte Lebenserfahrung
Musik
Nachtgedanken
Neon's Must-Have-Tools
Neon's Top10 List
Neon-Award
Schöner Bloggen
Today I Learned
Wort des Tages
Profil
Abmelden
Weblog abonnieren
Meine bearbeiteten Skins
Hauptseite (Site.page)
Toolbar (Site.foundationToolbar)
Foundation 5 docs
Foundation 5 github
Font Awesome Cheatsheet