Auch Entwickler brauchen Platz zum Spielen

5. September 2012 /

Retina-Grafiken für Plugin-Seiten auf WordPress.org

Das Tutorial zeigt Vorgehensweisen, die Ausgabe von Retina-/HiDPI-optimierten Bildern auf WordPress.org Plugin-Seiten zu kontrollieren.
WordPress

Eins muss man den Entwicklern hinter WordPress.org mit Respekt lassen: Sie gehen im Rhythmus der Zeit und machen nahezu jeden Trend mit. Seit einiger Zeit stellen sie jedem Plugin-Entwickler die Möglichkeit bereit, Beschreibungsseiten der auf WordPress.org gehosteten Plugins mit hochauflösenden Bildern auszustatten. So wirken Grafiken auf HiDPI-Monitoren gestochen scharf.

Mögliche Bildanpassungen
Durch den Entwickler eines Plugins können Bilder an insgesamt zwei Stellen angepasst werden:

1. Teaser bzw. Banner auf der Beschreibungsseite
2. Bildaufnahmen der Anwendung im Bereich “Screenshots”

1. Plugin-Teaser
Seit ca. einem Jahr blendet WordPress.org benutzerdefinierte Teaser im oberen Bereich der Beschreibungsseite ein, die Plugin-Entwickler in vorgefertigter Form zur Verfügung stellen. Seit der Veröffentlichung des MacBook Pro Retina kann die Banner-Ausgabe um eine für solche Displays präparierte Grafik bereichert werden.

Für die Darstellung der Teaser gehört ein Ordner namens assets im Hauptverzeichnis des SVN-Baumes angelegt. Dort landen zwei Bilddateien mit einem festen Dateinamen (PNGs sind ebenfalls möglich), die WordPress.org je nach Nutzerauflösung präsentiert:

  1. banner-772×250.jpg für gewöhnliche Auflösungen
  2. banner-1544×500.jpg für hochauflösende Displays

2. Plugin-Screenshots
WordPress.org Pluginseiten erwarten Screenshots in einer maximalen Breite von 530 Pixel. Für die Retina-Unterstützung müssen Abbildungen einer WordPress-Anwendung in doppelter Größe angelegt werden. In unserem Fall würden einem Plugin alle Screenshots in einer Breite von 1060 Pixel und variablen Höher beiliegen. Die Webseite würde die Bildausgabe skalieren und für gewollte Schärfe sorgen.

Zur Erinnerung: Plugin-Screenshots liegen im Verzeichnis trunk und sind in readme.txt entsprechend referenziert.

Cachify-Teaser auf WordPress.org
Darstellungsoptimierung des Caching-Plugins Cachify auf WordPress.org

Fazit
Mit zunehmender Verbreitung der HiDPI-Monitore lohnt sich der einmalige Aufwand. Bei Screenshots sieht die Abwicklung komplizierter aus, da für die Erstellung von hochauflösenden Bildschirmaufnahmen ein HiDPI-Display vonnöten ist.

Sergej Müller

[Der Autor]Sergej Müller ist enthusiastischer Software Engineer mit Schwerpunkten Webentwicklung, Apps und WordPress. Seit 2007 programmiert und vertreibt er wpSEO, das zugkräftige SEO-Plugin für WordPress-Blogs.

Thematisch ähnliche Beiträge