Исправление адаптивных картинок Wordpress - PullRequest
0 голосов
/ 08 декабря 2011

Я создаю адаптивную тему для Wordpress и столкнулся с проблемой адаптивных изображений.Дело в том, что мне нужно изменить размер изображения внутри содержимого.Моя логика действительно говорит, что я должен использовать фильтр для этого, но я не мог найти тот, который предназначался бы для изображений определенноМоей первой мыслью было использовать для этого JS lib , но именно этот хочет получить название как больших, так и маленьких изображений, и так как мой сайт использует некоторые нестандартные размеры носителей, я не нашел способа правильно получитьНазвание маленького изображения.

Другой способ - использовать css

img {
 max-width: 100%;
}

, но опять же, мне нужно удалить атрибуты width и height из тега img.

Так что в основном оба метода требуют, чтобы я просматривал контент и анализировал теги изображений, а затем заменял их на новые.

Я покопался в разных источниках плагинов и обнаружил, что они фильтруют the_content.и просто используйте regex, чтобы найти теги img и заменить их новыми.

Так что я ищу решение, чтобы сделать эту работу правильным, потому что у меня есть ощущение, что просмотр всего контента только для замены изображений неправильно.если нет лучшего способа сделать это, может кто-нибудь помочь мне с кодом (особенно регулярное выражение), чтобы решить мою маленькую проблему.в основном мне нужно найти теги img и удалить атрибуты ширины и высоты.

Ответы [ 2 ]

2 голосов
/ 13 января 2012

Просто вставьте это в файл functions.php, и все будет хорошо (без ширины и высоты в миниатюрах или изображениях, добавленных через редактор)

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;
}
2 голосов
/ 14 декабря 2011

CSS легко переопределит встроенный тег img, просто используйте

#.. img{

height:auto;
width:100%;

}
...