Weblinks mit Thumbshots bzw. Thumbnails unter Joomla 1.7 und 2.5
Da Joomla 1.7/2.5 wie auch seine Vorgänger eine einfache Möglichkeit anbietet seine eigene Linksammlung der Allgemeinheit zur Verfügung zu stellen wollte ich diese ebenfalls nutzen.
Im Backend geht man dazu ein unter Komponenten auf den Untereintrag Weblinks und kann danach die entsprechenden Kategorien anlegen und die Weblinks eingeben. Über einen entsprechenden Menüeintrag, der eine bestimmte oder eine Übersicht aller Kategrien anzeigen könnte hat man den Inhalt auch relativ schnell auf der Seite.
So weit so gut aber nicht unbedingt soooo ansprechend.
Unter Joomla 1.5 hatte ich damals bei bretteleben.de eine einfach zu konfigurierende Komponente gefunden, die zu jedem so aufgeführten Link einen kleinen Thumbshot verschiedenster Dienstanbieter angezeigt kann. Leider ist diese Komponente noch nicht auf Joomla 1.7/2.5 umgeschrieben worden und da ich auch noch keinen guten Ersatz gefunden habe, musste ich mir etwas überlegen.
Da ich zum Anfang nur die einer bestimmten Kategorie zugehörenden Links über den Menüeintrag anzeigen wollte habe ich, um nicht in den Systemdateien von Joomla herumzufuschen, innerhalb meines eigenen Templates im dafür vorgesehenen Ordner "html" einen neuen Unterordner mit dem Namen "com_weblinks" und darunter einen weiteren mit Namen "category" angelegt.
Hierhin konnte ich danach die beiden Dateien "default_items.php" aus dem Verzeichnis
"/htdocs/components/com_weblinks/views/category/tmpl" kopieren um sie entsprechend meinen Vorstellungen anzupassen.
Vorher habe ich mich bei dem Anbieter thumbshots.com kostenfrei registriert um den entsprechenden Code zu erhalten, den man für das Anzeigen von Thumbshots auf einer Seite benötigt. Dies ist im Normalfall aber nicht unbedingt notwendig.
Folgendes habe ich danach in der "default_items.php" verändert/erweitert:
Veränderung in Zeile 75:
Original
<?php echo JText::_('COM_WEBLINKS_LINK'); ?>
Anpassung
<?php //echo JText::_('COM_WEBLINKS_LINK'); ?>
Erklärung
Standardmäßig wird vor jedem Link in der deutschen Variante das Wort "Weblink" angzeigt. Durch das Auskommentieren dieser Zeile passiert dies nun nicht mehr.
Erweiterung nach Zeile 97 (// open in a new window):
Erweiterung
echo '<a href="'. $link .'" target="_blank" class=". $menuclass ." rel="nofollow"><img class="weblink_thumbshot" src="http://open.thumbshots.org/image.aspx?url='. $item->url .'" alt="'. $item->url .'" /></a>';
Erklärung
Durch diesen Code wird noch einmal der jeweilige Weblink eingefügt, aber nicht wie in nachfolgender Zeile durch Anzeige der eingegebenen Bezeichnung, sondern durch Anzeige eines Bildes von thumbshots.org. Den img-Tag habe ich zusätzlich noch eine css-Klasse gegeben, um das angezeigte Bild im nachhinein noch anzupassen.
Erweiterung nach Zeile 104 (...'toolbar...</span>):
Erweiterung
echo "<a href=\"$link\" onclick=\"window.open(this.href, 'targetWindow', '".$attribs."'); return false;\"><img class=\"weblink_thumbshot\" src=\"http://open.thumbshots.org/image.aspx?url=\"". $item->url ."\" alt=\"". $item->url ."\" /></a>";
Erklärung
Siehe oben.
Erweiterung nach Zeile 110 (JHtml::_('behavior...):
Erweiterung
<a class="modal" href="/<?php echo $link;?>" rel="{handler: 'iframe', size: {x:<?php echo $this->escape($width);?>, y:<?php echo $this->escape($height);?>}}"><br /><?php echo '<img class="weblink_thumbshot" src="http://open.thumbshots.org/image.aspx?url='. $item->url .'" alt="'. $item->url .'" /></a>'; ?>
Erklärung
Siehe oben.
Erweiterung nach Zeile 116 (// open in parent window):
Erweiterung
echo '<a href="'. $link . '" class=". $menuclass ." rel="nofollow"><img class="weblink_thumbshot" src="http://open.thumbshots.org/image.aspx?url='. $item->url .'" alt="'. $item->url .'" /></a>';
Erklärung
Siehe oben.
Erweiterung nach Zeile 143 (<?php endforeach; ?> ):
Erweiterung
<tr><td colspan="2" class="weblink_activate"><a href="http://www.thumbshots.com" target="_blank" title="Thumbnails Screenshots by Thumbshots" >Thumbnail Screenshots by Thumbshots</a></td></tr>
Erklärung
Durch diese zusätzliche Tabellenzeile wird ein Backlink auf den Anbieter der Thumbshots gesetzt, der das ganze sozusagen aktiviert, da ansonsten die Anzeige irgendwann geblockt wird.
Danach konnte ich dann über die Optionen der Komponente, auf die ich hier nicht näher eingehe, und die css-Datei meines Templates die entsprechenden Anpassungen vornehmen die nötig waren, um das Aussehen nach meine Vorstellungen zu gestalten.
Damit man alles zusammen hat, habe ich die angepasste Datei und den css-Schnipsel der Anpassung hier als Download mit angefügt. Ich hoffe, dass darin nicht noch Fehler sind, die ich evtl. übersehen habe.
Update 23.10.11:
Ich habe aus den oben angeführten Code-Zeilen das Attribut "border=0" heraus genommen, da dies nicht den W3C-Richtlinien für HTML5 entspricht. Dieses Attibut stammte noch aus der Originaldatei von Joomla, wo ich ursprünglich nur Copy&Paste gemacht hatte. Der Download wurde ebenfalls aktuallisiert.
Update 17.02.12:
Nach einem manuellen update auf das neue Joomla 2.5.1 ist die hier beschriebene Funktionalität geblieben, so dass die Modifikationen auch in der neuen Version korrekt umgesetzt werden.