Cajas de luz IFrame

This is a theme component that adds the ability to open iFrames in lightboxes.

Samples

This component adds an “expand” button on top of the iframes you enable it on.

Clicking the button will open the iframe in fullscreen in a lightbox.

Clicking either the dark area around the iframe or the x at the top right corner closes the lightbox. The same way it works for default image lightboxes.

Settings

There’s only one setting. You add the domains that you want to have this functionality on there.

:warning: Whatever domains you specify here also need to be whitelisted in the allowed_iframes site setting to show up in posts in the first place.

Usage examples:

Here’s a couple of examples besides the CodePen iframe above

Google forms iframe:

Embedding the entire weather.gov website:

Credit:

This component uses Noël Bossart’s fantastic Featherlight library (MIT license - 3kb gzip)

31 Me gusta

I suppose these iframes still also need to be activated in the allowed iframes site setting?

5 Me gusta

Correct, this component will not mess with any whitelisting settings at all.

In order for any iframe to show up in the cooked content of a post - expandable or not - it has to be on the list of allowed_iframes setting like you pointed out.

I’ll add a note about this to the topic.

5 Me gusta

@Johani is this component still functional? If so, any thoughts on why I am not getting the pop-out diagonal-arrows in the upper-right, but rather a blank/dead box?

Here is what I’ve tried:

  • Updated themes/components.
  • Made sure src links were white-listed in the component and the Discourse settings.
  • Tried a few different links, including Google Maps.
  • Tried several scenarios with the Media Overlay on/off + Lightbox alone on/off.

Below are some screenshots.

Thx!
-Patrick





image
image
image
image

Dear @Johani,

thank you very much for conceiving and maintaining this theme component.

After installing it on https://community.hiveeyes.org/ the other day, some users recently started to complain that the overall appearance of the head of the page looked different for them. They finally found out the reason was that they blocked cloudflare altogether, so all requests to https://cdnjs.cloudflare.com/ajax/libs/featherlight/1.7.13/featherlight.min.js would fail.

So, we are humbly asking if there would be a way for you to provide this component in a self-contained variant?

With kind regards,
Andreas.

3 Me gusta

Why is it desktop-only?

I had a bug this theme component, post contents weren’t showing.

Could I trigger open iframe in a any link simply?
User just see iframe only when click at link

1 me gusta

Welp… this one fell through the cracks. It’s been a while since it got any attention, and a lot has changed in Discourse.

Better late than never… :upside_down_face:

I just pushed an update that should fix all the problems.

It will be after you update.

The component is now self-contained with no external requests.

After you update, it will work on mobile too.

Should be fixed after you update

This is out of the scope of this component. You need a different component to handle that.

Apologies for the delay, and thanks for the feedback :+1:

7 Me gusta

¡Muchas gracias!

No hay necesidad de disculparse, es bueno ver que has podido dedicarle algo de atención, entre todas las otras cosas que suceden. Lo apreciamos mucho.

1 me gusta

¿Ya existe algún componente que pueda abrir un light box de iframe en un enlace de esa manera?

No estoy al tanto de ningún componente existente que haga eso, así que tendrías que crear uno o encargar ese trabajo en la categoría Marketplace.

Este componente temático comprueba iFrame en una publicación y compara su atributo src con una lista de fuentes elegibles proporcionada por el administrador en la configuración del componente. Si el dominio de la fuente coincide, agrega el botón lightbox. La visualización del lightbox es manejada por featherlight.js. Featherlight escucha los clics en elementos con el atributo data-featherlight. Si se hace clic en uno de esos, abre el lightbox con el contenido de ese iFrame.

Puedes hacer lo mismo con las etiquetas <a> en un componente diferente con un poco de esfuerzo. Si el href del enlace coincide con un dominio listado en la configuración del componente, ábrelo en un lightbox de iframe. De lo contrario, déjalo como un enlace normal. No querrás que todos los enlaces se abran en un iframe con lightbox.

La mayor parte del trabajo requerido ya está manejado por este componente, por lo que puedes simplemente hacer un fork duro y comenzar desde allí. No hay planes para agregar esa característica a este componente porque solo está destinado a manejar etiquetas iFrame en publicaciones.

3 Me gusta

Aquí hay un método para incluir un iFrame Lightbox dentro de un elemento de texto en línea en el que se puede hacer clic…

El Discourse Footnotes Plugin acepta HTML y Markdown dentro de las notas a pie de página emergentes.

Así que, por ejemplo, este código…

… genera esta nota a pie de página emergente en la que se puede hacer clic, que contiene un mini iFrame con el botón Expand content en la esquina superior derecha…

Para que esto funcione, he (en la configuración del sitio) habilitado tanto enable markdown footnotes como display footnotes inline

Luego agregué el nombre de dominio de ese sitio (microchic.com) a la lista de allowed iframes en la configuración del sitio…

… y también en la lista de iframe origin domains en la configuración del iFrame Lightbox Plugin…

Puedes probarlo en vivo aquí…

Hola, me preguntaba cómo formateas las publicaciones. Obtengo un cuadro en blanco usando

iframe src=" url" rodeado de < > Eso es incluso cuando se usa codepen.io que está en la lista blanca de iframes del sitio principal.

¿Sigue funcionando este componente? Solía funcionarme en el pasado, pero por alguna razón dejó de hacerlo.
Parece que la última actualización fue hace 3 años: hnb-ku/discourse-iframe-lightboxes (github.com) ¿Es razonable suponer que algo se rompió?

1 me gusta

Estaba funcionando en mayo, ya que lo usé aquí.

1 me gusta

Funciona en mi lado con la última versión de Discourse.

¿Hay algún error en la consola del navegador?

2 Me gusta

No puedo hacer que esto funcione, seguí la guía al pie de la letra y agregué el dominio tanto al componente del tema como a la configuración del sitio. Esto es lo que obtengo:

No hay errores registrados en la consola de desarrollador de JavaScript.

La configuración del sitio de iframes permitidos tiene el dominio de nivel superior:

https://example.biz/

La configuración del componente del tema lo tiene sin https, como en los ejemplos existentes:

example.biz

¿Alguna idea sobre cómo depurar?

1 me gusta

no hay errores en la consola.
Lo estoy usando con vistas previas de PDF: Inline PDF Previews - #116 by Alon1
Espero obtener las flechas de expansión encima del PDF

Pero simplemente no aparecen

¿Puedes probar este fork en su lugar?

URL: https://github.com/Arkshine/discourse-iframe-lightboxes
Rama: improve-compatibility

¡Tuviste suerte antes si funcionaba!

Ambos TCs usan la misma API para decorar una publicación, por lo que el orden en que los instales sería necesario. Además, la fuente del iframe se establece dinámicamente una vez que se descarga el PDF y puede que no esté disponible inmediatamente en este TC de IFrame Lighboxes.

Los cambios que hice son básicamente:

  • Busca elementos iframe en el siguiente ciclo de ejecución, por lo que se garantiza que el iframe estará disponible.
  • Espera a que el iframe se cargue para que puedas recuperar la URL de origen.

Avísame si funciona mejor. :+1:

4 Me gusta