Wordpress-Blog mit Thumbnails


Ein schöner und bewährter Weg, um Informationen ansehnlich aufzubereiten, sind Bilder. Doch wenn man zu viele davon hat, zieht es die Ladezeit einer Homepage schnell wie Kaugummi in die Länge. Erst recht, wenn man keine Thumbnails verwendet, sondern die Bilder in voller Größe einfach nur mit Angabe von width– und height-Attribut des HTML img-Tags skaliert.

Klingt nun nach einer ziemlich kruden Lösung, aber ich muss gestehen, dass ich bis gerade auch noch so gearbeitet habe! Grund dafür ist die doch eher mangelhafte Thumbnail-Funktion von WordPress. Sicherlich kann mir das CMS/Blogsystem automatisch kleine Vorschaubildchen in unzähligen Formaten generieren. Doch woher soll ich nun wissen, wie die Thumbnail-Datei zu dem großen Bild meines Blogeintrags heißt? Auch dass nicht automatisch das erste Bild meines Artikels als Post-Image verwendet wird, ist nicht gerade das gelbe vom Ei. Dies konnte ich vor längerer Zeit aber schon mit einem kleinen Trick lösen.

Nun wollte ich – zu Gunsten der Ladezeiten – auch mal dafür sorgen, dass für die Vorschau eines Artikels ein verkleinertes Bild erzeugt wird. Unter den offiziellen Plugins von WordPress bin ich leider nicht fündig geworden. Doch etwas Recherche brachte mich bei Webdemar auf TimThumb!

Dieses kleine PHP-Script erlaubt es mir, beliebige Thumbnails für meine Bilder zu erstellen. Dabei kann ich Größe, Qualität, ob beschnitten werden soll, oder nicht und wo das Beschneiden ausgerichtet wird angeben. Natürlich werden die erstellen Thumbnails gecached, so dass auch wieder ein Geschwindigkeitsvorteil entsteht, weil die Bilder nicht bei jedem Aufruf generiert werden müssen.
Auf die Details in der Handhabung gehe ich nun nicht weiter ein, da bieten Webdemar, die Projektseite bei Google und der BinaryMoon-Blog genug Infos.

Ich für meinen Teil bin begeistert, nun muss ich nur noch Gravatars in mein Theme einbinden, und meine ToDo-Liste ist erstmal abgearbeitet!

http://code.google.com/p/timthumb/
http://www.binarymoon.co.uk/category/web-design/timthumb/

Advertisements

Wie man eine Domain vernünftig umzieht

Ich spreche nun nicht davon, wie man einen Address-Anbieter wechselt, oder einfach nur anderen Webspace hinter der Domain nimmt. Nein, ich meine wirklich den Umzug von einer Top-Level-Domain, auf eine andere. In meinem Fall habe ich – nach diversen Problemen mit dot.tk – zusätzlich zu NecroSlaughter.tk nun auch NecroSlaughter.de.
Doch da ich den Namen NecroSlaughter.tk bereits seit gut sieben Jahren pflege, wollte ich nicht einfach alle Links auf diese Adresse und deren Unterseiten ungültig machen. Ich musste irgendwie sowohl Suchmaschinen wie auch den Leuten, die noch auf die alte .tk-Adresse verlinkt hatten, klarmachen, dass diese Adresse obsolet ist, und die Inhalte auf eine andere Domain umgezogen sind.
Glücklicherweise gibt es dafür einen HTTP-Statuscode („301 – Permanently Moved“) und die Möglichkeit mittels Apache mod_rewrite die Anfragen richtig umzulenken.

Dafür trägt man einfach in die .htaccess-Datei im Hauptverzeichnis der Webseite folgendes ein:



RewriteEngine On

Options +SymLinksIfOwnerMatch
RewriteCond %{HTTP_HOST} ^example.tk
RewriteRule (.*) http://example.de/$1 [R=301,L]


Dadurch werden alle Anfragen von example.tk auf example.de umgebogen und gleichzeitig der HTTP-Status 301 an die Anfragestelle geschickt. Dadurch merkt z.B. auch Google, dass die Adresse geändert wurde, kann dadurch die Datenbank aktuallisieren und das Pageranking übernehmen. Auch Unterseiten richtig umgeleitet, z.B. example.tk/page-1 wird nach example.de/page-1 übersetzt.

Schnell, einfach und technisch auch sehr schön hat man nun seine Web-Adresse umgezogen. Ohne dass der Besucher irgendwelche Unannehmlichkeiten hat!

