added docs about thumbnails

exampleSite/content/docs/configuration/index.md

@@ -41,6 +41,12 @@ Note that the variable names provided in this table use dot notation to simplify
 |`taxonomies`|_Not set_|Refer to the [Organising content]({{< ref "getting-started#organising-content" >}}) section for taxonomy configuration.|
 <!-- prettier-ignore-end -->
 
+## Thumbnails
+
+Blowfish was built so it would be easy to add visual support to your articles. If your familiar with Hugo article strucutre, you just need to place an image file (almost all formats are supported bue we recommend `.png` or `.jpg`) that starts with `feature*` inside your article folder. And that's it, Blowfish will then able to both use the image as a thumbnail within your website as well as for <a target="_blank" href="https://oembed.com/">oEmbed</a> cards across social platforms. 
+
+[Here]({{< ref "thumbnails" >}}) is also a guide with more info and a [sample]({{< ref "thumbnail_sample" >}}) if you want to see how you can do it.
+
 ## Language and i18n
 
 Blowfish is optimised for full multilingual websites and theme assets are translated into several languages out of the box. The language configuration allows you to generate multiple versions of your content to provide a customised experience to your visitors in their native language.
@@ -174,4 +180,4 @@ Many of the article defaults here can be overridden on a per article basis by sp
 
 The theme also includes a `markup.toml` configuration file. This file contains some important parameters that ensure that Hugo is correctly configured to generate sites built with Blowfish.
 
-Always ensure this file is present in the config directory and that the required values are set. Failure to do so may cause certain features to fucntion incorrectly and could result in unintended behaviour.
+Always ensure this file is present in the config directory and that the required values are set. Failure to do so may cause certain features to fucntion incorrectly and could result in unintended behaviour.

exampleSite/content/docs/getting-started/index.md

@@ -159,6 +159,12 @@ Menu links will be sorted from lowest to highest `weight`, and then alphabetical
 
 Both menus are completely optional and can be commented out if not required. Use the template provided in the file as a guide.
 
+## Thumbnails
+
+Blowfish was built so it would be easy to add visual support to your articles. If your familiar with Hugo article strucutre, you just need to place an image file (almost all formats are supported bue we recommend `.png` or `.jpg`) that starts with `feature*` inside your article folder. And that's it, Blowfish will then able to both use the image as a thumbnail within your website as well as for <a target="_blank" href="https://oembed.com/">oEmbed</a> cards across social platforms. 
+
+[Here]({{< ref "thumbnails" >}}) is also a guide with more info and a [sample]({{< ref "thumbnail_sample" >}}) if you want to see how you can do it.
+
 ## Detailed configuration
 
 The steps above are the bare minimum configuration. If you now run `hugo server` you will be presented with a blank Blowfish website. Detailed configuration is covered in the [Configuration]({{< ref "configuration" >}}) section.

exampleSite/content/docs/homepage-layout/index.md

@@ -50,3 +50,9 @@ All homepage layouts have the option of displaying recent articles below the mai
 ![Profile layout with recent articles](home-profile-list.png)
 
 The articles listed in this section are derived from the `mainSections` setting which allows for whatever content types you are using on your website. For instance, if you had content sections for _posts_ and _projects_ you could set this setting to `["posts", "projects"]` and all the articles in these two sections would be used to populate the recent list. The theme expects this setting to be an array so if you only use one section for all your content, you should set this accordingly: `["blog"]`.
+
+## Thumbnails
+
+Blowfish was built so it would be easy to add visual support to your articles. If your familiar with Hugo article strucutre, you just need to place an image file (almost all formats are supported bue we recommend `.png` or `.jpg`) that starts with `feature*` inside your article folder. And that's it, Blowfish will then able to both use the image as a thumbnail within your website as well as for <a target="_blank" href="https://oembed.com/">oEmbed</a> cards across social platforms. 
+
+[Here]({{< ref "thumbnails" >}}) is also a guide with more info and a [sample]({{< ref "thumbnail_sample" >}}) if you want to see how you can do it.

exampleSite/content/docs/thumbnails/index.md

@@ -0,0 +1,39 @@
+---
+title: "Thumbnails"
+date: 2020-08-12
+draft: false
+description: "Turn on thumbnails for your articles."
+slug: "thumbnails"
+tags: ["thumbnail", "config", "docs"]
+---
+
+## Thumbnails
+
+Blowfish was enhanced in order to make it easy to add visual support to your posts. To do so, you just need to place an image file (almost all formats are supported bue we recommend `.png` or `.jpg`) that starts with `feature*` inside your article main directory as shown in the 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. 
+
+## Folder Strucutre
+
+If you are using single `.md` files for your articles and have a file structure similar to 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
+```
+The you just need to add an image like explain earlier. If you want to see a sample of this you can consult [this sample]({{< ref "thumbnail_sample" >}}).