Изображения в Onebox с неверным соотношением сторон, когда oEmbed указывает размеры для встраивания в богатый HTML

Я пробовал это с ссылками на страницы с нескольких разных сайтов на WordPress, и результат одинаковый:

На обоих сайтах точно есть корректные OG-теги. Источники изображений квадратные. Мы не указываем размеры изображений в OG-тегах.

Пример выше отлично работает в отладчике обмена в Facebook и в iFramely. Нажмите на ссылку ниже, чтобы посмотреть результат в iFramely.

Я просмотрел все настройки onebox и изображений, но не нашёл ничего, что могло бы иметь отношение к проблеме.

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

Полагаю, дело должно быть в наших настройках Discourse или в самом Discourse.

1 лайк

Давайте посмотрим, как эта ссылка выглядит в нашем экземпляре Discourse:

Когда я вставил её, превью с onebox на мгновение показало изображение с правильными пропорциями. Спустя секунду-другую оно сплющилось.

Значит, проблема не ограничивается нашим экземпляром Discourse. Похоже, нам нужно указать размеры изображения в мета-тегах Open Graph, хотя я не думал, что это обязательно.

2 лайка

Итак… есть ли какие-то успехи по этому вопросу? Проблема всё ещё возникает. Если есть какое-то обходное решение, дайте знать. Если мы что-то делаем неправильно, тоже сообщите.

1 лайк

Отчет о состоянии: проблема всё ещё сохраняется. Когда я вставляю ссылку в новую тему, связанное изображение изначально выглядит нормально в предварительном просмотре. Но как только я нажимаю Enter или пробел, изображение сжимается. Я ещё раз проверил шаги по устранению неполадок onebox и снова пересмотрел все переопределённые настройки, но безрезультатно. Это просто безумие.

1 лайк

Этот CSS можно считать неоптимальным или, возможно, это своего рода компромисс. Я на бегу, но, возможно, сейчас принудительно устанавливается соотношение 16:9. Не очень хорошо для квадратных логотипов :slight_smile:

Интересно, можно ли установить высоту в auto? (Хотя это может создать проблемы для портретных изображений)

Какую CSS вы имеете в виду? Я имею в виду, возможно, вы правы, но я пытаюсь понять, можно ли это исправить на нашем экземпляре Discourse или это проблема в исходном коде Discourse.

Вернулся к работе:

image

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

Когда 600 / 600, ваш логотип квадратный…

Вот ссылка:

1 лайк

Интересно. Там есть код, который делает предположения об изображении, если оно квадратное. Возможно, я попробую изображение неквадратной формы.

Неквадратное изображение, при остальных неизменных условиях: проблем с соотношением сторон нет. Буду продолжать экспериментировать.

Это будет так:

image

Используются оригинальные размеры и пропорции.

Это удаляется в процессе обработки.

1 лайк

Размеры берутся из oembed:

https://hookproductivity.com/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fhookproductivity.com%2Fhelp%2Fintegration%2Fother-app-developers%2F

В ответе содержится:

Я полагаю, что ошибка заключается в следующем: если тип — “rich”, и мы не извлекаем всю презентацию из полезной нагрузки html oembed, то мы должны пропустить добавление размеров, так как эти данные нам не интересны.

Это исправляет проблему:

diff --git a/lib/onebox/engine/standard_embed.rb b/lib/onebox/engine/standard_embed.rb
index e3175d6247..fc8c300d81 100644
--- a/lib/onebox/engine/standard_embed.rb
+++ b/lib/onebox/engine/standard_embed.rb
@@ -159,8 +159,9 @@ module Onebox
         @json_ld ||= Onebox::JsonLd.new(html_doc)
       end
 
-      def set_from_normalizer_data(normalizer)
+      def set_from_normalizer_data(normalizer, skip_dimensions: false)
         normalizer.data.each do |k, _|
+          next if skip_dimensions && k.in?(%i[width height])
           v = normalizer.public_send(k)
           @raw[k] ||= v unless v.nil?
         end
@@ -179,7 +180,8 @@ module Onebox
 
       def set_oembed_data_on_raw
         oembed = get_oembed
-        set_from_normalizer_data(oembed)
+        skip_dimensions = oembed.data[:type] == "rich"
+        set_from_normalizer_data(oembed, skip_dimensions:)
       end
 
       def set_json_ld_data_on_raw

Однако я не уверен, какие ещё побочные эффекты это может вызвать, поэтому отмечаю команду member-experience, которая рассмотрит это в течение следующего месяца.

Я не хочу просто добавить свой патч, так как здесь много слоёв и сложности. Кто-то должен убедиться, что мы сможем внедрить этот патч максимально безопасно и с должным тестированием.


Приоритет — средний, так как влияние этой ошибки довольно широкое, учитывая, что wp-json предоставляет эти данные.

1 лайк

Отлично! Эти данные oEmbed действительно выглядят как ключевое доказательство. Интересно, что в документации к программному обеспечению WordPress речь об oEmbed идёт только в контексте встраивания контента с других сайтов на сайты WordPress, но не наоборот. Однако в документации сервиса wordpress.com сказано: «Каждая запись, страница, вложение и видео VideoPress, размещённые на WordPress.com, поддерживают формат oEmbed через наш публичный API oEmbed». Следовательно, можно с уверенностью предположить, что программное обеспечение WordPress делает это по умолчанию.

Я изучил все настройки WordPress, но не нашёл ничего, связанного с oEmbed. Похоже, что любые предположения, заложенные в WordPress, вшиты непосредственно в код.

API oEmbed в WordPress также объясняет, почему в исходном коде страницы нигде не упоминаются размеры 600/338, что ранее меня сильно озадачивало.

Я согласен, что любое возможное исправление этой проблемы в Discourse может иметь множество (возможно, нежелательных) побочных эффектов, и его необходимо протестировать перед выпуском.

Кроме того, я даже не уверен, что это проблема Discourse. Неверный размер «338» исходит от WordPress. Мне кажется, что в WordPress должен быть способ переопределить такие стандартные настройки, связанные с oEmbed. Я планирую поискать плагин для WordPress, позволяющий более гибко управлять oEmbed.

Спасибо!

С другой стороны, раз эти ссылки выглядят нормально в iFramely и в других местах, возможно, это действительно то, что нужно изменить в Discourse.

Этот случай был упущен ранее, но теперь он должен быть исправлен благодаря этому изменению:

Эта тема была автоматически закрыта через 5 дней. Новые ответы больше не принимаются.