KIPP+

Sicherlich haben Sie es auf der ein oder anderen Seite schon einmal gesehen. Sie überfahren einen Link mit der Maus und in einer Sprechblase bekommen Sie einen Screenshot der Seite auf die der Link führt zu sehen. Thumber.de stellt dazu eine linkpreview.js zur Verfügung. Um das ganze für WebsiteBaker so einfach wie möglich zu halten habe ich wieder ein kleines Snippet daraus erstellt.

thumber.de ist ein externer Screenshot-Dienst der kostenlose wie auch kostenpflichtige Screenshots anbietet. Ich stehe in keiner Verbindung zu thumber.de. Habe lediglich die zur Verfügung gestellte linkpreview.js zur einfachen Verwendung mit WebsiteBaker in ein Snippet gebaut.

Das Snippet übernimmt insgesamt drei Aufgaben.

• Einbindung der linkpreview.js zum Anzeigen des Screenshots.
• Externe Links bekommen das Attribut target=”_new”.
• Externe Links bekommen die Class external, hinter jedem Link erscheint ein kleiner Pfeil der auf eine externe Seite hinweist.

Wie gehe ich vor?

Als erstes erstellen Sie sich einen kostenlosen Account auf thumber.de und tragen dort die Webseite ein auf der das Script verwendet wird. Danach installieren Sie das Snippet. Voraussetzung ist natürlich wieder dass Sie jQuery nach meiner Anleitung eingebunden haben und sich Ihre Installation direkt im Root, also in keinem Unterverzeichnis wie z.B. /cms, befindet.

Das war schon alles, die Screenshots sollten nun wie gewünscht angezeigt werden.

Was hat das denn mit den Attribut “target=”_new”" auf sich?

Damit ein Link von unserer Seite zu einer anderen sich in einem neuen Tab/Fenster öffnet muss das Attribut “target=”_blank” oder “target=”_new” beim Eintragen des Links hinzugefügt werden. Oftmals vergisst man das und W3C konform (Validierungsfehler) ist es auch nicht. Das Snippet übernimmt diese Aufgabe für Sie und fügt das Attribut an jeden ausgehenden Link per Javascript hinzu. Sie tragen im Editor (Backend) also nur noch den Link ein und im Frontend erscheint der Link mit dem entsprechenden Attribut, der Link geht in einem neuen Tab/Fenster auf.

Und was soll das mit der Class “external”?

Das ist eigentlich ein Gimmik welches Ihre ausgehenden Links mit einem zusätzlichen Icon ausstattet. Brauchen tut man es nicht, sieht aber nett aus.

Ich möchte nur die Screenshots haben, den anderen Quatsch brauche ich nicht.

Das ist auch kein Problem. Öffnen Sie die frontend.js im Modul-Ordner linkpreview. Direkt am Anfang in Zeile 5 finden Sie folgenden Eintrag:

}).addClass('thumber external').attr("target", "_new");

Diesen ändern Sie in

}).addClass('thumber');

Nun wird nur noch die class “thumber” gesetzt. Diese wird benötigt damit die Screenshots angezeigt werden. Wollen Sie nur die class “external” entfernen aber das target “_new” behalten entfernen sie nur das Wort “external”.

Soweit ok nur das Icon für “external” gefällt mir nicht.

Das Icon liegt im Ordner modules/linkpreview/img und ist am Namen external.png zu erkennen. Tauschen Sie das Icon gegen ein anderes aus. Sollte das Icon einen anderen Namen und andere Abmessungen haben müssen Sie noch entsprechende Änderungen in der linkpreview.css vornehmen. Die CSS Datei liegt im Ordner modules/linkpreview/css.

In Zeile 109 finden Sie:

a.external{background:url(../img/external.png) center right no-repeat;
           padding-right:13px;}

Hier ändern Sie den Namen des Icons. Sollte es sich nicht korrekt in Ihre Seite einfügen ändern Sie zusätzlich noch den padding-Wert.

Und nun?

Nichts und nun, das war schon alles. Viel Spass mit den neuen Funktionen.

 

Download
Downloaded 49 times