Man möge es kaum für möglich halten aber es ist tatsächlich vollkommen simpel, die Grafiken auf dem Blog zusätzlich in Retina Auflösung zur Verfügung zu stellen. So wird vollkommen automatisch an Hand des Displays entschieden, welche Grafik geladen wird.
Wer das vorher testen möchte; ich habe dafür eine Retina-Test-Seite erstellt, die das sehr anschaulich darstellt. Wem das jetzt gefällt oder wer das schon immer mal umsetzen wollte, hier nun die von mir verwendete Lösung.
Bevor es jetzt mit der Anleitung so richtig los geht, vielen Dank an @nifoc_ auf Twitter, der mich durch einen Tipp auf die richtige Spur brachte.
Als erstes downloaded ihr euch von dieser Seite das Script und kopiert die Datei retina.js in das Verzeichnis scripts direkt in eurem Hauptverzeichnis. Sollte es das dort nicht geben, so legt ihr es zuvor einfach an.
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 direkt darüber.
<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 950 x 633 px für die Artikel und das gleiche Bild ein zweites Mal in doppelter Auflösung, also 1900 x 1266 px.
Das Bild in normaler Ausführung benennt ihr beispielsweise my_image.png und das Bild in doppelter Auflösung, da fügt ihr einfach ein @2x an, also my_image@2x.png.
Ihr verwendet auch euren ganz normalen Code weiterhin zum Einfügen der Grafiken, hier ein Beispiel:
<img src="/images/my_image.png" />
Die eben eingebaute Funktion erkennt ab jetzt automatisch, welche Grafik geladen werden soll.
Das war auch schon alles. Viel Erfolg beim Einbau.
Eure Fragen und Meinungen wie immer gern in den Kommentaren.
Guter Tipp, danke dafür!
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.
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
Das wird hier wohl gefressen. Neuer Versuch:
/** * 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');Vielleicht kannst du das mal mergen? Die Kommentare sind ja noch in der Moderation…
Hier ein Beispiel das man auch lesen kann: http://snipt.org/vvk7
Vielen Dank.
Hab schon angepasst, passt das jetzt so?
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.
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 http://example.com.de/wp-content/themes/myTheme/skripts/retina.js
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.
Guter Artikel diesbezüglich: http://wp.tutsplus.com/tutorials/the-ins-and-outs-of-the-enqueue-script-for-wordpress-themes-and-plugins/
Ich finde das manuelle Pflegen von zwei Bildern und ist ein No Go.
Es gibt für WordPress 3.5 ein offenes Ticket für den Media Uploader, so dass er wohl in 3.5 oder 3.6, selbst mit Retina Bildern umgehen kann.
Ansonsten werfe ich mal das von mir bisher auch nicht getestete WP Retina 2x in den Raum.
Pingback: Retina Test Post
WordPress-Blog um Retina erweitern http://t.co/85pAoppr