Manual Onebox creation for websites that don't display correctly

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

…so it looks like this:

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-header"] [Header Text]( [/wrap]


### [Title Text](

Body Description


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.


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: