Изображение HTML исчезает в сообщениях блога (и версиях усилителя) в Wordpress

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

Вот примеры того, какие части исчезают, и что происходит, когда это происходит:

<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 (мобильная версия). Я знаю, что, в частности, можно обойти эту проблему, просто разместив настольную версию изображения в этом месте, но я бы предпочел не делать этого на мобильных устройствах, если это возможно. У меня есть другие широкие изображения, настроенные для рабочего стола в других постах блога, в которых есть текст, и их трудно прочитать, как только они уменьшены до размера мобильного телефона.

Если у кого-то есть понимание других способов встраивания изображений в сообщение блога, с возможностью показать / скрыть для ПК и мобильных устройств + в том числе специально разработанные изображения. Спасибо!

0 ответов

Другие вопросы по тегам