wake-up-neo.com

Erstelle WordPress Größe und benenne Bilder für Retina.js

Ich bin ein großer Fan der Art und Weise, wie retina.js für Displays mit hoher Pixeldichte funktioniert. Im Wesentlichen wird beim Laden von Bild-Assets (über <img> oder CSS-Bild) überprüft, ob eine @2x-Endung des Bilds vorhanden ist (z. B. wenn ein logo.jpg vorhanden ist, wird der [email protected] automatisch an seiner Stelle angezeigt, sofern vorhanden.

Mit der WordPress-Funktion the_post_thumbnail kann ich verschiedene Bildgrößen definieren, aber ich möchte wissen, ob es eine Möglichkeit gibt, Versionen der Bilder zu erstellen, die doppelt so groß sind wie die mit dem Suffix @2x!

Es ist einfach, dies für Themendateien zu tun, aber es wäre ziemlich großartig, dies auch für Inhaltsbilder zuzulassen.

2
ArleyM

Überprüfen Sie dieses Wordpress-Plugin

Wp Retina 2X

1
Ravinder Kumar

Ok, hier ist mein Rat.

Erstellen Sie einfach die Kopien von Bildern in doppelter Größe mit den nativen Medieneinstellungen von WordPress. Fügen Sie dann den folgenden Code in Ihre Vorlagen ein.

<?php $normal = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'thumbnail');
$retina = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'medium' ); ?>

<img src="<?php echo $normal[0]; ?>" data-at2x="<?php echo $retina[0]; ?> alt="<?php the_title(); ?>" width="xxx" height="xxx"/>

Hier ist meine Miniaturbildgröße (normal) 300x300px und die mittlere Miniaturbildgröße (Retina) 600x600px. Und vergessen Sie auch nicht, retina.js zu laden, da sonst data-at2x = nicht funktioniert. Viel Glück!

0
wp student