صناديق الظل لـ IFRAMEs

ندير موقعًا مجتمعيًا للمعلمين الذين يستخدمون منهج Bootstrap لتدريس علوم الحاسوب داخل فصول الرياضيات والعلوم والدراسات الاجتماعية التقليدية. بيئة التطوير المتكاملة (IDE) لدينا تعتمد على السحابة، مما يتيح لنا دمج نسخة منها داخل منشور على Discourse — وهذا أمر مذهل للغاية، وقد كنا متحمسين بالفعل للانتقال إلى هذه المنصة بناءً على هذه الميزة وحدها. :slight_smile:

ومع ذلك، لدينا الكثير من المحتوى الذي نود دمجه بهذه الطريقة، وبعضه أوسع من عرض المنشور المسموح به. لم يكن تخصيص CSS للسماح بمنشورات أوسع مفيدًا، وفي النهاية، ما أتمناه حقًا هو أن تُعامل إطارات الويب (IFRAMEs) بنفس طريقة معالجة الصور: يُعرض مصغر للصورة، وعند النقر عليه يفتح نافذة منبثقة (shadowbox) بعرض نافذة المتصفح بالكامل.

لم أتعامل من قبل مع تطوير إضافات Discourse، لكن يمكنني أيضًا تخيل وجود امتداد Onebox يقوم بأخذ عناوين URL تطابق نمطًا معينًا ويولد الترميز المناسب. ربما توجد طريقة أسهل؟ هل هناك أي شخص آخر واجه حالة استخدام مشابهة؟

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

Maybe @Johani would have some ideas. In general heavy embedding of live content is a bad idea, whereas “click-to-load” like codepen does is more ideal:

https://codepen.io/adrianroworth/pen/OpeyZq

7 إعجابات

Thank you both for the quick reply!

@craigomez, I might be misreading your post, but it sounds like you’re suggesting I modify the source of the page I’m embedding, in order to have links in that page open in a shadowbox. Is that right? If so, let me clarify that I don’t want that – rather, I want the enclosing IFRAME (a node in the rendered topic, which just happens to contain another page) to be in a shadowbox. And if that’s not right, and I misunderstood, my apologies. :slight_smile:

@codinghorror, click-to-load is a mighty fine solution. Happy to pursue that option, if there’s a resource somewhere to follow?

It would be super cool if you could maximize without needing to visit the site, I wonder if this is a feature @chriscoyier would be interested in adding, not sure how it would be wrangled, but it makes sense for this example you made, for sure.

6 إعجابات

I’d love to make our editor click-to-load. Is there an example somewhere for how this was done with CodePen? I’m assuming whitelisting WeScheme.org in our installation is the least of the steps needed.

check out this previous post/topic for additional context:

Seems like that is done on the codepen side?

Make the preview “Click-to-Load” : Check the checkbox next to “use click-to-load” to enable the preview version for your embedded Pen. Preview embeds show a static image preview of your Pen with a “Run Pen” button. When your visitors click the button, the Pen will load.

via: https://blog.codepen.io/documentation/features/embedded-pens/

إعجابَين (2)

This is now possible with a theme component:

6 إعجابات

Very interesting! I was able to install the theme using the linked directions (thanks!), but I don’t see a UI for editing the theme settings in order to whitelist my site. Any suggestions for where I should be looking? Thanks in advance!

If you’ve installed the theme and cannot see the settings area, then that probably means you’re on a version of Discourse that does not support theme settings.

Even if you’re on the stable branch, the latest release, 2.0, supports theme settings so I would suggest you update Discourse and try again.

3 إعجابات

Success! Thanks so much, @Johani! And thanks to everyone else who chimed in with suggestions and advice!

4 إعجابات

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.