Responsive Images - <picture>, srcset & Co.

    Hallo,

    ich würde gerne Bilder austauschen, abhängig von der Viewportgröße. Ich lege also für das jeweilige Bild 3 verschiedene Größen (large, medium, small) an. Im Grunde möchte ich in einem eigens angelegtenen Custom Post Type Beitrag jeweils nur das Large-Bild einfügen und die anderen beiden Bildversionen sollen im Hintergrund per source-Attribut automatisch hinzugefügt werden. Das einfügen von Bildern sieht im Quelltext momentan so aus:

    Code
    <figure>
  <picture>
    <img src="examples/images/large.jpg" alt="alt text">
  </picture>
</figure>

    und so soll es aussehen:

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

    Kann mir jemand helfen, was müsste ich in die functions Datei reinschreiben, damit das funktioniert? Das Ganze soll ohne irgendein Plugin auskommen.

    • Gerade eben
    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

    Um unnötige Ladezeitverzögerungen zu vermeiden, würde ich den Code bereits beim Einfügen der Bilder im Editor ändern:

    Code
    add_filter( 'image_send_to_editor', 'mmx_modify_img_data', 30, 8 );
function mmx_modify_img_data ( $html, $id, $caption, $title, $align, $url, $size, $alt ) {
	/* 
		bearbeite $html und baue $new_html 
	*/
	return $new_html;
}

    http://de.wpseek.com/hook/image_send_to_editor/

    WordPress ist "frei" wie in Freiheit es zu nutzen, aber nicht im Sinne von Freibier. Wer also glaubt man bekommt rund um WordPress alles kostenlos, der irrt. Hilfe ist ein Geschenk für das man sich bedankt, dafür gibt es den 'Gefällt mir' Button. Wer das nicht kann und sich selbst nicht zu helfen weiss, muss sich bezahlte Unterstützung suchen.

    Zitat von Scorcho

    Hi, was meinst du mit deinem Post? Steh etwas auf dem Schlauch ...

    Du hast eine Frage gestellt und ich habe Dir eine Lösung gepostet.

    WordPress ist "frei" wie in Freiheit es zu nutzen, aber nicht im Sinne von Freibier. Wer also glaubt man bekommt rund um WordPress alles kostenlos, der irrt. Hilfe ist ein Geschenk für das man sich bedankt, dafür gibt es den 'Gefällt mir' Button. Wer das nicht kann und sich selbst nicht zu helfen weiss, muss sich bezahlte Unterstützung suchen.

    Lies nochmal den letzten Satz Deiner Eingangsfrage. Daraufhin habe ich Dir geantwortet. Jetzt hast Du einen Code für die functions.php auf dem Du aufbauen kannst um Deinen Wunsch umzusetzen. Wenn das nicht reicht, kann ich hier im Forum leider nicht mehr für Dich tun.

    WordPress ist "frei" wie in Freiheit es zu nutzen, aber nicht im Sinne von Freibier. Wer also glaubt man bekommt rund um WordPress alles kostenlos, der irrt. Hilfe ist ein Geschenk für das man sich bedankt, dafür gibt es den 'Gefällt mir' Button. Wer das nicht kann und sich selbst nicht zu helfen weiss, muss sich bezahlte Unterstützung suchen.

    Du kommst sehr einfach an die unterschiedlichen Uris der Bilder:

    PHP
    $large_image_url = wp_get_attachment_image_src(get_post_thumbnail_id(), 'full');
$url = $large_image_url[0];

    Damit liest Du nacheinander alle erforderlichen Größen aus, und bastelst Dir einen figure tag. Das ist kein großes Ding.

    ABER:

    vergiss es besser - zumindest vorerst.

    Du versuchst etwas zu implementieren, was zwar seit langem im W3C im Gespräch ist, aber noch lange nicht verbindlich verabschiedet wurde. Die Browserunterstützung ist eher als "experimentell" anzusehen. Ich habe mit genau diesem Ansinnen bei TYPO3 6 Monate verdampft. Am Ende hat's geklappt - abgesehen von den Browsern.

    WP scheint mir übrigens auch völlig ungeeignet für diesen Ansatz. Dazu benötigst Du ein CMS mit einem Digital Assets Management. Dies erlaubt dann natürlich auch die Mehrfachnutzung einzelner Assets.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden