Использование Mobile-Detect для отображения пользовательских избранных изображений

Недавно я работал над темой фотографии, и одна из вещей, которые я реализовал, – это мобильный «стиль». В отличие от обычных адаптивных тем, которые подстраиваются под размер вашего браузера независимо от устройства, я настроил его так, чтобы мобильные CSS / js загружались только на планшеты и портативные устройства. Что ж, в версиях для настольных ПК / ноутбуков я хочу сохранить определенный дизайн, который требует, чтобы некоторые изображения имели фиксированную высоту, но любую ширину, однако в мобильной версии я хочу, чтобы эти же изображения имели неограниченную высоту, но фиксированную ширину.

Решение?

Недавно я нашел довольно приятный сценарий под названием «Mobile Detect», который я использовал для загрузки моих css / js только на мобильные устройства, так почему бы не использовать тот же сценарий для отображения изображений разных размеров для мобильных устройств? Ниже я покажу вам, как вы можете использовать этот замечательный скрипт вместе с функцией изменения размера цвета морской волны для изменения размера изображений для создания изображений двух разных размеров – одного для обычных компьютеров и одного для мобильных устройств.

Как это сделать?

Первое, что вам нужно сделать, это добавить функцию Aqua Resizer и php-класс Mobile Detect в свою тему / плагин. Либо через functions.php, либо в отдельный файл с помощью функции require().

Aqua Resizer

Функция Aqua Resizer очень проста в использовании. Ниже вы можете увидеть пример того, как добавить его в тему, чтобы показать избранное изображение сообщения:

Мобильное обнаружение

Класс Mobile действительно прост в использовании, вот пример того, как проверить, находится ли посетитель на каком-либо мобильном устройстве:

isMobile()) {
// Any mobile device.
} ?>

Совместите Aqua Resizer и Mobile Detect

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

isMobile()) {
// Featured image for mobile users
$featured_image = aq_resize( wp_get_attachment_url( get_post_thumbnail_id() ,’full’ ), 300, 150, true );
} else {
// Featured image for all other users
$featured_image = aq_resize( wp_get_attachment_url( get_post_thumbnail_id() ,’full’ ), 600, 300, true );
} ?>