Archiv der Kategorie: Schöner Bloggen

Schöner Bloggen #2 – Kommentarformular anpassen

9 Antworten

Pimp Your Twoday Commentform

Herr Nömix hat im Hilfe-Forum eine Frage zur Veränderung des Kommentarformulars aufgeworfen, die sicher auch für weitere Twoday-Blogger interessant ist.
Ich beschreibe nachstehend 2 Wege, wie man diese Änderungen umsetzen kann, rate jedoch nachdrücklich zu Methode #2 als dezentere und „unblutigere“ Lösung. Methode #1 ist eher für HTML-/CSS-erfahrene Blogger gedacht, die eine Operation am offenen Twoday-Herzen nicht scheuen (Not for the faint of heart!) und sich des Risikos eines evtl. beschädigten Layouts bewusst sind.

#1 Modifikation von Layout-Skins

Bekannterweise können angemeldete Twoday-Nutzer über die Klickfolge Admin → Layout → Skins (HTML) bestimmte CSS- und HTML-Elemente ihres gewählten Layouts ändern.
Unter anderem ist dort auch das Skin „Kommentarformular (Comment.edit)“ änderbar – jedoch wird nach erster Code-Analyse schnell klar, dass die von Herrn Nömix anvisierten Felder offensichtlich in weiteren Skins versteckt sind, die selbst nicht so einfach für eine Änderung erreichbar sind.
Allerdings bietet Twoday unter Admin → Layout → Dieses Layout exportieren → Komplett eine Möglichkeit an, sich die Gesamtmenge aller Skins in einer komprimierten Sammeldatei herunterzuladen, die mit jedem ZIP-Programm geöffnet werden kann.

 Tipp: Führen Sie den Download zweimal durch und speichern Sie eine Datei als „download_backup.zip“ – so steht Ihnen immer ein frisches Original zum Re-Upload zur Verfügung, falls Ihre Änderungen das Layout beschädigt haben sollten.

Im Unterordner skins der ZIP-Datei finden sich die nach Funktionalitäten und Anwendungsbereichen geordneten Skin-Module. Für die gewünschten Änderungen am Kommentarformular sind folgende Module relevant:

  1. Comment → anonymousCreatorForm.skin (Änderungen) und
  2. HopObject → modJCaptcha.skin (Änderungen)

Die Bearbeitung kann ohne vorheriges Entpacken der zip-Datei direkt aus dem Programm erfolgen, wenn man zum Editieren einen geeigneten Texteditor (z.B. Notepad++) über die jeweiligen Optionen des Zip-Programms eingebunden hat. Dies hat den Vorteil, dass nach erfolgter Änderung und der Beendigung des Editors der geänderte Skin sofort in die Zip-Datei zurückgepackt wird.
Nach Abschluss aller Skin-Änderungen muss das modifizierte Layout als gepacktes Gesamtpaket wieder auf Twoday hochgeladen werden. Dies funktioniert unter Admin → Layout → Layout importieren → Datei auswählen. Nach Selektion der veränderten Zip-Datei wird diese mit Klick auf Importieren zurückgeladen.
Twoday legt automatisch ein neues Layout an, welches unter Admin → Layout → Meine Layouts noch aktiviert werden muss. Spätestens nach einem Browser-Refresh (Umschalt-F5) sollten die durchgeführten Layout-Änderungen wirksam werden.
Soweit die arbeitsintensive DIY-Methode; die folgende Methode #2 offeriert einen eleganteren Weg, der zudem nur wenige Änderungen mit Standard-Twoday-Mitteln erfordert.

#2 Nutzung eines fertigen Scripts

1. jQuery aktivieren

jQuery

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

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

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

2. Script ‚commentform.js‘ herunterladen

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

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

3. Script-Parameter bearbeiten

Script

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

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

Die Funktion „PimpMyCommentForm“ hat fünf Übergabeparameter:

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

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

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

// So erfolgt der Scriptaufruf im Standard
PimpMyCommentForm("Dein Name", "Deine Webseite", "", "420px", true, false);
// Beispiel 1
PimpMyCommentForm("", "Homepage", "Bitte den unten angezeigten Captcha-Code eingeben!", "95%", false, true);
// Beispiel 2
PimpMyCommentForm("Nickname", "Blogadresse", "Sicherheitscode eingeben:", "350px", true);

