summaryrefslogtreecommitdiff
path: root/themes/blowfish/exampleSite/content/samples/thumbnail_sample/index.md
blob: 06f4118d33ad0d5ce98ccb4d22dcc5453ae74ccf (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
---
title: "Thumbnails"
date: 2022-09-26
draft: false
description: "Turn on thumbnails for your articles."
slug: "thumbnail_sample"
tags: ["thumbnail", "sample"]
summary: "A quick example of how to start using Thumbnails in your artciles."
type: 'sample'
---

A quick example of how to start using Thumbnails in your articles.

If your average directory for an article looks like this: 

```shell
content
└── awesome_article.md
```

You need to change it from a single markdown file into a folder. Create a directory with the same name of the article, inside create a `index.md` file. You'll get a structure similar to what's below.

```shell
content
└── awesome_article
    └── featured.png
```

Inside the article you can now add an image file (almost all formats are supported but we recommend `.png` or `.jpg`) that starts with `feature*`. Example below.

```shell
content
└── awesome_article
    ├── index.md
    └── featured.png
```

This will tell Blowfish that this article has a feature image that can be used both as a thumbnail across your website as well as for <a target="_blank" href="https://oembed.com/">oEmbed</a> cards across social platforms. As an example, you can try copy pasting the URL of this article into a platform that shows oEmbeds (e.g. Twitter, WhatsApp, Telegram, etc) and see what is displayed.