صور Onebox لها نسبة عرض إلى ارتفاع غير صحيحة

لقد جربت هذا مع روابط صفحات من موقعي ووردبريس مختلفين، والتأثير هو نفسه:

كلا الموقعين لديهما بالتأكيد علامات OG صالحة. مصادر الصور مربعة. نحن لا نحدد أبعاد الصور في علامات OG.

المثال أعلاه يعمل بشكل جيد في مصحح أخطاء مشاركة فيسبوك و iFramely. انقر فوق الرابط أدناه لرؤيته على iFramely.

لقد راجعت جميع إعدادات onebox والصور ولكنني لا أرى شيئًا يبدو ذا صلة.

لقد مررت بأدلة استكشاف الأخطاء وإصلاحها وتكوين onebox هنا، ولكن لم يساعد شيء.

أعتقد أنه يجب أن يكون شيئًا ما في إعدادات Discourse الخاصة بنا، أو في Discourse نفسه.

إعجاب واحد (1)

دعنا نرى كيف يبدو هذا الرابط في مثيل Discourse هذا:

عندما لصقت ذلك، أظهر الـ onebox في المعاينة الصورة بنسبة العرض إلى الارتفاع الصحيحة لفترة وجيزة. بعد ثانية أو ثانيتين، تم ضغطها.

إذًا، مهما كان ما يحدث لا يقتصر على مثيل Discourse الخاص بنا. أعتقد أننا قد نحتاج إلى تحديد أبعاد الصورة في علامات OG، لكنني لم أعتقد أن ذلك مطلوب.

إعجابَين (2)

إذًا… هل هناك أي تقدم في هذا الأمر؟ لا يزال يحدث. إذا كان هناك أي حل بديل، فأخبرني. إذا كنا نفعل شيئًا بشكل غير صحيح، فأخبرني.

إعجاب واحد (1)

تقرير الحالة: لا يزال هذا يحدث. عندما ألصق رابطًا في موضوع جديد، تبدو الصورة المرتبطة به جيدة في البداية في المعاينة. ولكن بمجرد الضغط على Enter أو المسافة، تصبح الصورة مضغوطة. لقد تحققت من خطوات استكشاف أخطاء onebox مرة أخرى، وراجعت مرة أخرى جميع الإعدادات التي تم تجاوزها، دون جدوى. هذا جنون.

إعجاب واحد (1)

قد يُعتبر هذا الـ CSS دون المستوى الأمثل أو نوعًا من الحلول الوسط. أنا أعمل بسرعة ولكن ربما يفرض حاليًا نسبة 16:9. ليس جيدًا للشعارات المربعة :slight_smile:

أتساءل عما إذا كان يمكن تعيين الارتفاع على تلقائي؟ (على الرغم من أن هذا قد يمثل تحديات للصور الرأسية)

أي CSS تقصد؟ أعني، ربما أنت على حق، لكنني أحاول تحديد ما إذا كان شيئًا يمكنني إصلاحه على نسخة Discourse الخاصة بنا، أم أنه شيء في مصدر Discourse.

بالعودة إلى المكتب:

صورة

من المفترض أن يكون هذا نمطًا مشفرًا، لذا ستحتاج إلى التعمق في الكود لمعرفة كيفية تعيينه.

عندما يكون 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

لكنني لست متأكدًا من الآثار الجانبية الأخرى التي قد تنجم عن ذلك، وسأقوم بالإشارة إلى فريق تجربة الأعضاء الذي سيقوم بالاطلاع على هذا الأمر خلال الشهر القادم.

أنا متردد في مجرد إضافة التصحيح الخاص بي لأنه توجد طبقات كثيرة هنا وتعقيد، يحتاج شخص ما إلى التأكد من أننا قادرون على إضافة التصحيح بطريقة آمنة ومختبرة للغاية.


هذا ذو أولوية متوسطة إلى عالية لأن تأثير هذا الخطأ واسع جدًا نظرًا لأن wp-json يكشف عنه.

إعجاب واحد (1)

رائع! تبدو بيانات oembed هذه هي الدليل القاطع. ومن المثير للاهتمام أن وثائق ووردبريس (البرنامج) تتحدث فقط عن oembed من حيث قيام مواقع ووردبريس بتضمين محتوى من مواقع أخرى، وليس العكس. ومع ذلك، تقول وثائق wordpress.com (الخدمة) “كل منشور وصفحة وملحق وفيديو VideoPress مستضاف على WordPress.com يدعم تنسيق oEmbed من خلال واجهة برمجة تطبيقات oEmbed العامة الخاصة بنا.” لذلك من الآمن افتراض أن برنامج ووردبريس يقوم بذلك افتراضيًا.

لقد راجعت جميع إعدادات ووردبريس، ولم أتمكن من العثور على أي شيء متعلق بـ oembed، لذا يبدو أن أي افتراضات قام بها ووردبريس مدمجة في الكود.

تشرح واجهة برمجة تطبيقات oembed الخاصة بووردبريس أيضًا سبب عدم وجود أي إشارة إلى أبعاد 600/338 في أي مكان في مصدر الصفحة، وهو ما وجدته محيرًا سابقًا.

أتفق على أن أي إصلاح محتمل لهذا في Discourse قد يكون له العديد من الآثار المتتابعة (غير المرغوب فيها المحتملة)، ويجب اختباره قبل إصداره.

أيضًا، لست متأكدًا حتى مما إذا كانت هذه مشكلة في Discourse. البعد الخاطئ ‘338’ قادم من ووردبريس. يبدو لي أنه يجب أن تكون هناك طريقة في ووردبريس لتجاوز أي افتراضات متعلقة بـ oembed مثل هذه. أخطط للبحث عن إضافة ووردبريس تسمح بمزيد من التحكم في oembed.

شكرًا!

من ناحية أخرى، وبما أن هذه الروابط تبدو جيدة في iFramely وأماكن أخرى، فربما يكون هذا بالفعل شيئًا يجب تغييره في Discourse.