CSS-Selector-Gadget

Ein sehr nettes, kleines Tool bietet das Bookmarklet von selectorgadget.com/: Das kleine Lesezeichen erlaubt das Untersuchen und Markieren von Elementen auf einer Seite, um den kleinstmöglichen CSS-Selector-Pfad zu diesem Element zu ermitteln und zu kopieren.

Über das Firefox-Plugin Firebug kann man zwar auch den DOM-Pfad eines Elementes ermitteln, aber nicht so schön schnell markieren und kopieren. Außerdem ist das Bookmarklet browser-unabhängig und sollte in Firefox, Safari, IE 6/7 laufen, auch wenn im letzteren noch etwas buggy.

Was kann der Internet-Explorer?

Als Webentwickler ist man immer bedacht, dass die erstellten Lösungen auch in allen Browsern funktionieren. Die Zeiten von „Optimiert für Browser XYZ in Auflösung ZZZxYYYY“ sind eigentlich vorbei!

Doch immer wieder scheitert man an der Unfähigkeit oder der etwas wirren Interpretation bestimmter Browser! Welcher Browser mit welchen aktuellen und neuen Webtechnologien wie klarkommt, sieht man schick in der Übersicht von deveria.com. – Man sieht, das Microsoft-Produkt schneidet nicht sonderlich gut ab…

Meine WP-Plugins….

… für das NecroSlaughter-Webzine, denn hier in dem Blog habe ich bekanntlich in der freuen keine Plugin’s verwenden.

Da ich nun einen neuen Mitarbeiter an dem Magazin habe, aber gerne seine Artikel vor der Veröffentlichung nochmal gegenlesen würde, habe ich nach einem Plugin gesucht, das mich per eMail benachrichtigt, wenn mein Mitschreiber (Contributor) einen Artikel zur Revision einstellt. Nachdem ich im WordPress-Deutschland Forum den Hinweis auf Draft Notifier bekommen habe, dachte ich mir , ich könnte mit diesem Hinweis auch gleich alle meine Plugins hier mal auflisten:

  • Advanced Excerpt – Erlaubt es mir, die Länge des Artikelausschnitts und dessen Inhalte (u.a. HTML) selber zu bestimmen. Dies ist ganz praktisch, damit man in einer Auflistung von Artikel z.B. die CD-Cover zu den Kritiken sehen kann.
  • Akismet – Dank diesem Blog hier habe ich einem WP-API-Key und kann den recht brauchbaren Spam-Filter verwenden
  • Contact Form 7 – Ein einfaches und flexibeles System zur Erstellung von Kontakt-Formularen
  • Draft-Notifier – Ein Plugin, dass den Admin über einen neuen Artikel zur Revision benachrichtigt
  • Events Calendar – Ein recht umfangreicher Event-Kalender, der bei mir leider noch nicht aktiv im Einsatz ist… Ich muss noch schauen, wer den mit Dates befüllt…
  • Exec-PHP – Ein Plugin, das es erlaubt, PHP-Quelltext in Beiträgen ausführen zu lassen.
  • Headache With Pictures – Ein Notizzettel für das Dashboard, einsehbar und änderbar von allen Autoren. Sehr nett, um eine Notiz oder einen Kommentar für einen Kollegen zu hinterlassen!
  • Newsletter Plugin (de) – Auch in Zeiten von RSS immer noch sehr wichtig: Ein Newsletter-System, in dem sich Abonnenten selber ein- und austragen können.
  • Paged Comments – Ein Plugin für Kommentare über mehrere Seiten. Habe ich u.a. für mein Guestbook benötigt…
  • Page Link Manager – Mit dieser Erweiterung kann ich entscheiden, welche Seiten in der Sidebar sichtbar sind, und welche nicht.
  • Post LinksPost links erlaubt es auch einem HTML-Unerfahrenen Benutzer eine Reihe von Links zu einem Beitrag hinzuzufügen, die dann an einer im Template definierten Stelle erscheinen.
  • Profiler – Erlaubt das einbinden von Autoren-Profilen als Seiten
  • Related Posts – Zeigt dem Leser Beiträge mit ähnlichem Inhalt basierend auf den Tags des Artikels
  • Star Rating For Reviews – Ein starkes und einfaches System zur Vergabe von Bewertungen – also nicht zur Bewertung des Artikels selber, sondern z.B. der Besprochenen CD!
  • User Photo – Erlaubt meinen Schreibern das hochladen eigener Profilbilder, die dann auch im Profiler angezeigt werden.