Mir gefiehlen die guten alten Weblinks von Joomla nicht, als ich diese Site relaunchte. Beispielsweise war es nicht möglich die Sprache der verlinkten Site per Landesfahne zu kennzeichnen. Auch waren Vorschaubilder der Webseiten zwar per Textbild möglich, aber eine Vereinheitlichung der Bilder nur schwer zu erreichen. So entschied ich mich das ganze mit SEBLOD zu machen. Bei der Arbeit an der Weblink-Komponente fand ich auch eine Möglichkeit, die Webseitenvorschaubilder zu automatisieren. - Doch der Reihe nach:
Beginnen wir mit dem App Ordner:
Ich habe ihn "Weblinks" genannt und alles angekreuzt und mit "Ja" gekennzeichnet, was da möglich ist. Als Farbe habe ich ein hoffnungsvolles Grün gewählt.
Danach benötige ich einige Felder:
- Article Title (da nehme ich das fertige Joomlafeld). Ich benötige die eindeutige ID für den Weblink und natürlich auch die Möglichkeit den im Nachhinein jederzeit editieren zu können unter den Beträgen.
- Für den Text verwende ich den Wysiwyg-Editor
- In der ersten Variante (ich habe mich bei meinen Weblinks auch für diese entschieden), lade ich die Webseitenvorschau per Hand hoch. Dafür benötige ich ein Feld für die Screenshots - ein Upload-Image
- Für die eigentliche verlinkte Website braucht's natürlich ein Link-Feld
- Damit ich die Sprache der verlinkten Seite angeben kann, benötige ich ein JForm-Medien Feld
- Da die Weblinks in Kategorien abgelegt sind, brauche ich noch ein Article Category id - Dieses Feld nehme ich auch aus den bereits fertigen Feldern, die sich beim Joomla-Article finden
- Da ich einige Webkinks besonders empfehlen möchte, habe ich mir eine Checkbox ins Backend gelegt.
Article Title und Article Category id sind fertige Felder, die ich einfach in meiner Adminform übernehmen kann.
Für die Webseitenvorschaubilder (Image-Upload) lege ich die Bilder gesammelt in "images/weblinks". Ordner/Inhalt und Ordner/Benutzer setze ich jeweils auf "Nein". Vorschaubild 1 setze ich auf 150x150px und Vorschaubilld 2 auf 800x600px. Damit kann ich das Kleine bei den Weblinks ausgeben und das Große erscheint, wenn ich auf das Kleine klicke.
Beim Link-Feld wird als Standard Ziel "Leere" eingetragen. Wobei das eigentlich "_blank" heißen sollte. Damit öffnet sich ein neuer Tab im Browser. Unter Zeige Text wird "Anzeigen" und "Titel" ausgewählt/eingetragen. Ziel und Klasse benötige ich nicht. Aber ich gebe als Standard Klasse "weblink" mit, falls ich die Links anschließend individuell formatieren möchte. Den Rest lasse ich so stehen.
Um die Sprache der verlinkten Webseite anzuzeigen, wähle ich ein Medien-Feld aus. Da die meisten Seiten in deutscher Sprache sind, gebe ich als Standard Wert die deutsche Flagge vor: images/deutsch.gif
Für die "Besondere Empfehlung" habe ich mich für eine Checkbox entschieden. In den Optionen gebe ich diese Zeile ein:
images/weblinks/empfehlung.png. Setzt natürlich voraus, dass unter dem angegebenen Pfad eine Grafik liegt, die die Empfehlung entsprechend kennzeichnet.
Das schöne ist, das im Backend wirklich nur die Checkbox mit dem Text im Bezeichnungsfeld angezeigt wird, aber der Link zur Grafik abgespeichert wird, wenn man die Checkbox aktiviert.
Speicherung aller Felder, bis auf die beiden vorhandenen aus den Artikeln, Benutzerdefiniert und unter introtext.
Wir benötigen nur die AdminForm. Eine Form für die Ausgabe wird an dieser Stelle nicht benötigt, da die Weblinks nach Kategorien sortiert sind. Wobei es bei mir eine entsprechende Menüführung zu den einzelnen Kategorien gibt.
Somit benötige ich eine Liste und wechsele in Listen & Suchtypen. Neben dem vorgegebenen CCK gebe ich als zusätzliches Feld die Article Category id im Such-Formular an.
Auf eine Sortierung verzichte ich und gehe direkt zur Liste.
In Spalte 1 setze ich die Landesflagge der Sprache der Webseite und darunter die Besondere Empfehlung, sofern vorhanden. In Spalte 2 erscheint der Link zur Webseite und in Spalte 3 ein kleiner Text zur verlinkten Seite. In Spalte 4 schließlich wird die Screen-Vorschau abgebildet. Der Screenshot muss über die Typographie (Nummer 2) als Bild gekennzeichnet werden. Klicken Sie auf das kleine "+" und wählen als Standard anzeigen "Vorschaubild 1" aus. Die Typografie müssen Sie auch bei der "Landesflagge" und den "Besonderen Empfehlungen" einstellen.
Variante 2 - Mit automatisierten Vorschaubildern
Es gibt einige Dienste im Internet, die automatisierte Vorschaubilder von Webseiten anbieten. Die allermeisten kosten Geld und machen bei professionell geführten Webseiten auch unbedingt Sinn, da einiges an Performance erzeugt wird. Insbeondere wenn man selber viele Weblinks hat. Einen Anbieter habe ich gefunden, der seine Dienste kostenlos anbietet:
https://thumbsniper.com/index.php
Die Website, von der ein Screenshot, ein Thumbnail, erstellt werden soll, wird folgendermaßen übegeben:
http://api.thumbsniper.com/v3/thumbnail/150/blur2/?url=http://www.time4joomla.de
Es wird mitgeteilt, das ein Screenshot in einer Breite von 150 mit dem Effekt "blur2" zu der angegebenen URL (im Beispiel meine Site) erstellt werden soll.
Diese URL können wir automatisch zusammenstellen lassen und in unserer Datenbank so abspeichern, dass die URL bei den Weblinks automatisch aufgerufen wird und dann ein Screenshot angezeigt wird.
Dazu wechseln Sie in den Formular & Inhaltstyp Ihrer Weblinks und tauschen das Screenshot-Feld (Upload-Image) gegen ein neues, einfaches Textfeld aus. Wir erzeugen nun den Link zum Vorschaubild. Ganz unten, unter der "Speicherung" finden Sie zwei orangene Pfeile nach unten. Dort bitte draufklicken. Es öffnet sich nun unten eine Eingabemöglichkeit für Javascript, wo Sie bitte diesen Code eintragen:
{chilicode}var link = document.getElementById("website");
var screen = document.getElementById("wl_empfehlungsbild");
screen.value = "http://api.thumbsniper.com/v3/thumbnail/150/blur2/?url=" + link.value;{/chilicode}
Im Aliasnamen "website" steht unser Link zur verlinkten Website (wobei das bei Ihnen namentlich abweichen kann). Den speichere ich in die Variable link. screen ist das Feld, in dem Sie gerade diesen Code eingeben. Damit Sie aber den Inhalt dieses Feldes - also das, was letztlich abgespeichert werden soll - einwandfrei ansprechen können, müssen Sie den Umweg über die Zeile mit dem document.getElementById gehen. Am Ende übergeben Sie dann einen zusammengesetzten Wert aus dem ersten Teil der URL des Dienstes für die automatischen Screenshots und der eigentlichen Site, von dem der Screenshot erstellt werden soll und der im Linkfeld steht.
Das ist sehr hübsch, hat aber leider drei Nachteile:
- Sie müssen warten, bis der Screenshot erstellt worden ist. Das kann wenige Sekunden oder auch ein paar Minuten dauern. Ich vermute es hängt von der Auslastung des Servers des Dienstes zusammen. Solange erhalten Sie ein "Wartebild" mit einer Zielscheibe im Screenshot als Thumbnail.
- Einmal "fotografiert" liegt es im Archiv des Dienstes. Leider aber damit auch veraltete Screenshots. Von meiner Site habe ich noch keinen aktualisierten Screenshot ausmachen können. Ich weiß nicht, wie lange das dauert.
- Sie können nicht auf das Thumbnail klicken und eine größere Ansicht modal bekommen. Denn es gibt nur diese eine kleine automatisierte Thumbnail.
Dennoch finde ich aber, dass es eine hübsche Spielerei ist. Vielleicht findet ja jemand von Ihnen eine Möglichkeit den Code so zu verifizieren, dass automatisch gewartet wird, bis die Thumbnails fertig sind. Denn andernfalls müssen Sie einige Male die Site neu laden. Ich freue mich über Feedback und nehme das gern hier auf!
So siehts dann aus...