Отзывчивые образы

Есть ли встроенная функция для отображения правильного размера адаптивного изображения для миниатюр или изображений галереи в зависимости от разрешения экрана?

Обычно я использую:

Размеры пользовательских изображений:

function customImageSetup () { add_theme_support( 'post-thumbnails' ); add_image_size('grid_1 mini square', 60, 60, TRUE); add_image_size('grid_2', 160); add_image_size('grid_2 square', 160, 160, TRUE); add_image_size('grid_4', 360); add_image_size('grid_4 square', 360, 360, TRUE); add_image_size('grid_6', 560); add_image_size('grid_6 square', 560, 560, TRUE); add_image_size('grid_8', 760); add_image_size('grid_8 square', 760, 760, TRUE); add_image_size('grid_10', 960); add_image_size('grid_12', 1160, FALSE); } 

2. Отобразить, например, миниатюру с назначенным классом .img-max :

 <?php the_post_thumbnail('grid_4', array( 'class' => "img-max"));?> 

3. И эта простая строка css, чтобы соответствовать изображению:

 .img-max { width:100%; height:auto; } 

Это работает в большинстве случаев, но особенно с точки зрения гибкого веб-дизайна было бы весьма полезно использовать пользовательские размеры изображений при разных разрешениях экрана.

Есть ли функция wordpress для замены сторон сервера изображений и без javascript?

Solutions Collecting From Web of "Отзывчивые образы"

Чтобы добавить к ответу от @ cristian.raiber, в WordPress или php нет функции для определения размеров экрана, и во всей вероятности никогда не будет такой функциональности. Php работает на стороне сервера, которая выполняется до стороны клиента, которая является стороной браузера. Что касается php, и в этом отношении WordPress, я не вижу никакой будущей реализации какой-либо функции для обработки такого обнаружения в любой форме предсказуемого и надежного способа.

Просто нет дурака, чтобы сделать эту работу, как бы вы ни смотрели на нее. Операции на стороне сервера предсказуемы и что-то, на что мы можем доверять, поскольку оно не зависит от ввода конечного пользователя и, что более важно, не может быть обработано конечным пользователем. Операции на стороне клиента могут быть укомплектованы.

Посмотрите на следующие клиентские переменные и манипуляции:

  • Cookies -> Cookies могут быть удалены или заблокированы пользователем, файлы cookie также могут быть заблокированы законодательством штата или страны

  • jQuery -> Конечные пользователи могут отключать jquery в любое время

  • Браузеры -> Сайты ведут себя по-разному в разных браузерах. Конечные пользователи могут отключить обнаружение браузера

Решения для клиентской стороны будут работать в некоторых случаях, в других случаях, не основанных на вышеизложенном (есть и другие моменты, которые не упомянуты).

Вы можете использовать wp_is_mobile() для обнаружения мобильных телефонов (он работает только на мобильных телефонах, а не на планшетах), а затем соответствующим образом подбирает правильный размер изображения, НО , следует отметить следующее:

  • Как указано выше в операциях на стороне клиента, это также ненадежная функция, так как она также зависит от операций на стороне клиента. По моему мнению, функция мыши-микки

  • Он не определяет размеры экрана, и он обнаруживает только мобильные устройства. Он не работает на планшетах

ВЫВОД

Единственное правильное решение для этого – оптимизировать ваши изображения, насколько это возможно (это требует правильного планирования и правильного размера изображения, которое должно быть увеличено в соответствии с размером содержимого. Не загружайте изображение 700 пикселей, когда максимальная ширина содержимого составляет 500 пикселей), а затем пусть браузер соответствующим образом изменяет размер изображений. Я знаю, что это замедляет время загрузки, поскольку браузеры используют множество ресурсов для изменения размеров изображений, но по крайней мере вы можете надежно обслуживать контент для конечного пользователя

Там нет встроенной функции, но плагин RICG Responsive Images добавит атрибут srcset с доступными размерами изображений. Srcset (наряду с элементом <picture> ) неуклонно набирает поддержку браузера – ему не нужен какой-либо javascript, и именно браузер должен решить, какое именно изображение загрузить.

Атрибут добавляется для сообщений, в которых вы использовали кнопку «Добавить медиа», и есть способы вызвать ее вручную в шаблоне темы – вы можете, например, изменить свою функцию customImageSetup чтобы вызвать tevkori_get_srcset_string () .

Он неинвазивный, поскольку он не внесет никаких изменений в медиа-библиотеку или базу данных, и если вы удалите его, ваш сайт вернется к нормальному состоянию.

Нет, на данный момент такого не происходит. Тем не менее, есть решение, которое вы могли бы попробовать, если вы действительно заинтересованы в этом.

Это то, что я использовал в прошлом, и это получилось прекрасно, хотя оно имеет свои ограничения.

Решение:

Вы можете написать небольшую функцию JS, которая получает текущее разрешение экрана пользователя и записывает его в файл cookie. Вам также понадобится функция, которая обновляет значение, хранящееся в файле cookie, если пользователь изменяет размер своего окна браузера.

Вы можете прочитать этот файл cookie с помощью PHP и получить что-то вроде:

 if($screen_resolution > 640 && $screen_resolution < 860) { the_post_thumbnail('your-custom-image-size-for-this-viewport-here'); } 

PS: Пожалуйста, учтите, что это решение не очень хорошо работает с системами кеширования.