Problemlose responsive Bilder für WordPress

Letztes Update: Das Plugin wurde in den WordPress-Kern integriert. Wenn Sie also WordPress 4.4 oder neuer verwenden, haben Sie dies automatisch.

Update: Das in diesem Artikel erstellte Plugin wurde hierher verschoben und verwendet nun das passendere srcset-Attribut. Es ist das offizielle WordPress-Plugin der Responsive Images Community Group und wird vom WordPress Core Team unterstützt. Es ist wahrscheinlich, dass es irgendwann in den WordPress-Kern aufgenommen wird. Ziemlich cool!

Der folgende Beitrag wurde gemeinsam von Tim Evko (@tevko) verfasst. WordPress verfügt über ein integriertes System zum Hochladen von Medien. Wenn Sie ein Bild hochladen, werden automatisch verschiedene Versionen davon erstellt und gespeichert. Tim zeigt uns, wie wir diese Fähigkeit anpassen und nutzen können, um responsive Bilder in Inhalten zu unterstützen.

Wenn Sie wie ich sind und die Aufgabe haben, eine responsive Website zu erstellen, die relativ einfach zu aktualisieren ist, ist WordPress meistens das CMS, auf dem Sie diese Website erstellen werden. Wenn Sie mehr wie ich sind, haben Sie wahrscheinlich eine Lösung für responsive Bilder übersprungen, um es demjenigen, der die Updates durchführt, leichter zu machen. Glücklicherweise können Sie jetzt mit ein paar Zeilen PHP und etwas JavaScript automatische responsive Bildfunktionalität zu Ihrer WordPress-Website hinzufügen.

Hier zeige ich Ihnen, wie Sie Ihrer WordPress-Website Unterstützung für responsive Bilder in Form von einem kleinen WordPress-Plugin hinzufügen können.

Der Markup, den wir letztendlich wollen

Wir verwenden hier die Picturefill-Bibliothek. Vorerst verwenden wir den Markup, den diese Bibliothek vorschlägt und der eng dem ähnelt, was das <picture>-Element bald sein wird.

<picture>
  <source srcset="examples/images/extralarge.jpg" media="(min-width: 1000px)">
  <source srcset="examples/images/large.jpg" media="(min-width: 800px)">
  <source srcset="examples/images/medium.jpg">
 
  <!-- fallback -->
  <img srcset="examples/images/medium.jpg" alt="alt text">
</picture>

Dies ist das grundlegende Markup-Muster, obwohl es etwas komplexer werden kann, um einige Browser-Bugs zu beheben.

Was wir nicht tun werden, ist, diesen Markup direkt in Blogbeiträgen zu verwenden. Wir werden WordPress bitten, uns dabei zu helfen.

Das Theme

Alles, was Sie in Ihrem Theme tun müssen, ist sicherzustellen, dass diese Einzeiler-Zeile in seiner functions.php-Datei vorhanden ist.

add_theme_support('post-thumbnails');

Dies stellt sicher, dass Ihr Theme WordPress die Erlaubnis gibt, die hochgeladenen Bilder zu vergrößern/verkleinern. Ohne sie funktioniert das Plugin nicht.

Das Plugin

Dies ist sinnvoll als WordPress-Plugin, da wir es aktiv halten wollen, unabhängig davon, welches Theme aktiv ist. Wir können es als Ordner mit einer PHP-Datei darin erstellen, um den Plugin-Code selbst zu sein, und eine Kopie der Picturefill-Bibliothek.

Hinzufügen der Bibliothek

Verantwortungsvolles Einreihen

function get_picturefill() {
  wp_enqueue_script('picturefill', plugins_url( '/js/picturefill.js', __FILE__ ));
}
add_action('init', 'get_picturefill');

Dies stellt sicher, dass WordPress diese JavaScript-Bibliothek im Frontend lädt.

Größen definieren

Teilen Sie WordPress mit, welche Bildgrößen beim Hochladen erstellt werden sollen.

add_image_size('large-img', 1000, 702);
add_image_size('medium-img', 700, 372);
add_image_size('small-img', 300, 200);

Sie können dies so einrichten, wie Sie möchten. add_image_size hat eine Vielzahl von Parametern, die Sie anpassen können. Im Fall eines 1024×768 Bunny Rabbit JPG, das ich hochgeladen habe, werden viele Versionen erstellt.

Erstellung eines [Shortcodes]