Ihre To-Dos

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

4. Script auf Ihr Blog hochladen

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

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

5. Script einbinden

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

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

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

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

Twoday-Tipp #2 – Kommentarformular anpassen

Schreibe eine Antwort

pimpmycommentform.jpg

Herr Nömix hat im Hilfe-Forum eine Frage zur Veränderung des Kommentarformulars aufgeworfen, die sicher auch für weitere Twoday-Blogger interessant ist.
Ich beschreibe nachstehend 2 Wege, wie man diese Änderungen umsetzen kann, rate jedoch nachdrücklich zu Methode #2 als dezentere und „unblutigere“ Lösung. Methode #1 ist eher für HTML-/CSS-erfahrene Blogger gedacht, die eine Operation am offenen Twoday-Herzen nicht scheuen (Not for the faint of heart!) und sich des Risikos eines evtl. beschädigten Layouts bewusst sind.

#1 Modifikation von Layout-Skins

Bekannterweise können angemeldete Twoday-Nutzer über die Klickfolge Admin → Layout → Skins (HTML) bestimmte CSS- und HTML-Elemente ihres gewählten Layouts ändern.
Unter anderem ist dort auch das Skin „Kommentarformular (Comment.edit)“ änderbar – jedoch wird nach erster Code-Analyse schnell klar, dass die von Herrn Nömix anvisierten Felder offensichtlich in weiteren Skins versteckt sind, die selbst nicht so einfach für eine Änderung erreichbar sind.
Allerdings bietet Twoday unter Admin → Layout → Dieses Layout exportieren → Komplett eine Möglichkeit an, sich die Gesamtmenge aller Skins in einer komprimierten Sammeldatei herunterzuladen, die mit jedem ZIP-Programm geöffnet werden kann.

 Tipp: Führen Sie den Download zweimal durch und speichern Sie eine Datei als „download_backup.zip“ – so steht Ihnen immer ein frisches Original zum Re-Upload zur Verfügung, falls Ihre Änderungen das Layout beschädigt haben sollten.

Im Unterordner skins der ZIP-Datei finden sich die nach Funktionalitäten und Anwendungsbereichen geordneten Skin-Module. Für die gewünschten Änderungen am Kommentarformular sind folgende Module relevant:

  1. Comment → anonymousCreatorForm.skin (Änderungen anzeigen) und
  2. HopObject → modJCaptcha.skin (Änderungen anzeigen)

Die Bearbeitung kann ohne vorheriges Entpacken der zip-Datei direkt aus dem Programm erfolgen, wenn man zum Editieren einen geeigneten Texteditor (z.B. Notepad++) über die jeweiligen Optionen des Zip-Programms eingebunden hat. Dies hat den Vorteil, dass nach erfolgter Änderung und der Beendigung des Editors der geänderte Skin sofort in die Zip-Datei zurückgepackt wird.
Nach Abschluss aller Skin-Änderungen muss das modifizierte Layout als gepacktes Gesamtpaket wieder auf Twoday hochgeladen werden. Dies funktioniert unter Admin → Layout → Layout importieren → Datei auswählen. Nach Selektion der veränderten Zip-Datei wird diese mit Klick auf Importieren zurückgeladen.
Twoday legt automatisch ein neues Layout an, welches unter Admin → Layout → Meine Layouts noch aktiviert werden muss. Spätestens nach einem Browser-Refresh (Umschalt-F5) sollten die durchgeführten Layout-Änderungen wirksam werden.
Soweit die arbeitsintensive DIY-Methode; die folgende Methode #2 offeriert einen eleganteren Weg, der zudem nur wenige Änderungen mit Standard-Twoday-Mitteln erfordert.

#2 Nutzung eines fertigen Scripts

1. jQuery aktivieren

script/jquery.jpg

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

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

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

2. Script ‚commentform.js‘ herunterladen

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

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

3. Script-Parameter bearbeiten

script/script.jpg

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

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

