Поддержка Проблемы и решения Заменить full на thumbnail для мобильных

  • Здравствуйте.

    Возможно ли заменить изображениe размера full, вставленное в любое место текста записи блога. На аналогичное изображение размера thumbnail — при просмотре записи с мобильного устройства.

Просмотр 4 ответов — с 1 по 4 (всего 4)
  • @media в поле индивидуального css изображения?
    Какой точно код, подскажите, пожалуйста.

    Модератор Юрий

    (@yube)

    Для изменения размера изображения в зависимости от устройства (на стороне клиента, разумеется) используются атрибуты srcset и sizes тега img. См. Адаптивные изображения — Изучение веб-разработки | MDN

    Юрий, здравствуйте! Спасибо, что откликнулись.

    В стандартное текстовое поле (например, описание категории товара https://cabian.ru/kuhni/) я вставляю большое изображение ххх.webp. Сейчас на мобильных устройствах показывается это же изображение xxx.webp. Я пытаюсь сделать, что бы показывалось xxx-300.webp, то есть миниатюра этого же изображения, создаваемая WP автоматически.

    Если правильно понимаю, у меня есть 2 способа влиять на изображение. Пользовательский CSS дочерней темы и индивидуальный CSS изображения при нажатии на «карандаш» редактирования изображения в тексте.

    Куда добавлять код примерно такого вида? Взято из предоставленной Вами ссылки.`

    <img srcset=»elva-fairy-320w.jpg 320w,
    elva-fairy-480w.jpg 480w,
    elva-fairy-800w.jpg 800w»
    sizes=»(max-width: 320px) 280px,
    (max-width: 480px) 440px,
    800px»
    src=»elva-fairy-800w.jpg» alt=»Elva dressed as a fairy»>`

    Нужно ли создавать отдельный класс и прописывать его в каждом нужном изображении?
    Далек я от программирования, простите.

    • Ответ изменён 5 дней, 6 часов назад пользователем Igor.
    • Ответ изменён 5 дней, 6 часов назад пользователем Igor.
    Модератор Юрий

    (@yube)

    Если правильно понимаю, у меня есть 2 способа влиять на изображение. Пользовательский CSS дочерней темы и индивидуальный CSS изображения при нажатии на «карандаш» редактирования изображения в тексте.

    Еще у Вас есть возможность влиять на генерируемый html путем изменения шаблонов вывода или путем использования API, если разработчики темы/плагина позаботились о такой возможности. Атрибуты srcset и sizes — это html.

    Далек я от программирования, простите.

    Никто не совершенен 🙂 Но в данном случае одним css из админки не обойтись, придется углубляться в код php, порождает html, отдаваемый браузеру для отображения. Впрочем, может кто-то знает другой способ.

Просмотр 4 ответов — с 1 по 4 (всего 4)