私はWordPress用のアンダースコアを使ったテーマを開発しています。
ユーザーがTinyMCEエディタを使用して画像を追加すると、次のコードが挿入されます。
<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" />
Wordpressによって生成された最終ページを見ると、HTMLが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">
幅300ピクセルのサムネイルを生成する関数を作成しました。
add_action( 'after_setup_theme', 'images_theme_setup' );
function images_theme_setup() {
add_image_size( 'preload-thumb', 300 ); // 300 pixels wide (and unlimited height)
}
今私はPil( https://github.com/gilbitron/Pil )互換のマークアップを使用して画像を提供したいので、preload-thumb
を提供してからより大きな画像を提供することができます。
これと一致するようにマークアップに変更する必要があります
<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>
私の知る限り、あなたはフィルタ image_send_to_editor
にこのようにフックすることができます:
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 );
data-pil-thumb-url
およびdata-full-width
およびdata-full-height
のような追加のタグについては、その関数の中に適切なコードを追加して、それらを$html5
ストリングに追加することができます。
Css-tricksで<figcaption>
というキャプションを付けた例については このページ も参照してください。または this より詳細な 'walk through'を確認してください。
マークアップを指定できる image_send_to_editor
という名前のフィルタがあります。幅と高さを取得するには wp_get_attachment_metadata
も必要です。これは次のように呼ばれます(未テスト)。
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;
}
$ urlからXXXを構築するには賢い正規表現が必要ですが、私はそれをあなたに任せます。