Bilder in ein <figure>-Element aus dem Medien-Uploader einfügen

Für Ihre functions.php-Datei oder ein Funktionalitäts-Plugin

function html5_insert_image($html, $id, $caption, $title, $align, $url) {
  $html5 = "<figure id='post-$id media-$id' class='align-$align'>";
  $html5 .= "<img src='$url' alt='$title' />";
  if ($caption) {
    $html5 .= "<figcaption>$caption</figcaption>";
  }
  $html5 .= "</figure>";
  return $html5;
}
add_filter( 'image_send_to_editor', 'html5_insert_image', 10, 9 );

Es nimmt auch, was Sie als Bildunterschrift eingeben, und fügt es innerhalb des <figure>-Tags als <figcaption> ein. Beispiel für eingefügten Code

<figure id='post-18838 media-18838' class='align-none'>
  <img src='//youresite.com/wp-content/uploads/2012/10/image.png' alt='Title of image'>
  <figcaption>Caption for image</figcaption>
</figure>

Kommentare

Caspar Hübinger

# 19. November 2012

Das ist nett, aber es kann verbessert werden. :)

function html5_insert_image($html, $id, $caption, $title, $align, $url) {
  $src  = wp_get_attachment_image_src( $id, $size, false );
  $html5 = "<figure id='post-$id media-$id' class='align$align'>";
  $html5 .= "<img src='$src[0]' alt='$title' width='$src[1]' height='$src[2]' />";
  $html5 .= "</figure>";
  return $html5;
}
add_filter( 'image_send_to_editor', 'html5_insert_image', 10, 9 );

Beachten Sie, dass $url nicht die URL der Bildquelle enthält, sondern den Wert des Feldes „Link-URL“ aus dem Fenster „Medien hinzufügen“. Die URL der tatsächlichen Bildquelle über wp_get_attachment_image_src() und $id zu erhalten, wäre viel sicherer.

Ich persönlich würde auch den $caption-Teil vermasseln, was über den image_add_caption_shortcode-Filter erfolgen sollte. Aber die obige Funktion *könnte* eine Anweisung für optionale Links zu Bildern verwenden.

Antworten

Jeff Byrnes

Permalink zum Kommentar# 23. Juni 2013

@Caspar

Danke für diesen Hinweis; ich kann keine Dokumentation zum image_add_caption_shortcode-Filter finden. Hätten Sie vielleicht Lust, das zu erweitern oder mir Dokumentation dazu zu geben?

@Chris, vielen Dank, dass Sie das letztes Jahr gepostet haben; es hat mir bei einem Projekt wirklich den Hintern gerettet!

Karl

# 20. Dezember 2012

Verdammt, das scheint in WordPress 3.5 nicht zu funktionieren. Ich konnte nicht verstehen, warum niemand dieses Snippet aufgegriffen hat, das nicht funktionierte, aber ein schneller Wechsel zu einem lokalen Host, der 3.4 ausführt, zeigt, dass es einwandfrei funktionierte. Frage ist: Was hat sich geändert / kaputt gemacht?

Alles Gute, Karl

Antworten

Taylor McRae

# 2. März 2013

Dieses kleine Snippet gefällt mir wirklich gut! Ich habe es gerade bei meinem neuesten Build ausprobiert und es hat ohne Probleme funktioniert! Danke fürs Teilen Chris!

Antworten

Elie Herrera

# 17. September 2013

Funktioniert nicht auf 3.6.1
Gibt es Änderungen, um es an neue Versionen anzupassen?

Grüße

Antworten

Jeff Byrnes

Permalink zum Kommentar# 17. September 2013

Funktioniert bei mir auf einer 3.6.1-Installation einwandfrei.

Jovian

# 23. Oktober 2013

Ein Problem mit solchem benutzerdefinierten HTML-Code für Bilder
Wenn Sie versuchen, ein eingebettetes Bild aus einem Beitrag zu löschen, löscht wysiwyg nur ein <img/> (oder <a><img/></a>), hinterlässt aber <figure>"leer"</figure>.
Das ist wirklich sehr schlecht. Und ich muss eine Lösung finden… Jede Hilfe. Auch nur ein Hinweis in die richtige Richtung, wo ich suchen soll, wird geschätzt.

Antworten

John King

# 29. Oktober 2013

Hallo, vielen Dank für all die Hilfe bisher. Auf WP 3.7 hatte ich einige Schwierigkeiten mit dem bisherigen Code auf der Seite. Ich habe damit herumgespielt und verwende jetzt den folgenden Code, um schöne HTML-Figuren und Bildunterschriften auszugeben

function html5_insert_image($html, $id, $caption, $title, $align, $url, $size, $alt) {
  $src  = wp_get_attachment_image_src( $id, $size, false );
  $html5 = "<figure class='align$align'>";
  $html5 .= "<img src='$src[0]' alt='$alt' />";
  if ($caption) {
    $html5 .= "<figcaption>$caption</figcaption>";
  }
  $html5 .= "</figure>";
  return $html5;
}
add_filter( 'image_send_to_editor', 'html5_insert_image', 10, 9 );

Antworten

Mixa

# 13. Oktober 2014

Danke Leute, aber was mache ich, wenn manche Bilder Links zur Großansicht haben?

Antworten

Arnd

# 20. Oktober 2014

Danke für den Hack, aber Jovian hat Recht: Es funktioniert nicht mit TinyMCE. Daher ist es leider praktisch nutzlos – alles wird durcheinandergebracht, wenn der Endbenutzer versucht, Bilder zu löschen oder zu verschieben. :-(
Irgendwelche Ideen, irgendjemand…?

Antworten

Roman

Permalink zum Kommentar# 26. Oktober 2015

alter Beitrag, aber vielleicht hilft das jemandem
https://gist.github.com/zerosignalproductions/8325712

Tobias

# 28. Oktober 2015

Danke für den Code! Ich wollte auch responsive Bilder damit haben. Ich bin eigentlich kein Programmierer, aber so habe ich es zum Laufen gebracht, indem ich die ausgewählte Größe als Fallback verwende. Bitte lassen Sie mich wissen, wie das intelligenter geschrieben werden kann. Ich hatte Probleme, alle Arrays in einer Zeile zu haben, daher die mehreren Zeilen von ‚$html .=‘

function html5_insert_image($html, $id, $caption, $title, $align, $url, $size) {
    $src = wp_get_attachment_image_src( $id, $size, false );
    $srclarge = wp_get_attachment_image_src( $id, large, false );
    $srcmedium = wp_get_attachment_image_src( $id, medium, false );
    $srcsmall = wp_get_attachment_image_src( $id, thumbnail, false );
    $html5 = "<figure id='post-$id media-$id' class='align$align'>";
    $html5 .= "<img src='$src[0]' srcset='";
    $html5 .= "$srcsmall[0] 320w, ";
    $html5 .= "$srcmedium[0] 640w, ";
    $html5 .= "$srclarge[0] 1100w";
    $html5 .= "' alt='$title' />";
    $html5 .= "<figcaption>$caption</figcaption>";
    $html5 .= "</figure>";
    return $html5;
  }
  add_filter( 'image_send_to_editor', 'html5_insert_image', 10, 9 );

Antworten

Greg Ledger

# 7. Januar 2016

@ Tobias
Das ist sehr cool und funktioniert wie ein Zauber, aber…
Welche Codezeilen kann ich auskommentieren, um das srcset zu entfernen?

Antworten

Bane

# 23. April 2016

Wie füge ich den Filter auf einen bestimmten "Medien hinzufügen"-Button auf einem anderen Formular hinzu?

Antworten

Nick

# 24. August 2018

Wenn Sie möchten, dass das <figure>-Element entfernt wird (oder jedes andere übergeordnete Element, in das Sie Ihr Bild einpacken), wenn ein Benutzer das Foto löscht, hier ist ein kleines, raffiniertes TinyMCE-Plugin, das ich geschrieben habe und das Sie in WP integrieren können

tinymce.PluginManager.add( 'advanced_image', function( editor, url ) {
  editor.on('NodeChange', function (e) { // check everytime a node is changed
    var text = editor.getBody(); // grab editor content
    var $images = $(text).find('figure'); // grab all figure elements (images)

    $images.each(function() { // loop through each found figure (image)
      if(!$('img', this).length) { // check if the figure is empty (an image was removed)
        $(this).remove(); // remove it!
      }
    });
  });
});

Antworten

Kommentare

Hinterlassen Sie eine Antwort Antwort abbrechen