Как сделать аналог медиа запросов в WordPress?

Ссылка скопирована
CSS PHP Slick WordPress Изображения Слайдер
1 ответ

Да, я в курсе, что никак. Но как-то нужно было кратко сформулировать вопрос.

Ситуация следующая:
На главной странице сайта, есть слайдер, реализованный с помощью slick slider

Картинки в него выводятся циклом из ACF:

<?php if (have_rows('slider', 59)) {     while (have_rows('slider', 59)) {         the_row(); ?>         <img src="<?php the_sub_field('slider-image'); ?>" alt="Изображение слайдера"> <?php } } ?>

<?php if (have_rows('slider', 59)) { while (have_rows('slider', 59)) { the_row(); ?> <img src="<?php the_sub_field('slider-image'); ?>" alt="Изображение слайдера"> <?php } } ?>

Можно ли как-то в данной ситуации сделать так, чтобы на смартфонах, грузились изображения меньшего размера вместо полноразмерных с шириной более 1000 px?

Дополнительно:

Всё "как". См wp_get_attachment_image_srcset и другие подобные функции.

Для этого существует srcset, wp сам генерирует размеры фото с этим атрибутом. В ACF сделайте вывод картинки не ссылкой, а ID и выводите картинку для слайдера через функцию wp

<?php if (have_rows('slider', 59)) : while (have_rows('slider', 59)) : the_row(); ?>     <?php echo wp_get_attachment_image(get_sub_field('slider-image'), 'large', false, array("loading" => "lazy")); ?> <?php endwhile; endif; ?>

<?php if (have_rows('slider', 59)) : while (have_rows('slider', 59)) : the_row(); ?> <?php echo wp_get_attachment_image(get_sub_field('slider-image'), 'large', false, array("loading" => "lazy")); ?> <?php endwhile; endif; ?>

  • Я думал об этом способе, но проблема в том, что я вручную отключил автоматически генерируемые размеры картинок в WP, и так выходит, что кроме этого слайдера мне это нигде и не нужно. Но спасибо

Ответы:

Можно через тег picture, браузером будут подгружены лишь те изображения, которые удовлетворяют условию, либо дефолтное изображение:

<?php if(have_rows('slider', 59)): ?>     <div class="slider">         <?php while(have_rows('slider', 59)): the_row();             $images = get_sub_field('slider-image'); // slider images              if(!empty($image)):                 $large = $images['sizes']['large'];                 $medium = $images['sizes']['medium'];                 $regular = $images['regular'] ? $images['regular'] : '';                 ?>                              <picture>                     <source                         media="(max-width: 799px)"                         srcset="<?php echo esc_url($medium);                     ?>"/>                      <source                         media="(min-width: 800px)"                         srcset="<?php echo esc_url($large);                     ?>"/>                      <img                         src="<?php echo esc_url($large); ?>"                         alt="<?php echo esc_attr($regular);                     ?>"/>                 </picture>                          <?php endif; endwhile; ?>     </div> <?php endif; ?>

<?php if(have_rows('slider', 59)): ?> <div class="slider"> <?php while(have_rows('slider', 59)): the_row(); $images = get_sub_field('slider-image'); // slider images if(!empty($image)): $large = $images['sizes']['large']; $medium = $images['sizes']['medium']; $regular = $images['regular'] ? $images['regular'] : ''; ?> <picture> <source media="(max-width: 799px)" srcset="<?php echo esc_url($medium); ?>"/> <source media="(min-width: 800px)" srcset="<?php echo esc_url($large); ?>"/> <img src="<?php echo esc_url($large); ?>" alt="<?php echo esc_attr($regular); ?>"/> </picture> <?php endif; endwhile; ?> </div> <?php endif; ?>

Да, я в курсе, что никак.

Что значит никак? В теге source имеется атрибут media с аналогичным поведением и параметрами css директиве media.

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь
Лучший ответ
1
Дмитрий К. Ответ

Для мобильных изображений в WordPress не нужно вручную имитировать media queries в PHP. Правильный путь — хранить в ACF не URL картинки, а ID изображения, и выводить его через WordPress-функции, которые сами добавят srcset и sizes. Тогда браузер выберет подходящий размер под экран.

В ACF для поля изображения выберите Return Format: ID. Затем в шаблоне:

<?php
$image_id = get_sub_field('slider_image');
 
if ($image_id) {
    echo wp_get_attachment_image($image_id, 'large', false, [
        'alt' => 'Изображение слайдера',
        'loading' => 'lazy',
    ]);
}
?>

<?php $image_id = get_sub_field('slider_image'); if ($image_id) { echo wp_get_attachment_image($image_id, 'large', false, [ 'alt' => 'Изображение слайдера', 'loading' => 'lazy', ]); } ?>

WordPress выведет примерно такую разметку:

<img src="image-1024.jpg" srcset="image-300.jpg 300w, image-768.jpg 768w, image-1024.jpg 1024w" sizes="...">

<img src="image-1024.jpg" srcset="image-300.jpg 300w, image-768.jpg 768w, image-1024.jpg 1024w" sizes="...">

Если слайдер находится на первом экране, для первой картинки лучше не ставить lazy loading, а для остальных можно оставить. Для Slick также важно, чтобы изображения не загружались все тяжёлыми файлами сразу. Можно использовать lazyLoad самого Slick или нативный lazy, но не дублировать конфликтующие механизмы.

Если нужны разные кадры для мобильной и десктопной версии, используйте picture или два поля ACF: desktop image и mobile image. Но если отличие только в размере, достаточно srcset.

Итог: поменяйте ACF с URL на ID и выводите через wp_get_attachment_image(). Это даст адаптивные размеры без ручной логики и без загрузки полноразмерных картинок на смартфонах.

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Вам также может быть интересно

VPN Как правильно настроить vless для Android TV? 1 ответ Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 1 ответ печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 1 ответ Аккумуляторные батареи Почему при зарядке автостарта слышен писк, где искать причину? 1 ответ