Manual Onebox creation for websites that don't display correctly

Development

AI-generated summary

UnitedFreedom shares a workaround for manually creating Onebox-style previews in Discourse for websites that don’t auto-generate them correctly. The solution uses custom CSS and markdown to format links consistently, improving visual uniformity in posts. The CSS styles elements like headers, images, and body text within a custom onebox-wrapper, while the markdown uses [wrap="..."] tags to structure the content. Users can optionally upload a placeholder image for sites lacking thumbnails, ensuring consistent layout. UnitedFreedom admits the code isn’t optimized and invites improvements. Screenshots illustrate the before/after effect, showing how manual oneboxes clean up messy, misformatted previews. The method involves three steps: adding CSS to the theme, using templated markdown with placeholders for URLs and images, and uploading/inserting images as needed. A bonus tip suggests using a reusable placeholder image to maintain consistency across links without re-uploading. This guide is aimed at Discourse admins or theme editors seeking better control over embedded link displays.

1

I absolutely love the Onebox feature, but unfortunately not all website are configured correctly to feed the data to Onebox. Adding multiple links to a topic can look messy when the formats are not uniform. Here you will find a solation to solve that problem using a little bit of CSS and markdown.

Example of multiple Onebox’s in row with a few random sites not loading correctly.

See how the 2nd and 3rd are not loading correctly? We can fix that with Manually Creating a Onebox for those specific links

image
image790×778 44.7 KB

…so it looks like this:

image
image713×168 6.5 KB

How to create a manual Onebox

STOP Please note that I am not a skilled programmer. Although this code works, I doubt that it is optimized. If anyone wishes to improve the code please reply below, and I will link to it here.

1. Add the following custom CSS code to your Discourse theme.

/*=========================================================================================
OneBox - Manually create a onebox for a website that does not load the data correctly.
=========================================================================================*/
[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. Use the following markdown in your post.

Replace the links and text based on the website you are wanting to create the Onebox for.

[wrap="onebox-wrapper"]
[wrap="onebox-header"] [Header Text](https://example.com) [/wrap]
[wrap="onebox-body"]

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

### [Title Text](https://example.com)

Body Description

[/wrap]
[/wrap]

3. Upload an image (optional)

  1. Drag and drop or upload an image into the topic.
  2. Copy the path (For example upload://ucs5Tw4ovoDhIxUbfCdQJ2W7wKi.png )
  3. Highlight the existing path upload://your_uploaded_url.png and then paste the one you copied in the step above.

RESULT

image
image1057×531 30.4 KB

Bonus Improvement

Not all websites have an image. So to keep thing uniform, we would either remove all images, or instead use a placeholder for the links that don’t have images. I chose the placeholder option. I have dragged and dropped an image into my topic to upload it to discourse. I then use that link un the onebox-image wrap. Lastly I have copied the entire markdown and use it as a template for future links. So the placeholder image is always there (no need to re-upload it every time).

I hope someone found this as useful as I did :slight_smile:

7 Likes