Styled link previews, hugo + onebox?

support
1

so i’ve decided to start porting my medium posts to my hugo blog. one thing i really like about medium is the preview mode of links, very similar to the look of dicourse’s onebox (but with a logo). for example, this is the article i want to mimic the look of:

anyone have any examples of implementing styled link previews into hugo? i’ve been spoiled by the automated styling of discourse & medium. i imagine this could be done quickly with a shortcode but i’m hoping to find some breadcrumbs…

2

I don’t see anyway to do that with Hugo, seems like you have to have a system that would take information you gave it and then process it in a specific way to spit out the format you seek. At least, to do it in an automated way. Not saying it isn’t possible, but it would be a programming project.

Alternately, you could make it manually, and I can see it being done this way manually:

  1. Pick the site/link you want to put in that format
  2. Get a square graphic/logo for that site and either download it or get a full weblink for it
  3. Make a description of the site and a short tagline about the site
  4. Make a Hugo Shortcode that formats some html with css styles to put the pertinant information in the right places
  5. Reference the shortcode in your content file… with inputs being the link to the page, a string of the root of the domain (for looks at the bottom left corner), the tag line, the description, and the link to the graphic/logo.
  6. Then when you build the page, it’ll put it all together for you

That’s the only way I can think of you doing it now with Hugo as it stands today. It’s not bad, just requires you to do all the magical stuff by hand, instead of some script pulling it in some special way for the link itself.

3

hmmm…i guess i don’t understand why it would be fundamentally different than any other iframe.

separate question: is it possible to run ruby gems alongside/inside hugo?

onebox repo for reference: https://github.com/discourse/onebox

4

what would populate the iframe and how would it get the content? that’s the question.

Regarding the Ruby gem, no idea but I’m guessing no. There are other pipeline processors like gulp but it’s beyond my experience.

5

It isn’t different at the iframe level, it is just that when you embed it in a dynamic system like Discourse the onebox gem is actively going and pulling in that info, whereas Hugo builds the site and produces HTML and related files.

You are kind of on the right track by looking at external tooling, but Hugo doesn’t have a system to pull in information like the various embed-by-link systems used in popular software.

Think about how that works: you put a link on a line by itself in Discourse, and the onebox does its job, but then it saves the results in a database. Hugo doesn’t have a database, it just builds pages from content files and templates, and rebuilds each time you make a change, like adding a post.

So your solution has to work in that paradigm.

Checkout the docs for shortcodes to see how specific sites are embedded. Onebox is nice because it does the heavy lifting for sites that don’t have their own API for pulling over content. Maybe you will figure something out. :slight_smile:

1 Like
6

Thank you, this is helpful.

Can anyone here think of a specific example where Ruby is used in conjunction with Hugo?