Creación manual de Onebox para sitios web que no se muestran correctamente

Desarrollador
1

Me encanta la función Onebox, pero desafortunadamente no todos los sitios web están configurados correctamente para enviar los datos a Onebox. Agregar varios enlaces a un tema puede verse desordenado cuando los formatos no son uniformes. Aquí encontrarás una solución para resolver ese problema usando un poco de CSS y markdown.

Ejemplo de múltiples Onebox en fila con algunos sitios aleatorios que no se cargan correctamente.

¿Ven cómo el segundo y el tercero no se cargan correctamente? Podemos solucionar eso creando manualmente un Onebox para esos enlaces específicos.

image
image790×778 44.7 KB

…para que se vea así:

image
image713×168 6.5 KB

Cómo crear un Onebox manual

DETENTE Tenga en cuenta que no soy un programador experto. Aunque este código funciona, dudo que esté optimizado. Si alguien desea mejorar el código, por favor responda a continuación y lo enlazaré aquí.

1. Agregue el siguiente código CSS personalizado a su tema de Discourse.

/*========================================================================================
OneBox - Crea manualmente un onebox para un sitio web que no carga los datos correctamente.
=========================================================================================*/
[data-wrap="onebox-wrapper"] {
    border: 5px solid var(--primary-low);
    margin: 1em 0;
    padding: 1em;
    font-size: var(--font-0);
    background: var(--secondary);
}

[data-wrap="onebox-header"] {
    align-items: center;
    display: flex;
    margin-bottom: 1em;
}


[data-wrap="onebox-header"] a[href] {
    color: var(--primary-med-or-secondary-med);
    text-decoration: none;
}

[data-wrap="onebox-header"] p {
    margin-top: 0em;
    margin-bottom: 0em;
}


[data-wrap="onebox-body"] {
    clear: both;
}

[data-wrap="onebox-body"] h3 {
     margin-top: 0em;
    margin-bottom: 0em;
}

[data-wrap="onebox-body"] p {
     margin-top: 0em;
    margin-bottom: 0em;
}

[data-wrap="onebox-image"] {
    max-height: 170px;
    --magic-ratio: calc(var(--aspect-ratio) + 0.15);
    width: calc(128px*var(--magic-ratio));
    max-width: 20%;
    float: left;
    margin-right: 1em;
    height: auto;
    padding-bottom: 0em;
}

2. Utilice el siguiente markdown en su publicación.

Reemplace los enlaces y el texto según el sitio web para el que desee crear el Onebox.

[wrap="onebox-wrapper"]
[wrap="onebox-header"] [Texto del Encabezado](https://example.com) [/wrap]
[wrap="onebox-body"]

[wrap="onebox-image"]![image|75x75](upload://your_uploaded_url.png)[/wrap]

### [Texto del Título](https://example.com)

Descripción del Cuerpo

[/wrap]
[/wrap]

3. Cargue una imagen (opcional)

  1. Arrastre y suelte o cargue una imagen en el tema.
  2. Copie la ruta (Por ejemplo upload://ucs5Tw4ovoDhIxUbfCdQJ2W7wKi.png)
  3. Resalte la ruta existente upload://your_uploaded_url.png y luego pegue la que copió en el paso anterior.

RESULTADO

image
image1057×531 30.4 KB

Mejora adicional

No todos los sitios web tienen una imagen. Para mantener la uniformidad, eliminaríamos todas las imágenes o usaríamos una imagen de marcador de posición para los enlaces que no tienen imágenes. Elegí la opción de marcador de posición. Arrastré y solté una imagen en mi tema para cargarla en discourse. Luego uso ese enlace en el envoltorio onebox-image. Por último, he copiado todo el markdown y lo utilizo como plantilla para enlaces futuros. Por lo tanto, la imagen de marcador de posición siempre está ahí (no es necesario volver a cargarla cada vez).

Espero que alguien haya encontrado esto tan útil como yo :slight_smile:

7 Me gusta