wake-up-neo.com

So ändern Sie das Markup Wordpress-Einfügungen für Post-Bilder

Ich entwickle ein Thema mit Unterstrichen für WordPress.

Wenn der Benutzer ein Bild mit dem TinyMCE-Editor hinzufügt, wird der folgende Code eingefügt:

<img class="wp-image-45 size-full aligncenter" src="http://example.com/wp-content/uploads/2016/06/process.png" alt="process" width="849" height="91" />

Wenn ich mir die von Wordpress erstellte letzte Seite ansehe, erscheint der HTML-Code im DOM

<img class="wp-image-45 size-full aligncenter" src="http://example.com/wp-content/uploads/2016/06/process.png" alt="process" width="849" height="91" srcset="http://example.com/wp-content/uploads/2016/06/process.png 849w, http://example.com/wp-content/uploads/2016/06/process-300x32.png 300w, http://example.com/wp-content/uploads/2016/06/process-768x82.png 768w" sizes="(max-width: 849px) 100vw, 849px">

Ich habe eine Funktion erstellt, um ein Vorschaubild mit einer Breite von 300px zu generieren:

add_action( 'after_setup_theme', 'images_theme_setup' );
function images_theme_setup() {
    add_image_size( 'preload-thumb', 300 ); // 300 pixels wide (and unlimited height)
}

Jetzt möchte ich Pil ( https://github.com/gilbitron/Pil ) kompatibles Markup verwenden, um Bilder bereitzustellen, damit ich den preload-thumb und dann das größere Bild bereitstellen kann

Ich muss zum Markup wechseln, damit es mit dem unten stehenden übereinstimmt

<figure class="pil">
    <img src="img/my-image.jpg" data-pil-thumb-url="img/thumb-my-image.jpg" data-full-width="5616" data-full-height="3744" alt="">
</figure>
6
Simon

Soweit ich weiß, können Sie sich in den Filter einhängen image_send_to_editor wie folgt:

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

Für zusätzliche Tags wie data-pil-thumb-url und data-full-width und data-full-height können Sie den entsprechenden Code innerhalb dieser Funktion hinzufügen und sie der Zeichenfolge $html5 hinzufügen.

Siehe auch diese Seite für ein Beispiel mit einer Überschrift <figcaption> bei css-tricks oder überprüfen Sie diese detaillierteres 'Durchgehen'.

5
tillinberlin

Es gibt einen Filter namens image_send_to_editor , mit dem Sie das Markup angeben können. Sie benötigen außerdem wp_get_attachment_metadata , um Breite und Höhe abzurufen. Es heißt so (ungetestet):

   add_filter( 'image_send_to_editor', 'wpse_231693_img_markup', 10, 7 );
   function wpse_231693_img_markup ($html, $id, $alt, $title, $align, $url, $size ) {
       $metadata = wp_get_attachment_metadata ($id);
       $url = wp_get_attachment_url($id);
       $html = '<figure class="pil"><img src="' . $url . 
               '" data-pil-thumb-url="XXX" data-full-width="' . $metadata['width'] .
               '" data-full-height="' . $metadata['height'] .
               '" alt="' . $alt . '"></figure>';
       return $html;
   }

Sie benötigen einen geschickten Regex, um XXX aus $ url zu konstruieren, aber das überlasse ich Ihnen.

1
cjbj