web-dev-qa-db-ja.com

画像とキャプションの寸法属性の削除

この質問は、 この説明 からイメージから寸法属性を削除することへの派生物です。そのスレッドで提供されているソリューションコードは、[caption]というショートコードがイメージから削除されるという不幸な副作用があることを除けば非常にうまく機能します。

コアコードを調べて数時間後、私はこれの原因を見つけました。 [caption]ショートコードの追加を担当するwpeditimage TinyMCEプラグインは、shortcodeおよびimgタグ内の幅属性をチェックします。見つからない場合は、単にキャプションを削除します。これはTinyMCEエディタのjavascriptを使って「オンザフライ」で行われるので、この問題に対処するような種類のWordPressフィルタは考えられません。私は間違っていると証明されてうれしいです。 :)

最後の注意として、私の一時的な解決策は、問題のあるタグをすべてクライアント側で取り除くために次のjQueryを使用することでした。幅スタイルがそこで使用されないようにするためのimg_caption_shortcodeのフィルタと組み合わせて、これは仕事をしているようです。それはきれいではありませんが、それは今のところバンドエイドです。誰かがより良いアイデアをお持ちですか？

// Strip width and height attributes from img, video, and object in the main article so we can have fluid images
var $fluid_items = $('.main-article-wrapper').find('img,video,object');
$fluid_items.removeAttr('width');
$fluid_items.removeAttr('height');
filtersimages
9
Dominic P

それはあなたが期待している正確な答えではないかもしれませんが、私は私がちょうどかなりよい回避策を見つけたと思います。

私は21のテーマCSSからの次のコードを取った（だれがきちんと敏感な私見）：

/* Images */
.entry-content img,
.comment-content img,
.widget img {
    max-width: 97.5%; /* Fluid images for posts, comments, and widgets */
}
img[class*="align"],
img[class*="wp-image-"] {
    height: auto; /* Make sure images with WordPress-added height and width >attributes are scaled correctly */
}
img.size-full {
    max-width: 97.5%;
    width: auto; /* Prevent stretching of full-size images with height and >>width attributes in IE8 */
}

これで、すべての画像をレスポンシブにすることができました（少なくともコンテンツに埋め込まれているもの）。キャプションを使用しても同じ問題が発生します。画像の幅のキャプションコンテナ。これを修正するには、CSSにこれを追加するだけです。

            .wp-caption { max-width: 100%; }

完了しました。それは私のためにうまく働きますが、それは特色にされたイメージのために働かないかもしれませんが。

これが誰かに役立つことを願っています:-)

18
Talbatz