Wordpress-Blog um Retina erweitern

WordPress-Blog um Retina erweitern

Man mag es kaum für möglich halten, ist es doch tatsächlich vollkommen einfach, die Grafiken in einem WordPress-Blog zusätzlich für Retina- und hochauflösende Displays zur Verfügung zu stellen. So wird dann vollkommen automatisch entschieden, je nachdem welches Display gerade im Einsatz ist, welche Grafik geladen wird; die normale oder die fürs Retina-Display.

Wer das testen bzw. überprüfen möchte, hat unmittelbar hier darüber im Headerbild die Möglichkeit: Retina-Displays wird zusätzlich eine Lupe angezeigt; normalen Displays hingegen nicht.

Was ist das besondere an Retina bzw. High-Resolution-Displays?

Woran kann man High-Resolution-Displays erkennen? Die Antwort darauf ist relativ simpel. Bei diesen Displays ist die Pixeldichte wesentlich höher, sodass sich deutlich detailreichere Bilder darstellen lassen. Die sonst deutlich erkennbare Unschärfe verschwindet, die Darstellung ist schlichtweg knackescharf.

Technische Umsetzung der Retina-Unterstützung für WP-Blogs

Zuerst wird das dazu notwendige Script herunter geladen und die Datei retina.js in das Verzeichnis /scripts direkt in eurem Hauptverzeichnis kopieren. Sollte es das dort nicht geben, so ist dieses einfach neu zu erstellen.

Als nächstes sucht ihr in eurem Theme die .php Datei, die den schließenden </body> Tag enthält. Bei mir ist dieser in der footer.php; bei euch kann das durchaus auch woanders sein; einfach mal danach suchen.

Habt ihr die passende Stelle gefunden, kopiert ihr den nachfolgenden Code-Schnipsel unmittelbar oberhalb dazu.

<script type="text/javascript" src="/scripts/retina.js"></script>

Ist das erledigt, so ist der schwierigste Teil auch schon geschafft.

Ab sofort braucht ihr nur noch alle eure Bilder in doppelter Ausführung zu erstellen. Ein Bild für die normale Auflösung, bei mir ist das 777 x 437 Pixel für die Bilder in Artikeln in voller Breite und das gleiche Bild ein zweites Mal in doppelter Auflösung, somit 1554 x 746 Pixel.

Das Bild in normaler Ausführung benennt ihr beispielsweise my_image.jpg und das Bild zur Darstellung für Retina- und hochauflösende Displays in doppelter Auflösung, da wird einfach hinten an @2x gestellt, also my_image@2x.jpg.

Ihr verwendet auch euren ganz normalen Code weiterhin zum Einfügen der Grafiken, hier ein Beispiel:

<img src="/images/my_image.png" alt="" title="" />

Die eben eingebaute Funktion erkennt ab jetzt automatisch, welche Grafik geladen werden soll. Wichtig ist, dass die Retina-Grafik im selben Verzeichnis liegt, wie die Grafik, für die normale Display-Auflösung.

Das war auch schon alles und viel Erfolg beim Einbau!

Jetzt bist du gefragt!

Gefällt dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

8 Kommentare

  1. Danke für den Tipp. Hast du schon nen Statistikauszug wieviele User bei dir mit dem neuen MacBook unterwegs sind? Auch wenn es ein neues Gerät das nun kann, wenn es nur 0,3% meiner User sind., dann braucht man den Extraaufwand nicht betreiben. Ich rede nicht vom einmaligen Anlegen, sondern eben bei jedem Artikel.

    Antworten
  2. Wesentlich eleganter ist es native WordPress Funktionen zu nutzen um alternative Skripte einzubinden und das ganze innerhalb seines Themes zu platzieren.

    Function Reference/wp enqueue script

    Antworten
  3. Das wird hier wohl gefressen. Neuer Versuch:

    [code]
    /**
    * load retina.js
    *
    * @use wp_enqueue_script( $handle ,$src ,$deps ,$ver ,$in_footer );
    * @see http://codex.wordpress.org/Function_Reference/wp_enqueue_script
    */
    function load_retina_js() {
    wp_register_script(
    ‚retina‘
    ,bloginfo(‚template_url‘).’/scripts/retina.js’__FILE__)
    ,false
    ,’1.0′
    ,true
    );

    wp_enqueue_script(‚retina‘);
    }
    add_action(‚init‘, ‚load_retina_js‘);
    [/code]

    Antworten
  4. Vielleicht kannst du das mal mergen? Die Kommentare sind ja noch in der Moderation…

    Hier ein Beispiel das man auch lesen kann:

    Antworten
    • Vielen Dank.
      Hab schon angepasst, passt das jetzt so?

      Antworten
      • Ich denle das es in einem Kommentar besser aufgehoben ist weil die anderen ja nur aus Unwissenheit entstanden sind. Mir ist es gleich die Infos und somit das was ich sagen wollte sind ja da… :)

      • Wenn ich deine Tipps verstanden habe – aktuell tue ich das noch nicht – dann packe ich das schon oben als Update mit rein. :)

  5. Eigentlich ist es ganz einfach.

    Man legt die retina.js Datei irgendwo innerhalb seines Theme Folder ab. Dann nimmt man das PHP Snippet und passt in der wp_register_script() Funktion den Parameter $src so an das er auf das File zeigt.

    bloginfo(‚template_url‘).’/scripts/retina.js’__FILE__) wird intern zu

    Das PHP kommt dann in die functions.php.

    Ein interessanter Parameter in der o.g. Funktion ist dieser hier: $in_footer. Mit ihm kann ich Steuern wo das Script eingebunden werden soll. Nämlich im Header oder Footer.

    Hierzu ist es allerdings wichtig das die Funktionen wp_head(); und wp_footer(); vorhanden sind. Denn das sind die Handler die wp enqueue script benötigt um die Files in den Quelltext zu schreiben.

    Antworten

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Related Articles

Wie das Twitter App-Icon: BlueBird zurückerhalten?

Wie das Twitter App-Icon: BlueBird zurückerhalten?

Das X als neues Twitter-Logo ist derzeit noch recht umstritten. Dem einen gefällt es, andere hätten lieber das bisherige und bekannte Vögelchen als Twitter-Logo für die Twitter App behalten – würden es gern zurückbekommen. Meine Meinung dazu ist noch unschlüssig....