レスポンシブ画像

レスポンシブ画像のソースセットとサイズイズについて、色々と調べてみた。ワードプレスが出力するものは、それなりに良いらしい。が、どこにどのように使われている画像であるかにかかわらず、画一的なやり方で出力しているように思える。wp-includes/media.php の中で色々とやっている。

wordpress自身は、使っていないが、wp_get_attachment_image_srcset と、wp_get_attachment_image_sizes という関数を使えば、wordpress と同じ、srcset と sizes を作成できるようだ。

が、画像の使われ方によって、よりきめ細かに処理するのであれば、これらの関数が共に使っている wp_get_attachment_image_src で画像情報を取得し、独自に作成する方が良いように思える。これは、別途スクリプトを検討してみる。

div.wp-block-image クラスのスタイルが変。アラインがかかっているが、中身(フィギュア要素)がDIV要素の中にはいっていない。やはり、ブロックライブラリのCSSは外して、独自にスタイリングする方が良いかもしれない。インライン画像にするとアラインが指定出来ない。width, height属性が書き込まれ、更に、スタイル属性で150pxが書き込まれている。コントロール不能状態。

ブロックエディタの中では、アラインは使わない方が良いようだ。フィギュアにも、その外側にもアラインクラスがついておかしなここになる。外側のdivには、アラインがついたり、つかなかったりすることもある。?

関連記事

メインボトムコンテンツ