In a neon wilderness: Schöner Bloggen

Schöner Bloggen

Wichtiger Hinweis

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

Quelle: mx2.de (Martin2012) — cc-by-nc-sa-2.0

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-Nutzeranforderungen 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 Sicherheitserwägungen grundsä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:

Melden Sie sich auf Twoday mit Ihrem Account an und rufen Sie Ihr Blog auf.
Wählen Sie in der Menüzeile oben Admin → Layout und dann Skins (HTML)
Klicken Sie auf die Überschrift Hauptseite (Site.page), danach in das Feld mit dem Scrollbalken und wandern Sie ganz an das Ende der Anzeige.
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 Zwischenablage. 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 Zwischenablage 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:
<% staticURL %> ist ein Twoday-Makro und steht für "https://static.twoday.net/", dem abgesicherten Blogspeicher für Twoday-Bilder oder -Dateien.
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:

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:

Kennung	Videoanbieter
youtube	www.youtube.com
vimeo	www.vimeo.com
vevo	www.vevo.com
giphy	www.giphy.com
dailymotion	www.dailymotion.com
jsfiddle	www.jsfiddle.net
soundcloud	www.soundcloud.com
funnyordie	www.funnyordie.com
liveleak	www.liveleak.com
vine	www.vine.co
metacafe	www.metacafe.com
myvideo	www.myvideo.de
other	eigene 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 (Einbettungscode 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 vollautomatisch aus dem kopierten iframe-Einbettungscode 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:

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:

Bitte geben Sie Kommawerte immer mit Punkt an, also z.B. 1,799 als ratio-1.799

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:

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:

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

Falls 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:

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:

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

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):

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:

Einbindung von Soundcloud-Audiostücken

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:

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:

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

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.

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 Screenshot in die Kommentare. Dies gilt auch für evtl. Änderungs-/Erweiterungswünsche — z.B. zusätzliche Videoanbieter/Plattformen, 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

NeonWilderness

539910 Kommentare Kommentar verfassen

Dienstag, 30. Dezember 2014

Twoday-Tipp #7 - Beitragsmarkierung

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:

<% story.createtime %> gibt das Ersterstellungsdatum eines Beitrags,
<% 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:

Ist ein Beitrag oder Kommentar älter als 7 Tage, erhält er keine Kennzeichnung mehr als "neu" oder "geändert".
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:

Melden Sie sich auf Twoday mit Ihrem Account an und rufen Sie Ihren Blog auf.
Wählen Sie in der Menüzeile oben Admin → Layout und dann Skins (HTML)
Klicken Sie auf die Überschrift Stylesheet (Site.style), danach in das Feld mit dem Scrollbalken und wandern Sie ganz an das Ende der Anzeige.

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:

Klicken Sie auf "Speichern und Schließen" um Ihre Änderungen zu sichern.
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).

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>

Ihr Modulcode sollte nun folgendermaßen aussehen:
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!).

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:

Rufen Sie zunächst erneut den bereits geänderten Skin Story.historyview auf (siehe oben).
Gehen Sie nun oben in die Browseradresszeile und ersetzen Sie "Story" durch "Comment"
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

NeonWilderness

11399 Kommentare Kommentar verfassen

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 Rollendefinitionen, mit denen jeweils bestimmte Erlaubnisse verbunden sind. Der Berechtigungsumfang 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 Admin → Mitglieder (bzw. der Direkt-URL blogname.twoday.net/members/main) an beliebige andere Twoday-Mitglieder vergeben oder diese auch wieder zurücknehmen:

module2role/role03.jpg
Anm.: Mit Sitemanager meint Twoday die "Contentmanager".

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):

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

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">

Ihr Modulcode sollte nun folgendermaßen aussehen:
Klicken Sie abschließend unten auf "Speichern und Schließen":

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 Admin → Module 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

NeonWilderness

10628 Kommentare Kommentar verfassen

Mittwoch, 5. November 2014

Twoday-Tipp #5 - Blog Export on steroids

export/blog2go.jpg Quelle: Jake Hills (unsplash.com)

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

Datum	Änderungen / Edits
08.06.2018	Neue Exportversion 1.4 - Fehlerbereinigung in der Makroerkennung (Änderungen)
22.04.2018	Neue Exportversion 1.3 sowie Wordpress Import-Plugin 0.7 - Mit dieser Version werden nun auch die Lesezähler zu jedem Beitrag mit exportiert, wenn man dies über einen Parameter im Info-Bildschirm aktiviert (Änderungen)
16.04.2018	Neue Exportversion 1.2 - Autolinker darf erst nach der Makroverarbeitung aufgerufen werden, Ungute Trennzeichenketten werden nun entschärft (Änderungen)
04.04.2018	Neue Exportversion 1.1 - Korrigierte Reihenfolge der Bearbeitung von Macros und NiceUrl-Umsetzung auf Beitragsnummern (Änderungen)
19.03.2018	Neue Exportversion 1.0 - Verbesserte NiceUrl-Erkennung, neuer Parameter "keepImg", Verarbeitung des story.url Macros (Änderungen)
26.02.2018	Neue Exportversion 0.99 - Korrekte Parametererkennung in Twoday-Macros, Anzeige von Fortschrittsbalken während des Exports (Änderungen)
21.02.2018	Neue Exportversion 0.98 - Konvertierung und Ausgabe von Beitragsmacros (file, gallery, image, link, poll, story.link) in die Exportdatei, Integration von statischen Twoday-Dateien (staticURL files) in die ausgegebene Ressourcenliste (Änderungen)
16.02.2018	Neue Exportversion 0.97 - https-Kompatibilität, Trackback-Bereinigung, Videoload-Generierung und Performance (Änderungen)
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

