TechBlogSD - Все для WordPress и WEB разработки
WEB и WordPress инструкции, новости, обзоры тем и плагинов

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

170

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

Решение?

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

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

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

Aqua Resizer

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

<?php //get and crop featured image to 600px (width) and 150px (height) $featured_image = aq_resize( wp_get_attachment_url( get_post_thumbnail_id() ,'full' ), 600, 300, true ); ?> <img src="<?php echo $featured_image; ?>" />

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

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

<?php $detect = new Mobile_Detect(); if ($detect->isMobile()) { // Any mobile device. } ?>

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

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

<?php $detect = new Mobile_Detect(); if ($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 ); } ?> <img src="<?php echo $featured_image; ?>" />

Как видите, это действительно довольно просто и открывает множество возможностей. Вы можете использовать его для предоставления более крупных изображений для дисплеев Retina (Mobile Detect очень обширен, вы даже можете тестировать отдельные устройства, операционные системы, партии устройств и т.д. ), Для отображения изображений меньшего размера для более быстрого мобильного просмотра или когда я его использую, чтобы отображать разные пропорции изображений на мобильных устройствах.

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

Источник записи: https://www.wpexplorer.com

Leave A Reply

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