نحن نطلق منتدى لمنتجنا، والذي تعمل تضميناته الخارجية بالفعل مع OneBox بعد السماح بإطارات iFrames منا.
الرابط المباشر إلى تضمين، يتم تحويله بشكل أنيق إلى نتيجة نقطة نهاية oembed الخاصة بنا.
الآن، قلقنا هو أولاً وقبل كل شيء أننا نرغب في ظهور الصور المصغرة عند تفعيل صور مصغرة لقائمة المواضيع. لست متأكدًا من سبب عدم التقاط الصورة المصغرة.
للإضافة، فإن السلوك الافتراضي يعمل في الغالب اليوم، باستثناء عدم دعم تضميناتنا الديناميكية. نرغب في تحميل JS بدلاً من إطار iFrame. لا شك أن هناك حلاً مختلفًا لهذا، وهو تغيير حجم إطار iFrame اختياريًا باستخدام بعض JS، لكننا لا نخطط لتنفيذ ذلك بشكل عام لتضمينات oEmbed على المدى القصير.
بعد بعض المناقشة مع فريق Discourse عبر البريد الإلكتروني، أقوم بالتحديث هنا.
الاكتشاف الرئيسي هو أن الصور المصغرة لا يتم تحميلها إذا تم عرض رابط يصبح onebox كـ iframe.
هذا يعني أن الرابط:
https://app.everviz.com/embed/N0dDTJaOQ
سيقوم ولن يقوم بعرض صورة مصغرة اعتمادًا على ما إذا كانت الـ iframes مسموح بها من النطاق (allowed iframes). الحل لهذا هو حقن iframe في المنشور بطريقة ما. لقد قمت بإنشاء إضافة تقوم بذلك، وتتأكد من تعيين display: none على الصورة، لمنع ظهورها في المنشور.
أتخيل أنه من الممكن تعميم هذا إما على:
لجميع الـ oneboxes العامة، قم بتحميل وإخفاء صورة بجانبها بصمت إذا كان get_oembed.thumbnail_url موجودًا.
من المحتمل أن يكون حلاً أفضل، إضافة دعم عام لاستخراج get_oembed.thumbnail_url وربطه بالمنشور، دون أن يكون جزءًا من منطقة cooked نفسها.
أنا لست سعيدًا جدًا بهذا السلوك المنبثق، أي، هل allowed iframes ممكّن أم لا؟ سيكون من الجيد لو استخرجت Discourse واستخدمت جميع الخصائص من نقطة نهاية oembed معينة عندما ترسل GET إليها لأول مرة.
لقد تأخرنا وقام Discourse بالفعل باسترداد الصور المصغرة وإنشائها.
نفتقد بعض السمات في صورتنا مما يتسبب في تفويت آلية إنشاء الصور المصغرة لها.
نأمل أن يكون الأمر الأخير. أحد الأشياء التي يجب ملاحظتها هنا هو أن الصورة لا يتم تحميلها أبدًا إلى مثيل Discourse الخاص بنا، ولكن ببساطة تتم الإشارة إليها من خادمنا الخاص.
هل جربت هذا؟ قد يسمح لك كتابة صندوق واحد محدد لحالتك بتوفير صورة صندوق واحد للمنشور المطبوخ؟ عندها ستعمل الصور المصغرة تلقائيًا.
ألاحظ أن صناديق اليوتيوب، على ما أعتقد، هي محتوى ثابت داخل الموقع، حتى تنقر على زر التشغيل ثم يعرض إطارًا مضمنًا. المحتوى المقدم قبل النقر يتضمن صورة يتم التقاطها ثم تصغيرها. من الواضح أن Discourse لا يمكنه القراءة من إطار مضمن، لذا فإن هذه التقنية نهج جيد.
ألاحظ أن مثالك يتضمن og:image في علامات الرأس وهو مثالي.
اقتراحي هو الابتعاد عن جافاسكريبت هنا والبدء في الطهي في Rails.
العيب الوحيد لهذا هو أن صورتك ستكون ثابتة حتى تعيد بناء المنشور، بافتراض أن الصورة المستهدفة تم تحديثها أيضًا. وبالتالي، إذا كنت تأمل في عرض صورة مصغرة متغيرة ديناميكيًا، فقد تحتاج إلى أن تكون أكثر إبداعًا.
كان كتابة إضافة (plugin) هو أول ما فعلته، وقد نجح ذلك بشكل رائع - بغض النظر عما إذا كنت أضعها في lib/onebox/engine أو كإضافة منفصلة. العيب هو أننا نستخدم خطة مستضافة، حيث لا يُسمح بالإضافات بشكل مفهوم في الخطط متعددة المستأجرين، مما يجعل التعديل في Rails خارج نطاق الاحتمالات.
هذا يتركنا مع واحدة من ثلاث فرص:
تشغيل نسختنا الخاصة
اختراق شيء ما من جانب العميل، إذا كان يمكن أن ينجح
ربما أحرزت بعض التقدم في هذا. بالنظر إلى:\n\napi.composerBeforeSave\n\nوالتي يتم التعامل مع ردها في composer.js. من هناك، يمكننا أن نرى أن طريقتي createPost و editPost تستدعيان getCookedHtml، والتي تعيد بشكل أساسي innerHTML الخاص بـ:\n\njs\nconst editorPreviewNode = document.querySelector(\n \"#reply-control .d-editor-preview\"\n);\n\n\nمما يعني أنه إذا قمنا بتعديل هذا المحدد، فقد نتمكن من فرض بعض HTML المكافئ لتحميل صورة عادية. ومع ذلك، يبدو أن تعديل editorPreviewNode.innerHTML لا يؤدي إلى أي تغيير على الإطلاق.\n\nلماذا هذا، أو ماذا يمكنني تعديله في composerBeforeSave للقيام بشيء مشابه؟
هذا منطقي بالنسبة لي إلى حد كبير، أعتقد أننا سنكون منفتحين على قبول طلب سحب (PR) إلى النواة لمحرك onebox لـ everviz.com (أو خدمات التصور المماثلة). ومع ذلك، سأتجنب إدراج وإخفاء صورة في المنشور cooked، هناك خيار أخف. سيبحث معالج المنشور الخاص بـ Discourse عن تحميل للعناصر التالية:
لذا، قد تعمل إضافة الصورة المصغرة كمرساة أسفل الإطار المضمن (iframe)؟ يمكنك إبقائها مرئية، أو إخفائها باستخدام فئة مثل “hidden”.
نعتذر عن هذا الالتباس، فقد بدا الإخراج مشابهاً لمحرك onebox الخاص بالصور.
الرابط المقترح (المزود بشكل صحيح بمعرف فريد عالمي) لا يعمل. وكذلك هذه الصورة التي سحبتها من جوجل (وأنا أكتب هنا كعلامة ربط). إذا كان لصق بعض HTML يعادل الحصول على إخراج onebox، فهذا يفسر نتائجنا.
آه، خطأي، أنت على حق، هذا النهج لا يعمل. عندما ننشئ صورًا مصغرة، نستخدم فقط الصور التي تم تنزيلها ولكن الصور المرتبطة في علامة ربط (anchor tag) لا يتم تنزيلها.
قد يكون البديل هنا هو إضافة شيء مشابه لما أوصى به @merefield إلى النواة (core)، ولكن مغلف كـ oneboxer عام لإطارات iframe المحملة بكسل (lazy-loaded). ربما إضافة إعداد موقع جديد lazy_loaded_iframes، ويمكن لـ onebox إخراج الصورة من علامة OG (والتي يجب أن تلتقطها الصور المصغرة)، وعند النقر عليها، يستبدل القليل من جافاسكريبت (JS) الصورة بإطار iframe الصحيح (مشابه لاستبدال إطار iframe الخاص بيوتيوب).
التفصيل الصعب هنا هو أن الصورة المستخدمة وإطار iframe يجب أن يكون لهما نفس الارتفاع، وإلا فقد يؤدي ذلك إلى قفزات غير مرغوب فيها عند التمرير/التنقل في المشاركات.
