Archiv der Kategorie: Schöner Bloggen

Twoday-Tipp #8 – Videos anzeigen

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

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 11 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 „http://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
bliptv	www.blip.tv
dailymotion	www.dailymotion.com
putpat	www.putpat.tv
vube	www.vube.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.

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

Twoday-Tipp #7 – Beitragsmarkierung

9 Antworten

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

Berechtigungsprüfung für Twoday-Module

Schreibe eine Antwort

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="http://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

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

8 Antworten

module2role/role01.jpg

Das Twoday-Berechtigungsmodell

module2role/role02.jpg

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.

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="http://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

module2role/role07.jpg

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.

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

Blog Export on steroids

10 Antworten

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
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.: http://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 http://static.twoday.net/{blogalias}/images/bildnamereferenziert haben.
Diese Bilder sollten — sofern Sie Twoday nicht als (unsicheren) Bildspeicherplatz behalten wollen — in das Media-Verzeichnis des Zielblogs überführt werden. Wenn Sie diese Option aktivieren, werden die Bildadressen im Beitragstext schon während des Exports angepasst. Geben Sie hierzu einfach die URL Ihres neuen WordPress-Blogs an. Bildadressen, die sich nicht auf den eigenen statischen Twoday-Speicher beziehen, bleiben selbstverständlich unverändert.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-neon.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 23 Seiten. Allein die Softwarelösung des Exportprozesses umfasst zusätzlich knapp 1000 Zeilen HTML, CSS und JavaScript. Diese Arbeit lizensiere ich als OpenSource unter MIT, d.h. jede/r Blogger:in kann diese kostenfrei und ohne jedwede kompensatorische Verpflichtung verwenden und einsetzen. Dies ist mein „Danke“ an eine Community, in der ich nun bereits über 8 Jahre viel Freude habe und interessante Menschen kennenlernen durfte.

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

Was tun bei Problemen / Fehlern?

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

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

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

Browserkompatibilität

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

Viel Erfolg beim Installieren, Testen und Exportieren!

Twoday-Tipp #5 – Blog Export on steroids

4 Antworten

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
06.11.2014	Browserkompatibilität

Das Problem

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.

Die Lösung

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

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

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 http://static.twoday.net/{blogalias}/images/bildnamereferenziert haben.
Diese Bilder sollten — sofern Sie Twoday nicht als (unsicheren) Bildspeicherplatz behalten wollen — in das Media-Verzeichnis des Zielblogs überführt werden. Wenn Sie diese Option aktivieren, werden die Bildadressen im Beitragstext schon während des Exports angepasst. Geben Sie hierzu einfach die URL Ihres neuen WordPress-Blogs an. Bildadressen, die sich nicht auf den eigenen statischen Twoday-Speicher beziehen, bleiben selbstverständlich unverändert.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

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

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

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

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

Was tun bei Problemen / Fehlern?

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

Viel Erfolg beim Installieren, Testen und Exportieren!

WordPress heiratet Twoday

21 Antworten

Quelle: alexramos10 (Pixabay)

Datum	Änderungen / Edits
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!

Twoday-Tipp #4 – WordPress heiratet Twoday

Schreibe eine Antwort

Quelle: alexramos10 (Pixabay)

Datum	Änderungen / Edits
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

Die Lösung

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

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+

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

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

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!

Angstfrei bloggen trotz 3-MB-Grenze

14 Antworten

Quelle

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="http://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

Twoday-Tipp #3 – GoogleDrive-Einbindung

Schreibe eine Antwort

Quelle

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.

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.

Das Twoday-Platzproblem

Twoday Webspace – eine knappe Ressource

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

Wohin also mit den Speicherfressern?

Speichermenge
Verfügbarkeit
Performanz
Direktzugriff
Vertrauen auf eine nachhaltige Existenz

Was ist GoogleDrive?

GoogleDrive — 15 GB kostenloser Webspace

GoogleDrive installieren und einrichten

Google-Account anlegen

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

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.

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

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.

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

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

GoogleDrive-Bilder in das Blog einbinden

Bilder nach GoogleDrive hochladen

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.

Bilder manuell im Blog einbinden (ohne Scriptunterstützung)

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

Verlinkung von Bildern mit Scriptunterstützung

<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="http://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" />

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

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

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

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

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

Was tun bei Problemen / Fehlern?

Browserkompatibilität

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

Was tun bei Problemen / Fehlern?

Browserkompatibilität

Das Problem

Die Lösung

Die Einbauanleitung

Variante 1: Perspektivische Verzerrung

Variante 2: Seitliche Einblendung

Varianten „gefahrlos“ testen

Das Problem

Die Lösung

Die Einbauanleitung

Variante 1: Perspektivische Verzerrung

Variante 2: Seitliche Einblendung

Varianten „gefahrlos“ testen

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

Schritt 5: Dateien nach GoogleDrive hochladen

Alternatives Hochladen via GoogleDriveSync

Bilder manuell im Blog einbinden (ohne Scriptunterstützung)

Verlinkung von Bildern mit Scriptunterstützung

Schritt 6: jQuery aktivieren (einmalig)

Schritt 7: Hilfsscript aktivieren (einmalig)