Onebox-Bilder haben das falsche Seitenverhältnis

Ich habe dies mit Seitenlinks von ein paar verschiedenen WordPress-Seiten ausprobiert, und der Effekt ist derselbe:

Beide Seiten haben definitiv gültige OG-Tags. Bildquellen sind quadratisch. Wir geben keine Bildabmessungen in den OG-Tags an.

Das obige Beispiel funktioniert im Facebook Sharing Debugger und iFramely einwandfrei. Klicken Sie auf den Link unten, um es auf iFramely zu sehen.

Ich habe alle Einstellungen für Onebox und Bilder überprüft, aber ich sehe nichts, das relevant zu sein scheint.

Ich habe die Anleitungen zur Fehlerbehebung und Konfiguration von Onebox hier durchgesehen, aber nichts hat geholfen.

Ich vermute, es muss etwas in unseren Discourse-Einstellungen oder in Discourse selbst sein.

1 „Gefällt mir“

Mal sehen, wie dieser Link auf dieser Discourse-Instanz aussieht:

Als ich das eingefügt habe, zeigte die Onebox in der Vorschau kurz das Bild im richtigen Seitenverhältnis an. Ein bis zwei Sekunden später wurde es gequetscht.

Was auch immer los ist, ist also nicht auf unsere Discourse-Instanz beschränkt. Ich schätze, wir müssen möglicherweise die Bildabmessungen in den OG-Tags angeben, aber ich dachte nicht, dass das erforderlich sei.

2 „Gefällt mir“

Gibt es also… Fortschritte? Es passiert immer noch. Wenn es eine Art Workaround gibt, lassen Sie es mich wissen. Wenn wir etwas falsch machen, lassen Sie es mich wissen.

1 „Gefällt mir“

Statusbericht: Dies passiert immer noch. Wenn ich einen Link in ein neues Thema einfüge, sieht das zugehörige Bild zunächst in der Vorschau gut aus. Aber sobald ich Enter oder die Leertaste drücke, wird das Bild gequetscht. Ich habe die Onebox-Fehlerbehebungsschritte erneut überprüft und alle überschriebenen Einstellungen nochmals durchgesehen, ohne Erfolg. Das ist verrückt.

1 „Gefällt mir“

Dieses CSS könnte als suboptimal oder als eine Art Kompromiss betrachtet werden. Ich bin unterwegs, aber vielleicht erzwingt es derzeit ein Seitenverhältnis von 16:9. Nicht ideal für quadratische Logos :slight_smile:

Ich frage mich, ob die Höhe auf auto gesetzt werden könnte? (Obwohl das Herausforderungen für Hochformatbilder darstellen könnte)

Auf welches CSS beziehen Sie sich? Ich meine, Sie haben vielleicht Recht, aber ich versuche herauszufinden, ob es etwas ist, das ich auf unserer Discourse-Instanz beheben kann, oder ob es etwas in der Discourse-Quelle ist.

Zurück am Schreibtisch:

image

Das ist vermutlich ein kodierter Stil, daher müssten Sie den Code untersuchen, um herauszufinden, wie er festgelegt wird.

Wenn 600 / 600 ist Ihr Logo quadratisch…

Hier ist er:

1 „Gefällt mir“

Interessant. Da ist Code drin, der Annahmen über ein Bild macht, wenn es quadratisch ist. Vielleicht probiere ich ein nicht-quadratisches Bild.

Nicht-quadratisches Bild mit ansonsten gleichen Parametern verwendet: keine Seitenverhältnisprobleme. Ich werde weiter experimentieren.

Das würde es:

image

Verwendet die ursprünglichen Abmessungen und das Seitenverhältnis.

Dies wird während des Kochvorgangs entfernt.

1 „Gefällt mir“

Die Dimensionen stammen von oembed:

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

Welches hat:

Ich denke, der Fehler hier ist, dass wenn der Typ “rich” ist und wir nicht die gesamte Präsentation aus der oembed html-Payload abrufen, wir das Hinzufügen von Dimensionen überspringen sollten, da wir an diesen Daten nicht interessiert sind.

Dies behebt das Problem:

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

Ich bin mir jedoch nicht sicher, welche anderen Nebenwirkungen dies hätte. Ich markiere das Mitglied-Erfahrungsteam, das sich dies im nächsten Monat ansehen wird.

Ich bin zurückhaltend, einfach meinen Patch hinzuzufügen, da es hier viele Ebenen und Komplexität gibt. Jemand muss sicherstellen, dass wir den Patch auf eine sehr sichere und getestete Weise hinzufügen können.


Dies ist pri-medium, da die Auswirkungen dieses Fehlers angesichts der Tatsache, dass wp-json dies anzeigt, ziemlich weitreichend sind.

1 „Gefällt mir“

Schön! Diese oembed-Daten scheinen die entscheidende Spur zu sein. Interessanterweise spricht die Dokumentation von Wordpress (Software) nur über oembed in Bezug auf Wordpress-Sites, die Inhalte von anderen Sites einbetten, nicht umgekehrt. Die Dokumentation von wordpress.com (Dienst) besagt jedoch: „Jeder Beitrag, jede Seite, jeder Anhang und jedes VideoPress-Video, das auf WordPress.com gehostet wird, unterstützt das oEmbed-Format über unsere öffentliche oEmbed-API.“ Daher ist es wahrscheinlich sicher anzunehmen, dass die Wordpress-Software dies standardmäßig tut.

Ich habe alle Wordpress-Einstellungen überprüft und nichts gefunden, das sich auf oembed bezieht. Es scheint also, dass alle von Wordpress getroffenen Annahmen in den Code integriert sind.

Die Wordpress oembed API erklärt auch, warum ich nirgendwo im Seitenquelltext einen Verweis auf die Abmessungen 600/338 gefunden habe, was ich zuvor für verwirrend hielt.

Ich stimme zu, dass jede mögliche Behebung dieses Problems in Discourse viele (möglicherweise unerwünschte) Auswirkungen haben könnte und vor der Veröffentlichung getestet werden muss.

Außerdem bin ich mir nicht einmal sicher, ob dies ein Discourse-Problem ist. Die fehlerhafte ‘338’-Abmessung stammt von Wordpress. Mir scheint, es sollte eine Möglichkeit in Wordpress geben, Standardeinstellungen im Zusammenhang mit oembed wie diese zu überschreiben. Ich plane, nach einem Wordpress-Plugin zu suchen, das mehr Kontrolle über oembed ermöglicht.

Danke!

Andererseits, da diese Links in iFramely und anderswo gut aussehen, ist dies vielleicht wirklich etwas, das in Discourse geändert werden sollte.