Skip to content

Link card (customblocks.generators.linkcard)

A link card is a informative box about an external source. It is similar to the card that popular apps like Wordpress, Facebook, Twitter, Telegram, Slack... generate when you embed/post a link.

In order to build the box, the generator downloads the target url and extracts social metadata: Featured image, title, description... The download page is cached so that first non-failing download will avoid further downloads.

::: linkcard https://css-tricks.com/essential-meta-tags-social-media/

The Essential Meta Tags For Social Media | CSS-Tricks

These days, almost every website encourages visitors to share its pages on social media. We’ve all seen the ubiquitous Facebook and Twitter icons, among

Read more

This generator uses the fetcher helper. Thus, the first fetch will be cached for later generations.

Options

url
The url to embed as card
wideimage (bool, default True)
Whether the featured image will be shown wide, if not, a small thumb will be shown
*args
any extra positional value will be added as class to the top level element

Additionally you can provide the following keyword parameters to override information extracted from the url:

  • image: the image heading the card
  • title: the caption
  • description: the text describing the link (though using content is recommended)
  • siteurl: a link to the main site
  • sitename: the name of the main site
  • siteicon: the site icon

Content, if provided, will be used as description instead of the summary in the page.

Styling

The above example uses this css.

That stylesheet have some configurable css vars you may modify.

Examples

::: linkcard nowideimage https://css-tricks.com/essential-meta-tags-social-media/

The Essential Meta Tags For Social Media | CSS-Tricks

These days, almost every website encourages visitors to share its pages on social media. We’ve all seen the ubiquitous Facebook and Twitter icons, among

Read more

TODO

  • Global default options
  • Image placeholder while loading
  • Display author metadata