некоторое время назад с помощью этого сообщества я смог настроить свои изображения для отображения / скрытия для настольных компьютеров и мобильных устройств в своих сообщениях в блоге с использованием классов div и тегов <picture>, а также выяснить, как получить определенныеamp-img настроен для настольных компьютеров и мобильных устройств, так как класс div не работает для страниц с усилителями.
Я не использую их все время, но это полезно, когда мне нужно показать изображение в другомместо для настольного компьютера и мобильного устройства, или если у меня есть две версии одного и того же изображения, которые я хотел бы показать в одном месте (например, между абзацами), но я хочу, чтобы у них было определенное соотношение сторон в зависимости от устройства, которое кто-то использует.
Раньше я использовал медиа-запросы CSS, но это становилось довольно грязным и добавляло слишком много работы.И мне было рекомендовано не использовать медиазапросы CSS для изображений усилителей.
Вот примеры того, как мои изображения теперь вводятся в мои записи в блоге:
Я использую это, чтобы показать изображениев одном месте на рабочем столе (второе изображение в этом сообщении в блоге: https://www.smartfertilitychoices.com/inositol-pcos/):
<div class="hidden-sm hidden-xs">
<picture>
<source srcset="https://www.smartfertilitychoices.com/wp-content/uploads/2018/02/inositol-and-pcos-3.jpg" media="(min-width: 980px)">
<img src="https://www.smartfertilitychoices.com/wp-content/uploads/2018/02/inositol-and-pcos-3.jpg" class="alignright" alt="Inositol and PCOS" width="390" height="325">
</picture>
</div>
<amp-img class="alignright" media="(min-width: 980px)" src="https://www.smartfertilitychoices.com/wp-content/uploads/2018/02/inositol-and-pcos-3.jpg" width=390 height=325>
</amp-img>
И это, чтобы показать то же самое изображение на мобильном телефоне, просто в другомместо в сообщении блога:
<div class="hidden-md hidden-lg">
<picture>
<source srcset="https://www.smartfertilitychoices.com/wp-content/uploads/2018/02/inositol-and-pcos-3.jpg" media="(max-width: 980px)">
<img src="https://www.smartfertilitychoices.com/wp-content/uploads/2018/02/inositol-and-pcos-3.jpg" class="aligncenter" alt="Inositol and PCOS" width="390" height="325">
</picture>
</div>
<amp-img media="(max-width: 980px)" src="https://www.smartfertilitychoices.com/wp-content/uploads/2018/02/inositol-and-pcos-3.jpg" width=390 height=325 layout="responsive">
</amp-img>
И я использую это, когда хочу, чтобы два разных изображения сидели в одном и том же месте как на рабочем столе, так и на мобильном устройстве (третье изображение в приведенном выше сообщении в блоге):
<picture>
<source srcset="https://www.smartfertilitychoices.com/wp-content/uploads/2018/02/inositol-and-pcos-8.jpg" media="(min-width: 980px)">
<img src="https://www.smartfertilitychoices.com/wp-content/uploads/2018/02/inositol-and-pcos-7.jpg" class="aligncenter" alt="Inositol and PCOS">
</picture>
<amp-img media="(min-width: 980px)" src="https://www.smartfertilitychoices.com/wp-content/uploads/2018/02/inositol-and-pcos-8.jpg" width=750 height=293 layout="responsive">
</amp-img>
<amp-img media="(max-width: 980px)" src="https://www.smartfertilitychoices.com/wp-content/uploads/2018/02/inositol-and-pcos-7.jpg" width=390 height=325 layout="responsive">
</amp-img>
С тех пор как Wordpress обновился на прошлой неделе, я теперь не могу «обновить» свои записи в блоге, не удаляя части HTML (теги <picture> и теги <amp-img>. Это происходит в разных местах для различных встроенныхтакие вещи, как формы регистрации и видео (javascript + html), и я решил это с помощью шорткодов для этих вещей. Я проверил, и шорткод будет работать почти идеально, если я введу изображение html в шорткодator, а затем используйте шорткод в записи блога.Но этот дополнительный шаг просто создает ненужную работу, и я бы предпочел более простой способ сделать это, если он существует.
Вот примеры того, какие части исчезают, и что происходит, когда это происходит:
<div class="hidden-sm hidden-xs">
<picture>
<source srcset="https://www.smartfertilitychoices.com/wp-content/uploads/2018/02/inositol-and-pcos-3.jpg" media="(min-width: 980px)">
<img src="https://www.smartfertilitychoices.com/wp-content/uploads/2018/02/inositol-and-pcos-3.jpg" class="alignright" alt="Inositol and PCOS" width="390" height="325">
</picture>
</div>
<amp-img class="alignright" media="(min-width: 980px)" src="https://www.smartfertilitychoices.com/wp-content/uploads/2018/02/inositol-and-pcos-3.jpg" width=390 height=325>
</amp-img>
превращается в
<div class="hidden-sm hidden-xs">
<img src="https://www.smartfertilitychoices.com/wp-content/uploads/2018/02/inositol-and-pcos-3.jpg" class="alignright" alt="Inositol and PCOS" width="390" height="325">
</div>
, а
<div class="hidden-md hidden-lg">
<picture>
<source srcset="https://www.smartfertilitychoices.com/wp-content/uploads/2018/02/inositol-and-pcos-3.jpg" media="(max-width: 980px)">
<img src="https://www.smartfertilitychoices.com/wp-content/uploads/2018/02/inositol-and-pcos-3.jpg" class="aligncenter" alt="Inositol and PCOS" width="390" height="325">
</picture>
</div>
<amp-img media="(max-width: 980px)" src="https://www.smartfertilitychoices.com/wp-content/uploads/2018/02/inositol-and-pcos-3.jpg" width=390 height=325 layout="responsive">
</amp-img>
превращается в
<div class="hidden-md hidden-lg">
<img src="https://www.smartfertilitychoices.com/wp-content/uploads/2018/02/inositol-and-pcos-3.jpg" class="aligncenter" alt="Inositol and PCOS" width="390" height="325">
</div>
- , и оба приведенных выше примера означают, что изображение идетчтобы показать дважды в усиленной версии поста в блоге, но будет продолжать нормально работать для обычной версии без усилителя.
и, наконец, это:
<picture>
<source srcset="https://www.smartfertilitychoices.com/wp-content/uploads/2018/02/inositol-and-pcos-8.jpg" media="(min-width: 980px)">
<img src="https://www.smartfertilitychoices.com/wp-content/uploads/2018/02/inositol-and-pcos-7.jpg" class="aligncenter" alt="Inositol and PCOS">
</picture>
<amp-img media="(min-width: 980px)" src="https://www.smartfertilitychoices.com/wp-content/uploads/2018/02/inositol-and-pcos-8.jpg" width=750 height=293 layout="responsive">
</amp-img>
<amp-img media="(max-width: 980px)" src="https://www.smartfertilitychoices.com/wp-content/uploads/2018/02/inositol-and-pcos-7.jpg" width=390 height=325 layout="responsive">
</amp-img>
витковв:
<img src="https://www.smartfertilitychoices.com/wp-content/uploads/2018/02/inositol-and-pcos-7.jpg" class="aligncenter" alt="Inositol and PCOS">
- , что означает, что только один вариант изображения показывает /inositol-and-pcos-7.jpg (мобильная версия).Я знаю, что, в частности, можно обойти эту проблему, просто разместив настольную версию изображения в этом месте, но я бы предпочел не делать этого на мобильных устройствах, если это возможно.У меня есть другие широкие изображения, настроенные для рабочего стола в других сообщениях блога, в которых есть текст, и их трудно прочитать, как только они уменьшены до размера мобильного телефона.
Если у кого-либо есть пониманиедругие способы встраивания изображений в запись блога, с возможностью показать / скрыть для настольных ПК против мобильных +, включая специально разработанные изображения.Спасибо!