フィルターして画像寸法属性を削除しますか?


35

私は、画像の最大幅をそれらを含む列の幅に設定する流動的な幅のCSSテンプレートに基づいてサイトで作業していますが、WordPressが画像に追加するインライン高さの寸法属性を削除する必要があります。

このフィルターを使用して、注目の画像でそれをやっています:

add_filter( 'post_thumbnail_html', 'remove_thumbnail_dimensions', 10, 3 );

function remove_thumbnail_dimensions( $html, $post_id, $post_image_id ) {
    $html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );
    return $html;
}

必要であれば、同じフィルターをthe_contentに適用できることを知っています。しかし、これを行うより良い方法はありますか?


最初に、非常に役立つコードをありがとう。imgタグから幅と高さの属性を完全に除去しますが、何らかの理由でキャプションショートコードがあればそれを除去するようにも見えます。誰がこれがなぜであり、それを修正する方法を知っていますか?
ドミニクP

1
これを独自の質問として投稿すべきでしょうか?それは私自身の応答に値するほど十分に私のものとは十分に異なっているようです。それにもかかわらず、私は試して答えます...この答えを見つけて同じ問題を抱えている他の人のために:あなたの問題はimg_caption_shortcode、キャプションショートコードを処理する関数では、キャプションショートコード属性で幅を指定する必要があるということです それ以外の場合は、キャプションを完全にスキップし、[caption]ショートコードタグ内にラップされたコンテンツのみを返します。
ゴールデンアップル

幅を定義せずにキャプションショートコードを使用できるようにするには、フィルターにフックされている関数でキャプションマークアップを定義する必要がありますimg_caption_shortcode。ただし、このような関数のコードを作成することは、ここでコメントに収めることができません。
ゴールデンアップル

@goldenapples、お返事ありがとうございます。あなたが提案したように、ここで新しい質問をしました:wordpress.stackexchange.com/questions/32931/…。その上での入力は大歓迎です。質問で説明したように、フィルターをオンimg_caption_shortcodeにしても問題を解決できるかどうかはわかりません。
ドミニクP

1
実際のコンテンツを見ずにあなたがしようとしていることの全体像を見逃しているのかもしれませんが、CSSだけを使用してこれを修正することはできませんか?画像に最大幅を使用している場合、高さを追加することで高さの問題を克服できるはずです:auto; コンテンツ画像に。
バイナリ有機

回答:


36

皆さんありがとう!

image_send_to_editorのフィルタは、私は...それを指摘してt31os @おかげで探していたものでした。

これが私の機能です。

add_filter( 'post_thumbnail_html', 'remove_thumbnail_dimensions', 10 );
add_filter( 'image_send_to_editor', 'remove_thumbnail_dimensions', 10 );

function remove_thumbnail_dimensions( $html ) {
    $html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );
    return $html;
}

これによりthe_post_thumbnail()、で取得した画像からインラインディメンション属性が削除され、これらの属性がエディターに追加された新しい画像に追加されなくなります。wp_get_attachment_imageまたは他の関連機能を介して取得した画像からそれらを削除しません(そこにフックはありません)が、これらのケースは必要に応じてテンプレートファイルで処理できます。


1
正規表現から\ sを削除する必要がありました。その後、うまくいきました。高さ設定の最後の二重引用符の後に後続スペースがなかったからだと思います。
MattSlay

1
@MattSlayサイトのコンテンツを永続的に変更することに問題があるのは私だけですか?レスポンシブテーマでは、Webサイトのコンテンツを修正して、正しくフォーマットする必要はありません。このブログ投稿のように、フィルターを削除しimage_send_to_editor、代わりに追加することに投票します。これにより、プレゼンテーションロジックとコンテンツが分離されます。the_content
BFTrick

1
@BFTrick-私にとっては文脈の問題のようです。レスポンシブテーマの場合、この方法で処理された既存のコンテンツに依存することはできず、インストールされた次のテーマにこれらのディメンション属性が必要かどうかわからないため、同意します。私の場合、テーマがコンテンツに不可欠なアプリを作成していました。そのため、最初に画像を追加したときに、プロセッサーをあまり使用しない方法で画像を処理しました。しかし、あなたは良い点を挙げています。
ゴールデンアップル

2
警告:この回答は、WordPress 3.5.1の画像キャプションに違反します。
有線接続

5

このスクリプトを少し修正しました。助けてくれてありがとう!

add_filter( 'post_thumbnail_html', 'remove_thumbnail_dimensions', 10 );
add_filter( 'image_send_to_editor', 'remove_thumbnail_dimensions', 10 );
// Genesis framework only
add_filter( 'genesis_get_image', 'remove_thumbnail_dimensions', 10 );
// Removes attached image sizes as well
add_filter( 'the_content', 'remove_thumbnail_dimensions', 10 );
function remove_thumbnail_dimensions( $html ) {
    $html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );
    return $html;
}

5
しかし、注意してください。the_contentをフィルタリングすると、youtubeビデオやその他の幅/高さ属性もフィルタリングされます。
MikeNGarrett

1
確かに、それはレスポンシブサイトでは良いことかもしれません。画像に対して行う必要がある場合は、おそらく他のメディアに対しても行う必要があります。
BFTrick

1

function.phpで画像サイズを「ギャラリー」として設定した場合

add_image_size( 'gallery', 200, 120, true );

「gallery」などの特定の画像サイズの幅と高さを削除できます。

add_filter( 'post_thumbnail_html', 'remove_thumbnail_dimensions', 10, 4 );

function remove_thumbnail_dimensions( $html, $post_id, $post_image_id,$post_thumbnail) {
    if ($post_thumbnail=='gallery'){
    $html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );
    }
    return $html;
}

0

そのフィルターを適用するthe_contentと、すべてのコンテンツに対してフィルターが起動します。これは効果的ですが、サイトのパフォーマンスとロード時間に影響を与える可能性があります。そもそも画像を挿入するときに、インラインの幅と高さのタグを挿入しないようにWordPressに指示した方が良いでしょう。

残念ながら、実際に画像を挿入するスクリプトはJavaScriptで構築され、TinyMCE wysiwygエディターと対話します。直接フックする方法があるかもしれませんが、標準add_filter()呼び出しを使用していません。


1
image_send_to_editorここで仕事のフィルターはありませんか?
t31os

@ t31os-それが私が探していたものだと思う!なぜ私はそのフックを前に見なかったのか分からない。
ゴールデンアップル

まあ私は確かにそれが役立つことを願っています、それがトリックを行うかもしれないように見えます...報告して私たちに知らせてください。:)
t31os

@ t31osうん、それはトリックをしました!ありがとう!最初にアクセスしない限り、回答として投稿します。
ゴールデンアップル

2
あなたはそれのために行きます、私はあまり大騒ぎしていません、あなたが解決策を見つけることができて幸せです
;;
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.