Laden Sie die Layoutdatei herunter und speichern Sie sie in ein beliebiges Arbeitsverzeichnis: twodayExport Layout downloaden
Melden Sie sich mit Ihrem Twoday-Account an, rufen Sie Ihr Blog auf und klicken im Menü auf Admin → Layout
Klicken Sie im Layoutmenü auf Meine LayoutsAlternativ (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.: https://neonwilderness.twoday.net/layouts/main)
Klicken Sie im Layout-Übersichtsbild auf Layout importieren
Klicken Sie auf Datei auswählen und suchen/öffnen Sie die in Schritt 1 heruntergeladene Layoutdatei.
Nachdem Sie die Layoutdatei zugeordnet haben, scrollen Sie ganz nach unten und klicken auf Importieren.
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.
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!
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:
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:
Die Schaltfläche "Blog exportieren..." wird ausschließlich für angemeldete Administratoren angezeigt.

Beiträge für einen Export auswählen

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.
Es wird eine kurze Information angezeigt. Klicken Sie nun auf Versionscheck. Die Exportlösung überprüft selbsttätig, ob es eine aktuellere, verbesserte Version der Software gibt und informiert Sie über das Ergebnis.Falls eine neuere Version gefunden wurde, wird dies mit einer gelben Warnmeldung angezeigt.Laden 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).
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:
Im Auswahlfeld Status können Sie den gewünschten Beitragsstatus abfragen:
Falls Sie nur eine (oder mehrere) bestimmte Kategorien exportieren wollen, können Sie diese über die Auswahlbox Kategorie festlegen:
Neben der Auswahlmöglichkeit "Alle" sowie "Unkategorisiert" und "Unveröffentlicht" werden alle Themen gelistet, die Sie in Ihrem Blog verwenden.
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):Wichtig: 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.
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 https://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.Die Überführung der Bilder selbst kann nicht maschinell erfolgen, da diese vom Blogeigentümer einzeln oder mit dem Wordpress-Mehrdateienuploader hochgeladen werden müssen.
Unten im Auswahlbildschirm finden Sie drei Schaltflächen:Export 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

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.Aus 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.
Beim echten Exportlauf wird eine zusätzliche Schaltfläche im Ergebnisbildschirm angezeigt.Durch einen Klick auf Datei... werden nacheinander beide Ergebnisdateien (Exportdatei und Bildreferenzliste) zum Speichern auf Ihren Rechner angeboten.
Durch Doppelklick auf die gespeicherte Bildreferenzliste (.html) wird diese in Ihrem Browser angezeigt:In 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.
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.Tipp: 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.
Durch Doppelklick auf die Exportdatei (.txt) können Sie sich diese in einem Texteditor ansehen und dort bei Bedarf Änderungen vornehmen:Bitte 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.
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:
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:

Klicken Sie im Administrationsbereich von Wordpress auf Einstellungen → Medien. 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.
Klicken Sie anschließend auf den Hauptmenüpunkt Medien, darunter auf Datei hinzufügen und dann auf Dateien auswählen.
Suchen Sie Ihr Sammelverzeichnis mit den gespeicherten Twoday-Bildern, markieren Sie alle Bilder und klicken dann auf Öffnen.
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.Nach 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:

Laden Sie die gepackte Plugindatei herunter und speichern Sie sie in ein beliebiges Arbeitsverzeichnis: Importplugin für Twoday-Blogdaten downloaden
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.
Klicken Sie oben auf Plugin hochladen.
Das erweiterte Import-Plugin liegt als direkt ladbare Zip-Datei (inkl. deutscher Übersetzung) vor. Klicken Sie daher auf Datei auswählen.
Suchen/öffnen Sie die in Schritt 1 heruntergeladene Plugindatei movabletype-importer-v07.zip und klicken Sie dann auf Installieren.
Nach erfolgreichem Abschluss der Installation klicken Sie auf Aktiviere dieses Plugin, um es nachfolgend für Importläufe verwenden zu können.
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.

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:

Melden Sie sich in Ihrem Wordpress-Blog an und klicken Sie im Administrationsmenü auf Werkzeuge, darunter Daten importieren und dann Movable Type and Typepad.
Das spezielle Twoday-Import-Plugin wird gestartet. Nach Klick auf Datei auswählen können Sie eine Exportdatei (.txt) zuordnen.
Den Importprozess starten Sie durch Klick auf Datei aktualisieren und importieren.
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.
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.
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.Nach Abschluss des Imports können Sie durch Klick auf Zur Anzeige in das Wordpress-Frontend wechseln.
Je nach verwendetem Theme (hier: das Wordpress-Standardtheme "Twenty Fourteen") können Sie die letzten Beiträge und Kommentare überprüfen.
Eine detailliertere Überprüfung können Sie über das Backend im Menüpunkt Beiträge durchführen.
Abschließend noch der Strukturcheck bei den Antworten auf Kommentare: die Einrückung bei Twoday-Kommentarantworten ist auch bei Wordpress angekommen.

Epilog

Dieser Beitrag ist lang — ausgedruckt wohl gut 30 Seiten. Allein die Softwarelösung des Exportprozesses umfasst zusätzlich über 1500 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 11 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 (und in einer importfähigen Syntax) 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.

Wichtiger Hinweis

