Статьи

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

Недавно я работал над темой фотографии, и одна из вещей, которые я реализовал, – это мобильный «стиль». В отличие от обычных адаптивных тем, которые подстраиваются под размер вашего браузера независимо от устройства, я настроил его так, чтобы мобильные 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 очень обширен, вы даже можете тестировать отдельные устройства, операционные системы, партии устройств и т.д. ), Для отображения изображений меньшего размера для более быстрого мобильного просмотра или когда я его использую, чтобы отображать разные пропорции изображений на мобильных устройствах.

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

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Кнопка «Наверх»

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: