Использование Mobile-Detect для отображения пользовательских избранных изображений
Недавно я работал над темой фотографии, и одна из вещей, которые я реализовал, – это мобильный «стиль». В отличие от обычных адаптивных тем, которые подстраиваются под размер вашего браузера независимо от устройства, я настроил его так, чтобы мобильные CSS / js загружались только на планшеты и портативные устройства. Что ж, в версиях для настольных ПК / ноутбуков я хочу сохранить определенный дизайн, который требует, чтобы некоторые изображения имели фиксированную высоту, но любую ширину, однако в мобильной версии я хочу, чтобы эти же изображения имели неограниченную высоту, но фиксированную ширину.
Решение?
Недавно я нашел довольно приятный сценарий под названием «Mobile Detect», который я использовал для загрузки моих css / js только на мобильные устройства, так почему бы не использовать тот же сценарий для отображения изображений разных размеров для мобильных устройств? Ниже я покажу вам, как вы можете использовать этот замечательный скрипт вместе с функцией изменения размера цвета морской волны для изменения размера изображений для создания изображений двух разных размеров – одного для обычных компьютеров и одного для мобильных устройств.
Как это сделать?
Первое, что вам нужно сделать, это добавить функцию Aqua Resizer и php-класс Mobile Detect в свою тему / плагин. Либо через functions.php, либо в отдельный файл с помощью функции require().
Aqua Resizer
Функция Aqua Resizer очень проста в использовании. Ниже вы можете увидеть пример того, как добавить его в тему, чтобы показать избранное изображение сообщения:
Мобильное обнаружение
Класс Mobile действительно прост в использовании, вот пример того, как проверить, находится ли посетитель на каком-либо мобильном устройстве:
Совместите Aqua Resizer и Mobile Detect
Теперь предположим, что я хотел показать изображение, которое намного меньше (вдвое меньше) для всех мобильных пользователей, я могу сделать это следующим образом:
Как видите, это действительно довольно просто и открывает множество возможностей. Вы можете использовать его для предоставления более крупных изображений для дисплеев Retina (Mobile Detect очень обширен, вы даже можете тестировать отдельные устройства, операционные системы, партии устройств и т.д. ), Для отображения изображений меньшего размера для более быстрого мобильного просмотра или когда я его использую, чтобы отображать разные пропорции изображений на мобильных устройствах.
примечание: Очевидно, вы также можете использовать для этого миниатюры сообщений, указав размер изображения. Я выбрал средство изменения размера цвета морской волны, потому что это функция, которую я использовал в последнее время в своей теме, потому что она не требует от вас повторного создания эскизов при добавлении новых размеров изображений или при изменении текущих.
Источник записи: https://www.wpexplorer.com