Twoday wird am 31.05.2018 abgeschaltet. Da der offizielle Twoday-Export in den allermeisten Fällen nicht funktioniert und außerdem ein unbrauchbares Format liefert, ist dieses Blog-Export-Tool die einzige maschinelle Möglichkeit, Ihre wertvolle Bloghistorie zu sichern und auf einen neuen Blog zu übertragen. Warten Sie nicht, sondern nutzen Sie die verbliebene Zeit!

Falls Sie Hilfe benötigen oder gar die Gesamtaufgabe der Blogübertragung lieber als Dienstleistung delegieren möchten, sprechen Sie mich an oder senden ein Mail an neonwilderness@ymail.com.

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 aktivierbar (Standard=deaktiviert).

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 (https://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

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.

Version 0.97 (16.02.2018)

Beseitigte Probleme
Das Exportscript läuft nun problemlos im HTTPS-Modus. Dies ist ab sofort der empfohlene Modus für Exportläufe.
Die falsche Berücksichtigung von "Trackback-Kommentaren" ist bereinigt. Trackbacks werden nicht mehr exportiert.
Die AutoLinker-Funktion (siehe Infos in Version 0.91) wurde auf das neueste verfügbare Release aktualisiert. Damit sind alte Fehler in seltenen Konstellationen und bei sehr komplizierten Links nun abgestellt.

Neuerungen/Erweiterungen
Für auf Twoday hochgeladene Bilder, deren URL automatisch auf die neue Zielblog-Adresse geändert werden soll (z.B. von https://static.twoday.net/{blogalias}/images/meinbild.jpg in https://meinneuerwordpressblog.de/wp-content/uploads/meinbild.jpg), kann die Ziel-URL jetzt völlig frei eingegeben werden. Damit werden beliebige Adress-Konfigurationen (z.B. https://meinhugoblog.netlify.com/images) für zu übertragende Twoday-Bilder unterstützt.
Videoload-Anwender können sich darüber freuen, dass das Exportscript nun die vollständigen IFRAMEs, die z.B. zur Anzeige aller unterstützten 20 Plattformen (z.B. YouTube, Vimeo, TED, Soundcloud, Giphy etc.) nötig sind, automatisch auch in die Exportdatei ergänzt. Damit werden alle Videoeinbettungen unmittelbar auch im neuen Blog (dort ohne Videoload-Scriptunterstützung) angezeigt. In den Einstellungen gibt es einen zusätzlichen Parameter, mit dem man die gewünschte Video-Anzeigebreite als Vorgabe einstellen kann (voreingestellt sind 600 Pixel). Dies kann vor Beginn des Exports beliebig angepasst werden. Der Wert 0 (null) unterdrückt die IFRAME-Generierung und gibt den ursprünglichen Videoload-DIV-Befehl unverändert aus — dies kann u.U. dann sinnvoll sein, wenn man das flexiblere Videoload-Script auch im neuen Blog einbinden kann und möchte (z.B. bei einer eigenen Wordpress-Installation, bei einer statischen Seite oder gar bei einem Umzug nach Antville).
Die Performance/Ablaufschnelligkeit des Exportscripts ist durch JavaScript- und CSS-Minifizierung trotz neu hinzugekommener Funktionen leicht verbessert.

Version 0.98 (21.02.2018)

Beseitigte Probleme
Die Unterstützung für im Beitrag verwendete Twoday-Macros wurde um Größenordnungen verbessert. <% file %>, <% gallery %>, <% image %>, <% link %>, <% poll %> und <% story.link %>-Macros werden nun in korrektes, im Zielblog sofort darstellbares HTML übersetzt und in die Exportdatei ausgegeben.
Die Autolinker-Funktion ist nicht mehr standardmäßig aktiviert, da viele Blogplattformen selbst die Fähigkeit haben, erkannte Textlinks in klickbare Links umzusetzen. Über eine Einstellung im Info-Bildschirm kann diese wahlweise wieder aktiviert werden.

Neuerungen/Erweiterungen
Neben statischen Bildern im Blog (staticURL images) werden nun auch alle verwendeten statischen Dateien (staticURL files) mit Link in die ausgegebene Übersichtsliste aufgenommen. Wenn eine URL-Änderung der statischen Ressourcen auf die neue Blogadresse angefordert wurde, wird dies nun auch für diese Dateien ausgeführt — die statischen Twoday-Files müssen also ins gleiche Upload-Verzeichnis hochgeladen werden wie die übertragenen Bilder.
Da die ausgegebene Liste mit statischen Ressourcen nicht mehr nur Bilder enthält, wurde diese von {blogalias} imgurl liste.html in {blogalias} url liste.html umbenannt.

Neuerungen/Erweiterungen

Neben statischen Bildern im Blog (staticURL images) werden nun auch alle verwendeten statischen Dateien (staticURL files) mit Link in die ausgegebene Übersichtsliste aufgenommen. Wenn eine URL-Änderung der statischen Ressourcen auf die neue Blogadresse angefordert wurde, wird dies nun auch für diese Dateien ausgeführt —
die statischen Twoday-Files müssen also ins gleiche Upload-Verzeichnis hochgeladen werden wie die übertragenen Bilder.

Da die ausgegebene Liste mit statischen Ressourcen nicht mehr nur Bilder enthält, wurde diese von {blogalias} imgurl liste.html in {blogalias} url liste.html umbenannt.

Version 0.99 (26.02.2018)

Beseitigte Probleme
Falls in verwendeten Twoday-Macros Parameter genutzt wurden (Bsp: <% story.link to="https://twoday.net" text="Ist bald tot" %>), wurden diese u.U. nicht richtig erkannt und verarbeitet. Dies ist nun korrigiert. Wegen der evtl. falsch generierten Links wird dringend eine Wiederholung des Exportlaufs mit der neuen Version empfohlen.

Neuerungen/Erweiterungen
Während des Exportlaufs informieren nun Fortschrittsbalken über den aktuellen Fortgang des Exports. Immens hilfreich bei der Beurteilung, ob man noch Zeit hat, sich einen neuen Kaffee zu holen.

Version 1.0 (19.03.2018)

Beseitigte Probleme
Bessere Erkennung von Nice-Urls, z.B. ist bei https://{blogalias}.twoday.net/stories/24 die "24" keine Beitragsnummer (obwohl numerisch), sondern eine Nice-Url (Fehler erkannt beim Export von Eugenes Blog und ihren Weihnachtskalenderbeiträgen).
Verbesserte Aufbereitung des story.url Macros

Neuerungen/Erweiterungen
Neuer Parameter "keepImg", mit dem man festlegt, ob die Referenzen auf fehlende (nicht mehr vorhandene) Ressourcen entfernt oder behalten werden sollen. Dies ermöglicht, dass z.B. Bildaufrufe von Bildern, die man irgendwann einmal gelöscht hat, automatisch entfernt werden und später nicht mehr als Fehler angezeigt werden. Man kann jedoch auch festlegen, dass solche Referenzen (als Erinnerungspunkt) in der Exportausgabe verbleiben (diese Einstellung ist der Standard).
Nicht gefundene Twoday-Ressourcen (Bilder/Dateien) werden nun, wenn die Referenz bewahrt wird, mit der Klasse class="notFound" markiert. Man kann solche fehlenden Bilder/Dateien also schnell in der Exportdatei auffinden, indem man nach "notFound" sucht.
Eliminierung kleinerer Anwenderfehler im Beitragstext, z.B. eines doppelten Schrägstrichs am Ende einer URL, was regelmäßig zu Folgeproblemen führte.

Version 1.1 (04.04.2018)

Beseitigte Probleme
Eine Nice-Url kann auch aus einem Macro heraus referenziert werden, z.B. bei einem verlinkten Image-Befehl <% image name="bild1" linkto="/stories/meine-schoene-niceurl" %>. Dummerweise wurde die Twoday-Macrointerpretation programmtechnisch erst NACH der Nice-Url-Umsetzung (auf Beitrags-IDs) gestartet, wodurch einige Nice-Urls unter Umständen in der Exportdatei unbearbeitet blieben. Dies ist nun korrigiert.

Beseitigte Probleme

Eine Nice-Url kann auch aus einem Macro heraus referenziert werden, z.B. bei einem verlinkten Image-Befehl <% image name="bild1" linkto="/stories/meine-schoene-niceurl" %>. Dummerweise wurde die Twoday-Macrointerpretation programmtechnisch erst NACH der Nice-Url-Umsetzung (auf Beitrags-IDs) gestartet, wodurch einige Nice-Urls unter Umständen in der Exportdatei unbearbeitet blieben. Dies ist nun korrigiert.

Version 1.2 (16.04.2018)

Beseitigte Probleme
Die AutoLinker-Funktion, die aus einfachen Twoday-Textlinks echte HTML-Links für die Exportdatei produziert, darf erst nach der Twoday-Makroverarbeitung starten, da der Autolinker sonst versucht, in z.B. <% image name="meinbild" linkto="https://irgendeine-url.de" %> einen unschönen HTML-Link zu integrieren.
Es gibt Blogger, die exakt 8 Trennstriche '--------' zur internen optischen Trennung in ihren Textbeiträgen nutzen. Prinzipiell nichts gegen einzuwenden, nur ist genau diese Zeichenkette das Signal für den Wordpress-Importer (Movable-Type), dass gerade ein Beitrag endet. Damit es nicht zu unschönen Abschneidungen beim Import kommt, wird diese spezielle Zeichenkette jetzt entschärft, wenn sie in einem Beitragstext gefunden wird.

Beseitigte Probleme

Die AutoLinker-Funktion, die aus einfachen Twoday-Textlinks echte HTML-Links für die Exportdatei produziert, darf erst nach der Twoday-Makroverarbeitung starten, da der Autolinker sonst versucht, in z.B. <% image name="meinbild" linkto="https://irgendeine-url.de" %> einen unschönen HTML-Link zu integrieren.

Es gibt Blogger, die exakt 8 Trennstriche '--------' zur internen optischen Trennung in ihren Textbeiträgen nutzen. Prinzipiell nichts gegen einzuwenden, nur ist genau diese Zeichenkette das Signal für den Wordpress-Importer (Movable-Type), dass gerade ein Beitrag endet. Damit es nicht zu unschönen Abschneidungen beim Import kommt, wird diese spezielle Zeichenkette jetzt entschärft, wenn sie in einem Beitragstext gefunden wird.

Version 1.3 (22.04.2018)

Neuerungen/Erweiterungen
Neuer Parameter "ReadCount", mit dem man festlegt, ob der Lesezähler von Beiträgen (story.read Macro) mit in die Exportdatei ausgegeben wird. Der Lesezähler wird am Ende des Beitragstextes in der Form "[#123]" ergänzt, dann während des Imports durch das spezielle Wordpress-Import-Plugin wieder aus dem Text extrahiert und in ein individuelles Anwenderfeld ("Wordpress Custom Fields") eingestellt. Anwenderfelder lassen sich bei der Beitragsansicht (Anzeige/Edit) einblenden ("Ansicht anpassen" → "Benutzerdefinierte Felder" aktivieren).
Das Wordpress-Import-Plugin kann nun den Beitragslesezähler im exportierten Text erkennen, herauslösen und in ein eigenes Feld (Tabelle POSTMETA, Feld "reads") für jeden Beitrag speichern. Achtung: Da wordpress.com Nutzer (FREE-Modus) keine Plugins installieren können, verbleibt der Lesezähler im Beitragstext, da der "normale" Standard-Wordpress-Importer diesen als reinen Text interpretiert. Wenn man das nicht möchte, deaktiviert man die Ausgabe des Lesezählers vor dem Export im Info-Bildschirm (Standard=deaktiviert).

Neuerungen/Erweiterungen

Neuer Parameter "ReadCount", mit dem man festlegt, ob der Lesezähler von Beiträgen (story.read Macro) mit in die Exportdatei ausgegeben wird. Der Lesezähler wird am Ende des Beitragstextes in der Form "[#123]" ergänzt, dann während des Imports durch das spezielle Wordpress-Import-Plugin wieder aus dem Text extrahiert und in ein individuelles Anwenderfeld ("Wordpress Custom Fields") eingestellt. Anwenderfelder lassen sich bei der Beitragsansicht (Anzeige/Edit) einblenden ("Ansicht anpassen" → "Benutzerdefinierte Felder" aktivieren).

Das Wordpress-Import-Plugin kann nun den Beitragslesezähler im exportierten Text erkennen, herauslösen und in ein eigenes Feld (Tabelle POSTMETA, Feld "reads") für jeden Beitrag speichern. Achtung: Da wordpress.com Nutzer (FREE-Modus) keine Plugins installieren können, verbleibt der Lesezähler im Beitragstext, da der "normale" Standard-Wordpress-Importer diesen als reinen Text interpretiert. Wenn man das nicht möchte, deaktiviert man die Ausgabe des Lesezählers vor dem Export im Info-Bildschirm (Standard=deaktiviert).

Version 1.4 (08.06.2018)

Hier downloaden:Exportlösung Importplugin

Beseitigte Probleme
Falls mehrere Twoday-Makros in einer Zeile genutzt wurden (z.B. Bildmakros), konnte es passieren, dass nicht alle gefunden und für die Exportdatei aufbereitet wurden. Dieser Fehler ist nun korrigiert.

Upgrade auf die neue Version

Bitte entfernen Sie zunächst ein bereits installiertes TwodayExport-Layout. Gehen Sie dazu in Meine Layouts (https://{blogalias}.twoday.net/layouts/) und klicken neben dem Twoday-Export Layout auf löschen. Nach erfolgter Löschung laden Sie die downgeloadete neuere Version (Zip-Datei) über Klick auf Layout importieren. Weitere Details zur Installation siehe auch in Abschnitt 1 dieses Beitrags "Die Exportlösung installieren".

NeonWilderness

2011691 Kommentare Kommentar verfassen

Montag, 29. September 2014

Twoday-Tipp #4 - Wordpress heiratet Twoday

Quelle: alexramos10 (Pixabay)

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.

Abbildung 1: Wordpress-Blog in Twoday mit zusätzlichem Menübutton links oben

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.

Abbildung 2: Aktiviertes Menü mit Twoday-Funktionen

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.

Abbildung 3: Wordpress-Blog in Twoday mit zusätzlichem Menübutton rechts oben

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.

Abbildung 4: Aktiviertes Menü mit Twoday-Funktionen und Social Links

Die Einbauanleitung

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

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).
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.txt Variante1.pdf

Variante 2: Seitliche Einblendung
Variante2.html.txt Variante2.pdf
Ö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.

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.
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:

Melden Sie sich bei Twoday mit Ihrem Account an
Klicken Sie im Twoday-Menü auf Admin → Layout → Meine Layouts
Falls Sie nur ein Layout besitzen, legen Sie sich über Neues Layout anlegen ein zweites Layout an
Klicken Sie in der Layoutübersicht beim Zweitlayout (dem nicht aktiven Layout) auf "testen & bearbeiten".
Klicken Sie danach auf Skins (HTML), um den Skin Site.page mit einer der beschriebenen Varianten zu füllen.
Klicken Sie auf Weblog ansehen, um die Darstellung zu kontrollieren.
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!

NeonWilderness

331521 Kommentare Kommentar verfassen

Sonntag, 2. März 2014

Twoday-Tipp #3 - GoogleDrive-Einbindung

Quelle

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

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 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

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 Admin → Module → Extension 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 Admin → Layout → Skins (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

NeonWilderness

127314 Kommentare Kommentar verfassen

Mittwoch, 10. Juli 2013

Twoday-Tipp #2 - Kommentarformular anpassen

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 Admin → Layout → Skins (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 Admin → Layout → Dieses Layout exportieren → Komplett 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:

Comment → anonymousCreatorForm.skin (Änderungen anzeigen) und
HopObject → modJCaptcha.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 Admin → Layout → Layout importieren → Datei 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 Admin → Layout → Meine 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

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:

Melden Sie sich in Twoday mit Ihrer Kennung an und klicken dann in Ihrem Blog oben auf Admin → Module → Extension Module
Klicken Sie beim Eintrag "JQuery Integration" (ganz unten) auf Einstellungen und stellen Sie den Auswahlwert auf "ja".
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

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:

Text des Namensfeldes ("Name")
Text des Url-Feldes ("Url")
Text des Captcha-Feldes ("Bitte gib das verzerrt angezeigte Wort ein")
Breite der Eingabefelder in Prozent der Containerbreite oder in Pixel
true oder false, wobei true die Captcha-Anzeige einzeilig gestaltet und false den Standard (untereinander) beibehält
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

Öffnen Sie das heruntergeladene Script commentform.js in einem geeigneten Texteditor (z.B. Notepad++)
Passen Sie den Funktionsaufruf in den verfügbaren 6 Parametern nach Ihren Wünschen an.
Speichern Sie Ihre Version des Scripts unter dem gleichen Namen.

4. Script auf Ihr Blog hochladen

Melden Sie sich in Twoday mit Ihrer Kennung an und klicken dann in Ihrem Blog oben auf Contribute → Dateien → Neue Datei hinzufügen.
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 https://static.twoday.net/{Ihr Username}/files/commentform.js zur Verfügung.

5. Script einbinden

Klicken Sie in Ihrem Blog oben auf Admin → Layout → Vorlagen bearbeiten (HTML) und dann auf Hauptseite (Site.page).
Navigieren Sie an das Ende der HTML-Anzeige und geben Sie direkt vor </body> folgenden Code zur Einbindung des Scripts ein:
```
<script src="https://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.
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]

NeonWilderness

19069 Kommentare Kommentar verfassen

Mittwoch, 15. Mai 2013

Twoday-Tipp #1 - Backstretch

Nicht, dass hierüber irgendwelche Zweifel aufkommen: Form follows Function und Content geht vor Layout. Aber der eingeschlafene, selbst-konservierende Twoday-Blog-Alltag mit der Innovationsintensität eines ZDF-Fernsehgartens verdient wirklich jede Bemühung, vehement für ein wenig Farbe, Gestaltung und - schreien wir es müde heraus - Veränderung zu werben.

Doch wollen wir nicht unmäßig rumquengeln, denn es bleibt immerhin zu konstatieren, dass Twoday die Plattform in der kargen Free-Variante kostenfrei bereitstellt und man das CMS durch Modifikation der zugrunde liegenden HTML- & CSS-Dateien durch eigene Hände Arbeit doch weitgehend nach individuellen Wünschen gestalten kann - wenn man denn will.

Daneben gibt es noch weitgehend unbekannte Perlen wie etwa die in Twoday aktivierbare jQuery-Komponente, eine Standard-Javascript-Bibliothek, auf welcher wiederum viele freie und nützliche Zusatzscripte basieren, mit deren Hilfe sich das eigene Blog weiter pimpen lässt.

CSS, jQuery, Scripte, das alles klingt komplizierter, als es wirklich ist. In dieser neuen Rubrik werde ich periodisch Lösungen vorstellen, die helfen sollen, die bislang überschaubaren Gestaltungsoptionen eines Twoday-Bloggers etwas zu vermehren.

Als kleines Beispiel dafür, was mit dem Einsatz von jQuery auf Twoday möglich wird, stelle ich heute "Backstretch" vor.

Einsatzmöglichkeiten

Was ist "Backstretch"?

Einfach gesagt, füllt Backstretch jedes HTML Blockelement mit einem vorgegebenen (Hintergrund-)Bild.

Wird dieses Element durch den Nutzer verkleinert, passt Backstretch die Größe des Hintergrundbildes automatisch an ("responsives Verhalten"). Bei bestimmten Ereignissen kann Backstretch auf Wunsch angezeigte Hintergrundbilder ändern. Auch verschiedene, in Zeitabständen wechselnde Bilder (Slideshows, Gallerien) sind möglich.

Anwendungsbeispiele

Dies ist ein einfaches, selbst definiertes DIV-Element mit einer festgelegten Breite und Höhe. Schon beim Laden der Webseite erhält es durch Backstretch ein vorgegebenes Hintergrundbild.

Das Bild lässt sich ereignisgesteuert auswechseln, z.B. durch Klick auf eine Schaltfläche.

Auch der Start einer zeitgesteuerten Anzeige von beliebig vielen Bildern ist möglich.

Natürlich beschränkt sich die Anwendung von Backstretch nicht nur auf selbstdefinierte Blockelemente in einem Beitrag, sondern kann auch DIV-Elemente des Twoday-Templates selbst verändern.

Damit ergibt sich z.B. die sehr kundenorientierte Möglichkeit, Ihren besonders verdienten Twoday-Abonnenten jederzeit eine Blogatmosphäre anzubieten, in denen sie sich ganz besonders wohl fühlen:

Installation

1. jQuery aktivieren

jQuery ist ein Quasi-Industriestandard und umfasst sehr nützliche Basisfunktionen für die Analyse und Änderung von Webseiteninhalten mittels Javascript. Mit jQuery und speziellen, darauf aufbauenden Scripten wird es für Twoday-Nutzer sehr einfach, auch durchaus komplexere Funktionalitäten in ihr Blog zu integrieren.

Falls Sie jQuery noch nicht aktiviert haben, müssen Sie dies als ersten Schritt durchführen:

Melden Sie sich in Twoday mit Ihrer Kennung an und klicken dann in Ihrem Blog oben auf Admin → Module → Extension Module
Klicken Sie beim Eintrag "JQuery Integration" (ganz unten) auf Einstellungen und stellen Sie den Auswahlwert auf "ja".
Sichern Sie Ihre Änderung. Damit ist jQuery als zugrunde liegende Basiskomponente aktiviert und wird beim nächsten Aufruf Ihres Blogs automatisch mit eingebunden. Die Durchführung dieser Aktivierungsschritte ist nur einmalig erforderlich!

2. Backstretch integrieren

Um Backstretch nutzen zu können, müssen Sie es als Script in Ihre Twoday-Webseite einbetten. Führen Sie dazu einmalig folgende Schritte aus:

Melden Sie sich in Twoday mit Ihrer Kennung an und klicken dann in Ihrem Blog oben auf
Admin → Vorlagen HTML → Hauptseite (Site.page)
Scrollen Sie im Textfeld nach unten und positionieren Sie den Cursor (per Klick) direkt vor das HTML-Tag </body>

Fügen Sie dort die folgenden zwei Zeilen ein:

<!-- Backstretch Script -->
<script src="https://cdn.jsdelivr.net/jquery.backstretch/2.0.4/jquery.backstretch.min.js"></script>

Klicken Sie anschließend auf Speichern und Schließen um Ihre Änderung zu sichern. Damit ist die Backstretch-Komponente bereits einsatzfähig. Im nächsten Schritt werden die Instruktionen für Backstretch erstellt.

Anwendung

Einem Blockelement ein Bild zuweisen

Um einem bestimmten HTML-Blockelement ein Hintergrundbild mit Backstretch zuweisen zu können, ist es wichtig, dass dieses über eine eindeutige Kennung (ID) verfügt.

Beispiel: <div id="meinekennung"></div>

Die meisten von Twoday definierten Template-Blockelemente besitzen i.d.R. eine ID oder Klassenzuordnung. Für eigene Blockelemente (z.B. in einem Blogbeitrag) sollten Sie auch eine eindeutige ID vergeben. Eindeutig heißt, dass auf Ihrer angezeigten Twoday-Webseite kein zweites Element dieselbe ID besitzt.

Im ersten Beispiel definieren wir im Text ein Blockelement (DIV) und weisen diesem per Backstretch ein Bild zu (siehe HTML und Javascript Tab).

Zur besseren Übersicht kann man sich das Zusammenspiel der einzelnen Komponenten auch in jsFiddle ansehen: Beispiel #1

<p>Im Beitragstext wird ein leeres weißes Blockelement (Breite 300 Pixel, Höhe 200 Pixel) definiert:</p>
<div id="twins" style="width:300px;height:200px;background:white;">
<p style="text-align:center;color:white;">Text im Blockelement mit der ID "twins"</p>
</div>

<script type="text/javascript">
$("#twins").backstretch("https://dl.dropboxusercontent.com/u/16775880/images/twintowers.jpg");
</script>

Dieses Script fügen Sie in der Hauptseite (Site.page) ein, und zwar direkt hinter die Zeile, mit der das Backstretch-Script eingebettet wurde (siehe 'Installation').

Eine Bildergallerie anzeigen

Zur Aktivierung der Galleriefunktion übergibt man Backstretch mehrere, durch Komma getrennte und in eckige Klammern eingebettete Bildadressen sowie verschiedene Zusatzparameter, die festlegen, wie die Bildabfolge ablaufen soll:

duration:nnnn Anzeigedauer eines Bildes in ms (nnnn)
fade:nnnn Überblendedauer in ms (nnnn)

Auch hierzu gibt es ein zugehöriges jsFiddle: Beispiel #2

<div id="bildgallerie"></div>

$("#bildgallerie").backstretch( [
	"https://dl.dropboxusercontent.com/u/16775880/images/obst.jpg",
	"https://dl.dropboxusercontent.com/u/16775880/images/erdbeeren.jpg",
	"https://dl.dropboxusercontent.com/u/16775880/images/beeren.jpg" ],
	{duration: 2000, fade: 750});
// Kommentar: 3 Bilder, Anzeigedauer jeweils 2 Sekunden, Übergang in 750ms

Eine Gallerie im Hintergrund der Webseite

Eine Bildergallerie ist nicht auf selbstdefinierte Blockelemente beschränkt. Prinzipiell kann man jedes Blockelement, das eine eindeutige ID besitzt, von Backstretch mit Hintergründen versorgen lassen. Will man den gesamten Hintergrund der Webseite ausfüllen, lässt man den Selektor einfach weg.

Das zugehörige jsFiddle: Beispiel #3

$.backstretch( [
	"https://dl.dropboxusercontent.com/u/16775880/images/twintowers.jpg",
	"https://dl.dropboxusercontent.com/u/16775880/images/bigben.jpg" ],
	{duration: 3000, fade: 1500});
// Kommentar: 2 Bilder, Anzeigedauer jeweils 3s, Übergang in 1.5s

Ereignisgesteuerte Hintergrundänderung

Backstretch-Anweisungen zur Änderung eines Hintergrundes können nicht nur automatisch beim Laden der Webseite ausgeführt werden, sondern nach Bedarf an bestimmte Ereignisse gekoppelt werden.

In diesem Beispiel verwende ich eine (stark) vereinfachte HTML-Struktur eines Twoday-Blogs mit zwei Beiträgen. Die Überschriften in Twoday-Blogbeiträgen (Element "h3") besitzen die CSS-Klasse "storyTitle" - sie können also einfach über den jQuery-Selektor "h3.storyTitle" für Veränderungen ausgewählt werden.

Nach dem Klick auf einen Button werden die Hintergründe aller "h3.storyTitle"-Überschriften durch Backstretch mit einer Grafik hinterlegt. Hier das entsprechende jsFiddle: Beispiel #4

Es gibt viele definierte Blockelemente in Twoday-Blogs, denen man mittels Backstretch einen einmaligen oder wechselnden Hintergrund zuweisen kann, so z.B.

div#container Eigentlicher Seiteninhalt (Text und Sidebars)
div#content Gesamtheit der angezeigten Blogbeiträge
div.story Ein einzelner Blogbeitrag
div.storyContent Textbereich des Blogbeitrags
div.storyDate Autor und Erstellungsdatum
div.storyLinks Links und Anzahl Kommentare
div#sidebar01 Sidebar-Module
und viele mehr.

$("#btnGrafikAktivieren").click(function(e) {
e.preventDefault();
$("h3.storyTitle").backstretch("https://dl.dropboxusercontent.com/u/16775880/images/headerbg.jpg");
});

Tageszeitabhängiger Hintergrund

Beispiel #5

Kann man dem eigenen Twoday-Blog beibringen, das angezeigte Hintergrundbild (wie auf manchen Smartphone-Widgets) tageszeitabhängig zu ändern? Yep, wenn auch hierzu ein Handvoll mehr Javascript-Zeilen erforderlich sind. Hier das entsprechende jsFiddle: Beispiel #5

Falls Sie das Script ausprobieren möchten, kopieren Sie es inkl. einleitendem <script type="text/javascript"> und schließendem </script>-Tag in die Hauptseite (Site.page), und zwar direkt hinter die Zeile, mit der das Backstretch-Script eingebettet wurde (siehe 'Installation'). Führen Sie außerdem folgende Script-Anpassungen durch:

Ändern Sie die Bildadresse (URL) in der Variablen bildurl auf die Adresse, unter der Ihre tageszeitabhängigen Bilder zu finden sind.
Ändern Sie die Variable bildervonbis dahingehend ab, dass in jeder Zeile ein Bildname, die Beginnstunde der Anzeige und die Bis-Stunde der Anzeige - jeweils durch Komma getrennt - aufgeführt sind.
Das Script legt die Bilder per $.backstretch(..) vollflächig auf den gesamten Webseitenhintergrund. Wollen Sie die zeitabhängigen Bildwechsel in einem anderen Blockelement durchführen, müssen Sie die Backstretch-Anweisung anpassen: z.B. $("#meinbildbereich").backstretch(..).

Vertiefende Lesequellen

jQuery Dokumentation (EN)
jQuery Einführung und Grundlagen (DE)
Backstretch Script-Dokumentation von Scott Robin (EN)
Backstretch Script-Dokumentation auf GitHub (EN)

Fragen und/oder Feedback gerne hier oder per Mail. Viel Spaß beim Twoday-Pimpen! ;)

NeonWilderness

111010 Kommentare Kommentar verfassen

In a neon wilderness he was restless

Schöner Bloggen

Wichtiger Hinweis

Nur ein Script — und alles wird gut

Videos im Blogbeitrag anzeigen

Ergänzende Videoparameter

Breite

Seitenverhältnis

Eigene MP4-Videodateien

Posterbild für eigene MP4-Videodateien

Anzeige einer wählbaren Zeitspanne (von/bis) von YouTube-Videos

Anzeige von jsfiddle-Codebeispielen

Einbindung von Soundcloud-Audiostücken

Twoday-Videocode automatisch generieren

Probleme, Fragen, Ergänzungswünsche?

Installation der Beitragskennzeichnung

Markierung auch für Kommentare aktivieren

Zeitspannen ändern

Farben oder Text ändern

Problematische Änderungserkennung unter Twoday

Das Twoday-Berechtigungsmodell

Installation der Berechtigungsprüfung für Twoday-Module

Module bestimmten Twoday-Rollen zuordnen

Das Problem

Die Lösung

Vorteile / Eigenschaften der Exportlösung:

Installation und Nutzung

Die Layoutdatei twodayExport.zip

Das neue Layout installieren

Vorarbeiten

Beiträge für einen Export auswählen

Export durchführen

Vorarbeiten

Gesicherte Bilder hochladen

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

Twoday-Daten nach Wordpress importieren

Epilog

Wichtiger Hinweis

Was tun bei Problemen / Fehlern?

Browserkompatibilität

Version 0.91

Autolink-Ergänzung

Version 0.92

Blogexport für wordpress.com

Entfernung der Gast-Kennung

Beitrags-ID als Benutzerfeld in Wordpress

Version 0.95

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

Umsetzung der NiceUrls auf numerische Adressen

Verbesserte Erkennung/Verarbeitung von image-Macros

Version 0.96

Verbesserte NiceUrl-Verarbeitung

Erweiterte Konsolennachrichten im Debugging-Modus

Version 0.97 (16.02.2018)

Version 0.98 (21.02.2018)

Version 0.99 (26.02.2018)

Version 1.0 (19.03.2018)

Version 1.1 (04.04.2018)

Version 1.2 (16.04.2018)

Version 1.3 (22.04.2018)

Version 1.4 (08.06.2018)

Hier downloaden: Exportlösung Importplugin

Upgrade auf die neue Version

Das Problem

Die Lösung

Die Einbauanleitung

Variante 1: Perspektivische Verzerrung

Variante 2: Seitliche Einblendung

Varianten "gefahrlos" testen

Wichtiger Hinweis

Twoday Webspace - eine knappe Ressource

Wohin also mit den Speicherfressern?

GoogleDrive — 15 GB kostenloser Webspace

Google-Account anlegen

Schritt 1: Anmeldung

GoogleDrive einrichten

Schritt 2: Synchronisierung installieren

Schritt 3: Verzeichnisse einrichten

Schritt 4: Verzeichnisadresse herausfinden

Bilder nach GoogleDrive hochladen

Hier downloaden:Exportlösung Importplugin