# Problemas con miniaturas de Soundcloud y YouTube oneboxes

**URL:** https://meta.discourse.org/t/problems-with-thumbnails-from-soundcloud-and-youtube-oneboxes/152511
**Category:** Support
**Created:** [24 Mayo, 2020 10:32 UTC](https://meta.discourse.org/t/problems-with-thumbnails-from-soundcloud-and-youtube-oneboxes/152511 "2020-05-24T10:32:53Z")
**Posts on this page:** 13
**Page:** 1

<div class="post-metadata">

### Author: ![icaria36](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/icaria36/32/426431_2.png) [@icaria36](https://meta.discourse.org/u/icaria36)
#### Post date: [24 Mayo, 2020 10:32 UTC](https://meta.discourse.org/t/problems-with-thumbnails-from-soundcloud-and-youtube-oneboxes/152511/1 "2020-05-24T10:32:53Z")

</div>

Estamos utilizando [Topic List Previews (legacy)](https://meta.discourse.org/t/topic-list-previews/101646) con tarjetas en [nuestra página principal](https://the.eqlzr.org/). Ayer tuvimos que reconstruir nuestra instancia por razones ajenas a TPL. Éramos conscientes del cambio en el backend de miniaturas en el núcleo de Discourse y sabíamos que la actualización podría causar problemas con las miniaturas. Aun así, era necesario hacerlo. 🙂

De todos modos, después de la reconstrucción (incluida la actualización de Postgres), todas las miniaturas procedentes de oneboxes desaparecieron. Sin problema, volvimos a hornear todos los mensajes y entonces la mayoría de las miniaturas reaparecieron (bien), pero no todas (intrigante y malo). Volvimos a hornear un par de veces más por si acaso, pero hay algunos mensajes que no muestran su miniatura en la página principal, incluso si los oneboxes se renderizan sin problemas en la página del tema.

Hasta ahora hemos detectado dos patrones:

- Los oneboxes de Soundcloud se renderizan sin problemas, pero la miniatura falta sistemáticamente (“Seleccionar miniatura” no muestra ninguna miniatura) y ninguna reconstrucción HTML lo solucionará. Por ejemplo, revisa [https://the.eqlzr.org/t/female-pressure-podcast-episode-60-inverno/89](https://the.eqlzr.org/t/female-pressure-podcast-episode-60-inverno/89).
- Algunas miniaturas de los oneboxes de YouTube faltaban en la página principal (solo algunas) y luego, después de visitar la página del tema, aparecían mágicamente en la página principal. Sin embargo…

Hay un tema (y solo uno, el último) con un onebox de YouTube que no genera miniatura; no tenemos idea de por qué: [https://the.eqlzr.org/t/look-mom-no-computer-diy-synths/75](https://the.eqlzr.org/t/look-mom-no-computer-diy-synths/75).

---

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [24 Mayo, 2020 10:37 UTC](https://meta.discourse.org/t/problems-with-thumbnails-from-soundcloud-and-youtube-oneboxes/152511/2 "2020-05-24T10:37:58Z")

</div>

Como se discutió, la lógica de generación de miniaturas ahora está integrada en el núcleo.

Lo que TLP solía tener que hacer ya no es necesario, en gran medida.

Como referencia, los criterios principales para la inclusión son los siguientes:

```plaintext
  def extract_images_for_post
    # todas las imágenes con un atributo src
    @doc.css("img[src]") -
    # menos emojis
    @doc.css("img.emoji") -
    # menos imágenes dentro de citas
    @doc.css(".quote img") -
    # menos iconos de sitio de onebox
    @doc.css("img.site-icon") -
    # menos avatares de onebox
    @doc.css("img.onebox-avatar") -
    # menos imágenes pequeñas de onebox (las imágenes grandes son .aspect-image-full-size)
    @doc.css(".onebox .aspect-image img")
  end

```

de [discourse/lib/cooked\_post\_processor.rb at main · discourse/discourse · GitHub](https://github.com/discourse/discourse/blob/master/lib/cooked_post_processor.rb)

TLP modifica esto ligeramente, pero solo para relajarlo. Me gustaría eliminar esta sobrescritura por completo si es posible:

```plaintext
  def extract_images_for_post
    # todas las imágenes con un atributo src
    @doc.css("img[src]") -
    # menos emojis
    @doc.css("img.emoji") -
    # menos imágenes dentro de citas
    @doc.css(".quote img") -
    # menos iconos de sitio de onebox
    @doc.css("img.site-icon") -
    # menos avatares de onebox
    @doc.css("img.onebox-avatar") # Criterios más amplios que el núcleo de Discourse
  end

```

de [https://github.com/paviliondev/discourse-topic-previews/blob/master/lib/cooked\_post\_processor\_edits.rb](https://github.com/paviliondev/discourse-topic-previews/blob/master/lib/cooked_post_processor_edits.rb)

Como pueden ver, estoy reduciendo la cantidad de exclusiones permitiendo imágenes pequeñas de onebox según lo definido por el núcleo.

En lugar de mantener esto en TLP, sería bueno lograr un consenso y paridad en todos los casos de uso, para no tener que mantenerlo en absoluto en el plugin.

Esto también es relevante para ti @Arkshine

---

<div class="post-metadata">

### Author: ![icaria36](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/icaria36/32/426431_2.png) [@icaria36](https://meta.discourse.org/u/icaria36)
#### Post date: [24 Mayo, 2020 10:52 UTC](https://meta.discourse.org/t/problems-with-thumbnails-from-soundcloud-and-youtube-oneboxes/152511/3 "2020-05-24T10:52:01Z")

</div>

Gracias @merefield, esto es muy informativo.

Solo quiero decir que la miniatura anterior de los oneboxes de Soundcloud ofrecía **excelentes** resultados, y este retroceso es realmente molesto para un sitio centrado en la música como el nuestro. 🙂

No me importa si nos saltamos una miniatura de YouTube de vez en cuando.

Me pregunto cómo evolucionará esto. Estoy de acuerdo en que el objetivo es ajustar finamente la generación de miniaturas en el núcleo de Discourse para encontrar el mejor punto de equilibrio entre las muchas necesidades y deseos. Gracias a todos los que están trabajando en esto.

---

<div class="post-metadata">

### Author: ![david](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/david/32/157490_2.png) [@david](https://meta.discourse.org/u/david)
#### Post date: [24 Mayo, 2020 11:02 UTC](https://meta.discourse.org/t/problems-with-thumbnails-from-soundcloud-and-youtube-oneboxes/152511/4 "2020-05-24T11:02:15Z")

</div>

> [@icaria36](#):
>
> Hay un tema (y solo uno, el último) con un onebox de YouTube que no genera una miniatura; no tengo idea de por qué.

A primera vista, no creo que eso sea un **onebox** de YouTube. Sospecho que alguien ha utilizado el código de incrustación de YouTube en bruto en la publicación. Si lo conviertes en un onebox, la miniatura debería funcionar.

> [@icaria36](#):
>
> Los oneboxes de Soundcloud se renderizan sin problemas, pero la miniatura falta sistemáticamente.

¿Esto funcionaba antes con el antiguo plugin TLP? Los oneboxes de Soundcloud son iframes, así que me cuesta ver cómo podríamos extraer una imagen de miniatura de ellos, incluso actualizando nuestros criterios de selección. @merefield, ¿tenía TLP alguna lógica específica para Soundcloud en algún lugar?

---

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [24 Mayo, 2020 11:26 UTC](https://meta.discourse.org/t/problems-with-thumbnails-from-soundcloud-and-youtube-oneboxes/152511/5 "2020-05-24T11:26:42Z")

</div>

Sí, había cierta lógica personalizada alrededor de los oneboxes, aunque esto no era exclusivo de SoundCloud:

```plaintext
    if @has_oneboxes
      cooked = PrettyText.cook(@post.raw)

      if img
        ## Necesitamos algo más específico para identificar la imagen
        img_id = img
        src = img.attribute("src").to_s
        img_id = src.split('/').last.split('.').first if src
      end

      prior_oneboxes = []
      Oneboxer.each_onebox_link(cooked) do |url, element|
        if !img || (img && cooked.index(element).to_i < cooked.index(img_id).to_i)
          html = Nokogiri::HTML::fragment(Oneboxer.cached_preview(url))
          prior_oneboxes = html.css('img')
        end
      end

      if prior_oneboxes.any?
        prior_oneboxes = prior_oneboxes.reject do |html|
          class_str = html.attribute('class').to_s
          class_str.include?('site-icon') || class_str.include?('avatar')
        end

        if prior_oneboxes.any? && validate_image_for_previews(prior_oneboxes.first)
          img = prior_oneboxes.first
        end
      end
   end

```

Esto se ha eliminado para delegar en la lógica central.

---

<div class="post-metadata">

### Author: ![icaria36](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/icaria36/32/426431_2.png) [@icaria36](https://meta.discourse.org/u/icaria36)
#### Post date: [24 Mayo, 2020 11:33 UTC](https://meta.discourse.org/t/problems-with-thumbnails-from-soundcloud-and-youtube-oneboxes/152511/6 "2020-05-24T11:33:19Z")

</div>

> [@david](#):
>
> A primera vista, no creo que sea un **onebox** de YouTube. Sospecho que alguien usó el código de incrustación crudo de YouTube en el post. Si lo conviertes en un onebox, la miniatura debería funcionar.

Ah, no se me ocurrió revisar el código fuente. 🙂

Era un onebox, pero la URL tenía un argumento extra:

`https://www.youtube.com/watch?v=4T6J-K8_yk4&list=PLluPQLh1xzlL2agiCCQFClcsutli90Qnz`

Lo cambié a la URL simple:

`https://www.youtube.com/watch?v=4T6J-K8_yk4`

No hubo un cambio inmediato. Después de reconstruir el HTML tampoco hubo un cambio inmediato, pero luego fui a verificar Sidekiq y vi un trabajo relacionado programado. Después de esperar pacientemente 4 minutos, la miniatura ahora está disponible y se muestra en la página principal. Gracias @david por una respuesta tan rápida, ¡y en un domingo!

> [@david](#):
>
> ¿Esto solía funcionar con el antiguo plugin TLP?

Absolutamente. Lamentablemente, no tomé ninguna captura de pantalla. La página principal mostraba la imagen a la izquierda del onebox.

---

<div class="post-metadata">

### Author: ![david](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/david/32/157490_2.png) [@david](https://meta.discourse.org/u/david)
#### Post date: [24 Mayo, 2020 11:36 UTC](https://meta.discourse.org/t/problems-with-thumbnails-from-soundcloud-and-youtube-oneboxes/152511/7 "2020-05-24T11:36:56Z")

</div>

> [@icaria36](#):
>
> Era un onebox, pero la URL tenía un argumento adicional

Interesante, lo revisaré la próxima semana. Creo que debería seguir funcionando, incluso con un argumento adicional.

> [@merefield](#):
>
> lógica personalizada alrededor de los oneboxes

Ah, ya veo, así que extrajiste el HTML de **vista previa** del Onebox y obtuviste las miniaturas de ahí. Para SoundCloud, eso proporciona una miniatura 👍

---

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [24 Mayo, 2020 11:39 UTC](https://meta.discourse.org/t/problems-with-thumbnails-from-soundcloud-and-youtube-oneboxes/152511/9 "2020-05-24T11:39:07Z")

</div>

Sí, esto se basa en el maravilloso hack de @angus 😃 ¡No me hago responsable! Aunque funciona muy bien.

ACTUALIZACIÓN: En realidad, miento, ¡mis huellas dactilares también están por todas partes! Escribí parte de este código hace tanto tiempo que lo había olvidado, ¡fue en 2015!

> <https://github.com/merefield/discourse-topic-previews-sidecar/commit/d2bdde786506acd4de9ccfde8bd4ef2dc68a1022>

---

<div class="post-metadata">

### Author: ![david](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/david/32/157490_2.png) [@david](https://meta.discourse.org/u/david)
#### Post date: [1 Junio, 2020 09:15 UTC](https://meta.discourse.org/t/problems-with-thumbnails-from-soundcloud-and-youtube-oneboxes/152511/10 "2020-06-01T09:15:23Z")

</div>

Ambos son problemas complicados y, por ahora, creo que dejaremos el comportamiento como está. Quizás podamos añadir algunas mejoras en el futuro. He creado algunos temas de #Contribute > Feature para seguir el progreso.

Para la diferencia con YouTube, consulta:

> [@Agregar miniaturas a URLs de listas de reproducción de YouTube](https://meta.discourse.org/t/add-thumbnails-for-youtube-playlist-urls/152431/6):
>
> Para los videos normales de YouTube, utilizamos un sistema de incrustación personalizado. Esto no admite la interfaz de usuario de listas de reproducción. Por eso se explica la diferencia. No tenemos previsto realizar cambios inmediatos en este aspecto, pero dejaré este tema abierto como una solicitud de función.

Para el problema con SoundCloud, consulta:

> [@Miniaturas para oneboxes iframe](https://meta.discourse.org/t/thumbnails-for-iframe-oneboxes/153449):
>
> Continuando la discusión de [Problemas con las miniaturas de Soundcloud y YouTube oneboxes](https://meta.discourse.org/t/problems-with-thumbnails-from-soundcloud-and-youtube-oneboxes/152511/7): Cuando se crean oneboxes con un iframe, no tenemos ninguna imagen que usar como miniatura. Sería genial si Onebox pudiera proporcionar una imagen para que la usemos. El plugin topic-list-previews de Pavilion tenía este truco: Pero esto tiene un costo de rendimiento bastante alto, así que no creo que queramos hacerlo en el núcleo. Veo un par de opciones limpias: Onebox podría proporcionar una URL de…

---

<div class="post-metadata">

### Author: ![Touri](https://avatars.discourse-cdn.com/v4/letter/t/96bed5/32.png) [@Touri](https://meta.discourse.org/u/Touri)
#### Post date: [2 Junio, 2020 19:40 UTC](https://meta.discourse.org/t/problems-with-thumbnails-from-soundcloud-and-youtube-oneboxes/152511/11 "2020-06-02T19:40:30Z")

</div>

Tuve el mismo problema con los enlaces de YouTube en formato `https://youtu.be/`. Al cambiarlos al formato `https://www.youtube.com/watch?v=` volvieron a funcionar.

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [2 Junio, 2020 20:27 UTC](https://meta.discourse.org/t/problems-with-thumbnails-from-soundcloud-and-youtube-oneboxes/152511/12 "2020-06-02T20:27:49Z")

</div>

Eso es extraño, ¿puedes compartir esos enlaces específicos de YouTube aquí? Cualquiera de las dos formas debería funcionar.

---

<div class="post-metadata">

### Author: ![Touri](https://avatars.discourse-cdn.com/v4/letter/t/96bed5/32.png) [@Touri](https://meta.discourse.org/u/Touri)
#### Post date: [3 Junio, 2020 13:25 UTC](https://meta.discourse.org/t/problems-with-thumbnails-from-soundcloud-and-youtube-oneboxes/152511/13 "2020-06-03T13:25:18Z")

</div>

Tal vez una nueva renderización también habría funcionado.  
Pero parece que persiste en las versiones:

 ![ejemplo](https://global.discourse-cdn.com/meta/original/3X/c/e/cedd7b3aa00a661fae0e40b13ea33ca8ae1199dd.png)

Restablecí el enlace al anterior, pero ahora todo se renderiza correctamente. Supongo que esto se debió a un error de renderizado después de la actualización de beta6.

---

<div class="post-metadata">

### Author: ![david](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/david/32/157490_2.png) [@david](https://meta.discourse.org/u/david)
#### Post date: [3 Julio, 2020 13:30 UTC](https://meta.discourse.org/t/problems-with-thumbnails-from-soundcloud-and-youtube-oneboxes/152511/14 "2020-07-03T13:30:13Z")

</div>

Este tema se cerró automáticamente 30 días después de la última respuesta. Ya no se permiten nuevas respuestas.
