Как отобразить разный размер изображения для мобильных устройств

Question

Как отобразить разный размер изображения для мобильных устройств

2 мар. 2017 г., 00:11:18

Просмотры: 19.9K

Голосов: 1

Я настроил следующее:

add_image_size( 'featured-image', 1600, 450, true );

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

Я создал новый размер изображения, который назвал 'featured-image-mobile' с размерами 650px на 448px.

На самой странице я отображаю полноразмерное изображение следующим образом:

<img src="<?php the_post_thumbnail_url( 'featured-image' )?>"
    alt="<?php echo $altTag; ?>"
    title="<?php echo $titleTag; ?>">

Есть ли способ сохранить

the_post_thumbnail_url( 'featured-image' );

для всех разрешений экрана, кроме 650px, а затем изменить размер изображения на следующий?

the_post_thumbnail_url( 'featured-image-mobile' );

rebeccasmith_me

11

изображения адаптивный

Комментарии

В HTML5 появился новый атрибут для IMG — srcset

David Lee

2 мар. 2017 г. 00:41:58

Да, я пробовал это, но без успеха. Например, я сделал следующее: '$img_src = wp_get_attachment_image_url( $post_thumbnail_id, 'featured-image-mobile' ); $img_srcset = wp_get_attachment_image_srcset( $post_thumbnail_id, 'featured-image' ); <img src="<?php echo esc_url( $img_src ); ?>" srcset="<?php echo esc_attr( $img_srcset ); ?>" sizes="(max-width: 650px) 650px, 440px"> '

Но всегда загружалось только маленькое изображение 'featured-image-mobile' на всех размерах экрана, а не оригинальное обрезанное изображение 'featured-image', которое я установил для десктопа и планшета.

rebeccasmith_me

2 мар. 2017 г. 01:06:27

Какой у вас реальный брейкпоинт, когда вы указали 650px? А какой у вашего 'featured-image-mobile'?

nyedidikeke

2 мар. 2017 г. 02:49:29

@DavidLee, srcset предполагает, что все изображения имеют одинаковое соотношение сторон и поэтому взаимозаменяемы, что в данном случае не так.

Mark Kaplun

2 мар. 2017 г. 08:10:38

Все ответы на вопрос

Комментарии

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

Mark Kaplun

2 мар. 2017 г. 08:04:33

@mark-kaplun Это предложение по бессмысленному использованию WP. Это зависит от знаний, а не от моды. Если что-то всё ещё работает (не устарело), этим можно пользоваться.

Fernando Baltazar

2 мар. 2017 г. 08:17:50

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

Mark Kaplun

2 мар. 2017 г. 11:31:48

Elex 1.04K · Answer 1 · 2017-03-02T14:35:52Z

WordPress wp_is_mobile() может быть той функцией, которую вы ищете.

// Используем встроенную функцию если это WP
if(wp_is_mobile()) // На мобильном устройстве
{
    the_post_thumbnail_url('featured-image-mobile');
}
else
{
    the_post_thumbnail_url('featured-image');
}

Elex

1.04K

2 мар. 2017 г. 14:35:52

Svartbaard 404 · Answer 2 · 2017-03-02T09:40:23Z

Вы можете выводить оба изображения и просто переключаться между ними с помощью CSS (я использую здесь базовые классы Bootstrap и опускаю ненужную разметку для ясности):

<div class="featured-image hidden-xs">
   <img src="<?php the_post_thumbnail_url( 'featured-image' )?>" alt="Основное изображение записи" title="Основное изображение записи">
</div>

<div class="featured-image-mobile visible-xs-block">
   <img src="<?php the_post_thumbnail_url( 'featured-image-mobile' )?>" alt="Мобильная версия изображения записи" title="Мобильная версия изображения записи">
</div>

Альтернативно, вы можете добавить мобильную версию изображения как пользовательский атрибут:

<img src="<?php the_post_thumbnail_url( 'featured-image' )?>" data-mob-src="<?php the_post_thumbnail_url( 'featured-image-mobile' )?>" alt="Изображение записи" title="Изображение записи">

И затем переключать источник изображения с помощью JavaScript на мобильных устройствах.

Fernando Baltazar 461 · Answer 3 · 2017-03-02T08:02:41Z

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

function isMobile() {
    return preg_match("/(android|avantgo|blackberry|bolt|boost|cricket|docomo|fone|hiptop|mini|mobi|palm|phone|pie|tablet|up\.browser|up\.link|webos|wos)/i", $_SERVER["HTTP_USER_AGENT"]);
}

// Использование функции
    if(isMobile()){
        // Сделать что-то только для мобильных пользователей
        the_post_thumbnail_url( 'featured-image-mobile' );
    }
    else {
        // Сделать что-то только для пользователей компьютеров
        the_post_thumbnail_url( 'featured-image' );
    }

Больше примеров можно найти здесь https://stackoverflow.com/questions/4117555/simplest-way-to-detect-a-mobile-device