Die Funktion „PimpMyCommentForm“ hat fünf Übergabeparameter:

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

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

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

// So erfolgt der Scriptaufruf im Standard
PimpMyCommentForm("Dein Name", "Deine Webseite", "", "420px", true, false);
// Beispiel 1
PimpMyCommentForm("", "Homepage", "Bitte den unten angezeigten Captcha-Code eingeben!", "95%", false, true);
// Beispiel 2
PimpMyCommentForm("Nickname", "Blogadresse", "Sicherheitscode eingeben:", "350px", true);

Ihre To-Dos

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

4. Script auf Ihr Blog hochladen

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

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

5. Script einbinden

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

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

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

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

[22.12.2014 – Bild-/Linkadressen aktualisiert]

Schöner Bloggen auf Twoday #1

10 Antworten

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

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

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

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

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

Einsatzmöglichkeiten

Was ist „Backstretch“?

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

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

Anwendungsbeispiele

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

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

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

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

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



Installation

1. jQuery aktivieren

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

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

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

2. Backstretch integrieren

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

  1. Melden Sie sich in Twoday mit Ihrer Kennung an und klicken dann in Ihrem Blog oben auf
    Admin → Vorlagen HTML → Hauptseite (Site.page)
  2. Scrollen Sie im Textfeld nach unten und positionieren Sie den Cursor (per Klick) direkt vor das HTML-Tag </body>
  3. Fügen Sie dort die folgenden zwei Zeilen ein: 
    <!-- Backstretch Script -->
<script src="http://cdn.jsdelivr.net/jquery.backstretch/2.0.3/jquery.backstretch.min.js"></script>
  4. Klicken Sie anschließend auf Speichern und Schließen um Ihre Änderung zu sichern. Damit ist die Backstretch-Komponente bereits einsatzfähig. Im nächsten Schritt werden die Instruktionen für Backstretch erstellt.

Anwendung

Einem Blockelement ein Bild zuweisen

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

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

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

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

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

<p>Im Beitragstext wird ein leeres weißes Blockelement (Breite 300 Pixel, Höhe 200 Pixel) definiert:</p>
<div id="twins" style="width:300px;height:200px;background:white;">
<p style="text-align:center;color:white;">Text im Blockelement mit der ID "twins"</p>
</div>
<script type="text/javascript">
$("#twins").backstretch("http://content.wuala.com/contents/NeonWilderness/Public/images/twintowers.jpg");
</script>

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

Eine Bildergallerie anzeigen

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

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

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

<div id="bildgallerie"></div>
$("#bildgallerie").backstretch( [
"http://content.wuala.com/contents/NeonWilderness/Public/images/obst.jpg",
"http://content.wuala.com/contents/NeonWilderness/Public/images/erdbeeren.jpg",
"http://content.wuala.com/contents/NeonWilderness/Public/images/beeren.jpg" ],
{duration: 2000, fade: 750});
// Kommentar: 3 Bilder, Anzeigedauer jeweils 2 Sekunden, Übergang in 750ms

Eine Gallerie im Hintergrund der Webseite

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

Das zugehörige jsFiddle: Beispiel #3

$.backstretch( [
"http://content.wuala.com/contents/NeonWilderness/Public/images/twintowers.jpg",
"http://content.wuala.com/contents/NeonWilderness/Public/images/bigben.jpg" ],
{duration: 3000, fade: 1500});
// Kommentar: 2 Bilder, Anzeigedauer jeweils 3s, Übergang in 1.5s

Ereignisgesteuerte Hintergrundänderung

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

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

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

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

  • div#container Eigentlicher Seiteninhalt (Text und Sidebars)
  • div#content Gesamtheit der angezeigten Blogbeiträge
  • div.story Ein einzelner Blogbeitrag
  • div.storyContent Textbereich des Blogbeitrags
  • div.storyDate Autor und Erstellungsdatum
  • div.storyLinks Links und Anzahl Kommentare
  • div#sidebar01 Sidebar-Module
  • und viele mehr.
$("button#btnGrafikAktivieren").click(function(e) {
e.preventDefault();
$("h3.storyTitle").backstretch("http://content.wuala.com/contents/NeonWilderness/Public/images/headerbg.jpg");
});

Tageszeitabhängiger Hintergrund

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

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

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

Vertiefende Lesequellen

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

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

Twoday-Tipp #1 – Backstretch

Schreibe eine Antwort

2daychange.jpg

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

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

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

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

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

Einsatzmöglichkeiten

Was ist „Backstretch“?

script/backstretch.jpg/

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

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

Anwendungsbeispiele

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

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

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

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

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



Installation

1. jQuery aktivieren

script/jquery.jpg/

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

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

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

2. Backstretch integrieren

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

  1. Melden Sie sich in Twoday mit Ihrer Kennung an und klicken dann in Ihrem Blog oben auf
    Admin → Vorlagen HTML → Hauptseite (Site.page)
  2. Scrollen Sie im Textfeld nach unten und positionieren Sie den Cursor (per Klick) direkt vor das HTML-Tag </body>
  3. Fügen Sie dort die folgenden zwei Zeilen ein: 
    <!-- Backstretch Script -->
<script src="http://cdn.jsdelivr.net/jquery.backstretch/2.0.3/jquery.backstretch.min.js"></script>
  4. Klicken Sie anschließend auf Speichern und Schließen um Ihre Änderung zu sichern. Damit ist die Backstretch-Komponente bereits einsatzfähig. Im nächsten Schritt werden die Instruktionen für Backstretch erstellt.

Anwendung

Einem Blockelement ein Bild zuweisen

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

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

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

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

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

<p>Im Beitragstext wird ein leeres weißes Blockelement (Breite 300 Pixel, Höhe 200 Pixel) definiert:</p>
<div id="twins" style="width:300px;height:200px;background:white;">
<p style="text-align:center;color:white;">Text im Blockelement mit der ID "twins"</p>
</div>
<script type="text/javascript">
$("#twins").backstretch("https://googledrive.com/host/0B87rILW4RVIJNlN3eUJxVWN5ZWM/twintowers.jpg");
</script>

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

Eine Bildergallerie anzeigen

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

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

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

<div id="bildgallerie"></div>
$("#bildgallerie").backstretch( [
"https://googledrive.com/host/0B87rILW4RVIJNlN3eUJxVWN5ZWM/obst.jpg",
"https://googledrive.com/host/0B87rILW4RVIJNlN3eUJxVWN5ZWM/erdbeeren.jpg",
"https://googledrive.com/host/0B87rILW4RVIJNlN3eUJxVWN5ZWM/beeren.jpg" ],
{duration: 2000, fade: 750});
// Kommentar: 3 Bilder, Anzeigedauer jeweils 2 Sekunden, Übergang in 750ms

Eine Gallerie im Hintergrund der Webseite

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

Das zugehörige jsFiddle: Beispiel #3

$.backstretch( [
"https://googledrive.com/host/0B87rILW4RVIJNlN3eUJxVWN5ZWM/twintowers.jpg",
"https://googledrive.com/host/0B87rILW4RVIJNlN3eUJxVWN5ZWM/bigben.jpg" ],
{duration: 3000, fade: 1500});
// Kommentar: 2 Bilder, Anzeigedauer jeweils 3s, Übergang in 1.5s

Ereignisgesteuerte Hintergrundänderung

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

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

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

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

  • div#container Eigentlicher Seiteninhalt (Text und Sidebars)
  • div#content Gesamtheit der angezeigten Blogbeiträge
  • div.story Ein einzelner Blogbeitrag
  • div.storyContent Textbereich des Blogbeitrags
  • div.storyDate Autor und Erstellungsdatum
  • div.storyLinks Links und Anzahl Kommentare
  • div#sidebar01 Sidebar-Module
  • und viele mehr.
$("#btnGrafikAktivieren").click(function(e) {
e.preventDefault();
$("h3.storyTitle").backstretch("https://googledrive.com/host/0B87rILW4RVIJNlN3eUJxVWN5ZWM/headerbg.jpg");
});

Tageszeitabhängiger Hintergrund

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

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

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

Vertiefende Lesequellen

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

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