Erweitern wir dieses Plugin und geben ihm echte Funktionalität, indem wir einen Shortcode für responsive Bilder erstellen. So können wir ihn direkt in den Beitragstext einfügen.

[responsive imageid="12" size1="0" size2="500" size3="1000"]

und er gibt den Markup aus, den wir für Picturefill benötigen.

Wir teilen dies in drei Funktionen auf. Eine, um den Shortcode und den auszugebenden HTML-Code zu definieren, eine Hilfsfunktion, um den Alternativtext zurückzugeben, und eine, die speziell zum Durchlaufen und Ausgeben der Bildquellen dient.

function tevkori_get_img_alt( $image ) {
    $img_alt = trim( strip_tags( get_post_meta( $image, '_wp_attachment_image_alt', true ) ) );
    return $img_alt;
}

function tevkori_get_picture_srcs( $image, $mappings ) {
    $arr = array();
    foreach ( $mappings as $size => $type ) {
        $image_src = wp_get_attachment_image_src( $image, $type );
        $arr[] = '<source srcset="'. $image_src[0] . '" media="(min-width: '. $size .'px)">';
    }
    return implode( array_reverse ( $arr ) );
}

function tevkori_responsive_shortcode( $atts ) {
    extract( shortcode_atts( array(
        'imageid'    => 1,
        // You can add more sizes for your shortcodes here
        'size1' => 0,
        'size2' => 600,
        'size3' => 1000,
    ), $atts ) );

    $mappings = array(
        $size1 => 'small-img',
        $size2 => 'medium-img',
        $size3 => 'large-img'
    );

   return
        '<picture>
            <!--[if IE 9]><video style="display: none;"><![endif]-->'
            . tevkori_get_picture_srcs( $imageid, $mappings ) .
            '<!--[if IE 9]></video><![endif]-->
            <img srcset="' . wp_get_attachment_image_src( $imageid[0] ) . '" alt="' . tevkori_get_img_alt( $imageid ) . '">
            <noscript>' . wp_get_attachment_image( $imageid, $mappings[0] ) . ' </noscript>
        </picture>';
}

Dann aktivieren Sie den Shortcode.

add_shortcode( 'responsive', 'tevkori_responsive_shortcode' );

Idealerweise definieren Sie Ihre Breakpoints hier im Plugin und übergeben sie dann überhaupt nicht, wenn Sie den Shortcode verwenden, wie z. B.:

[responsive imageid="12"]

Verwenden Sie dann die Shortcode-Attribute nur in den seltenen Fällen, in denen Sie die Breakpoints überschreiben müssen.

Ändern der Ausgabe des Media-Uploaders

Dieser Shortcode wird von unschätzbarem Wert sein (denken Sie daran, dass wir den Markup in Zukunft programmatisch an das korrekte <picture> anpassen können). Aber woher wissen wir, welche Bild-ID wir verwenden sollen? Die Benutzeroberfläche des Media-Uploaders stellt diese Information nicht zur Verfügung. Sie kennt diese ID jedoch, und mit einem einfachen Filter können wir ändern, was an den Editor gesendet wird.

function responsive_insert_image($html, $id, $caption, $title, $align, $url) {
  return "[responsive imageid='$id' size1='0' size2='600' size3='1000']";
}
add_filter('image_send_to_editor', 'responsive_insert_image', 10, 9);

Nun funktioniert die Auswahl und das Einfügen eines Bildes aus dem Editor so:

Das war's! Hier können Sie sehen, wie es funktioniert.

Mehr, was Sie tun können

• Wenn Sie eine breitere Unterstützung wünschen, sollten Sie auch Matchmedia.js installieren. Es lässt @media-Abfragen auch in älteren Browsern funktionieren, was dann automatisch Picturefill funktionieren lässt.
• Anstatt Shortcodes zu verwenden oder die Ausgabe des Media-Uploaders zu ändern, könnten Sie dies mit einem speziellen Bildfeld über Advanced Custom Fields realisieren.
• Sie könnten den Markup so anpassen, dass align-* wie bei WordPress möglich ist. Oder mit <figure> und <figcaption>-Elementen. Auch Alt-Tags.
• Sie könnten die Einstellungen für die Breakpoints über eine Benutzeroberfläche einstellbar machen, die das Plugin erstellt, anstatt sie fest im Plugin zu kodieren.
• Hier ist ein alternativer Ansatz, der Picturefill 2 verwendet und keine Shortcodes.

Hier ist das GitHub-Repo, wenn Sie beitragen möchten.