<!doctype html><htmllang=endir=ltrclass=scroll-smoothdata-default-appearance=darkdata-auto-appearance=false><head><metacharset=utf-8><metahttp-equiv=content-languagecontent="en"><metaname=viewportcontent="width=device-width,initial-scale=1"><metahttp-equiv=x-ua-compatiblecontent="ie=edge"><title>Thumbnails · Blowfish</title><metaname=titlecontent="Thumbnails · Blowfish"><metaname=descriptioncontent="A powerful, lightweight theme for Hugo built with Tailwind CSS."><linkrel=canonicalhref=https://nunocoracao.github.io/blowfish/samples/thumbnail_sample/><linktype=text/cssrel=stylesheethref=/blowfish/css/main.bundle.min.2837de2ddd80f21a2e8f05c3de5c51b3001c6f76bf41e9430d3f18b1287f21ff8f160360c9686ecec3bdb000b0446c9cec20382290a2fbf1c8b3e7626d528647.cssintegrity="sha512-KDfeLd2A8houjwXD3lxRswAcb3a/QelDDT8YsSh/If+PFgNgyWhuzsO9sACwRGyc7CA4IpCi+/HIs+dibVKGRw=="><scripttype=text/javascriptsrc=/blowfish/js/main.min.cf83e1357eefb8bdf1542850d66d8007d620e4050b5715dc83f4a921d36ce9ce47d0d13c5d85f2b0ff8318d2877eec2f63b931bd47417a81a538327af927da3e.jsintegrity="sha512-z4PhNX7vuL3xVChQ1m2AB9Yg5AULVxXcg/SpIdNs6c5H0NE8XYXysP+DGNKHfuwvY7kxvUdBeoGlODJ6+SfaPg=="></script>
<linkrel=apple-touch-iconsizes=180x180href=/blowfish/apple-touch-icon.png><linkrel=icontype=image/pngsizes=32x32href=/blowfish/favicon-32x32.png><linkrel=icontype=image/pngsizes=16x16href=/blowfish/favicon-16x16.png><linkrel=manifesthref=/blowfish/site.webmanifest><metaproperty="og:title"content="Thumbnails"><metaproperty="og:description"content="Turn on thumbnails for your articles."><metaproperty="og:type"content="article"><metaproperty="og:url"content="https://nunocoracao.github.io/blowfish/samples/thumbnail_sample/"><metaproperty="og:image"content="https://nunocoracao.github.io/blowfish/samples/thumbnail_sample/feature.jpg"><metaproperty="article:section"content="samples"><metaproperty="article:published_time"content="2022-09-26T00:00:00+00:00"><metaproperty="article:modified_time"content="2022-09-26T00:00:00+00:00"><metaproperty="og:site_name"content="Blowfish"><metaname=twitter:cardcontent="summary_large_image"><metaname=twitter:imagecontent="https://nunocoracao.github.io/blowfish/samples/thumbnail_sample/feature.jpg"><metaname=twitter:titlecontent="Thumbnails"><metaname=twitter:descriptioncontent="Turn on thumbnails for your articles."><scripttype=application/ld+json>[{"@context":"https://schema.org","@type":"Article","articleSection":"Content Samples","name":"Thumbnails","headline":"Thumbnails","description":"Turn on thumbnails for your articles.","abstract":"A quick example of how to start using Thumbnails in your artciles.","inLanguage":"en","url":"https:\/\/nunocoracao.github.io\/blowfish\/samples\/thumbnail_sample\/","author":{"@type":"Person","name":"Blowfish"},"copyrightYear":"2022","dateCreated":"2022-09-26T00:00:00\u002b00:00","datePublished":"2022-09-26T00:00:00\u002b00:00","dateModified":"2022-09-26T00:00:00\u002b00:00","keywords":["thumbnail","sample"],"mainEntityOfPage":"true","wordCount":"160"}]</script><metaname=authorcontent="Blowfish"><linkhref=https://twitter.com/burufugurel=me><linkhref=https://github.com/nunocoracao/blowfishrel=me><scriptasyncsrc="https://www.googletagmanager.com/gtag/js?id=G-PEDMYR1V0K"></script>
</span></span></code></pre></div><p>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 <code>index.md</code> file. You’ll get a structure similar to what’s below.</p><divclass=highlight><pretabindex=0class=chroma><codeclass=language-shelldata-lang=shell><spanclass=line><spanclass=cl>content
</span></span></code></pre></div><p>Inside the article you can now add an image file (almost all formats are supported bue we recommend <code>.png</code> or <code>.jpg</code>) that starts with <code>feature*</code>. Example below.</p><divclass=highlight><pretabindex=0class=chroma><codeclass=language-shelldata-lang=shell><spanclass=line><spanclass=cl>content
</span></span></code></pre></div><p>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 <atarget=_blankhref=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.</p></div><script>if(typeofauth!="undefined"){varoid="views_samples/thumbnail_sample/index.md",id=oid&&oid.replaceAll("/","-"),viewed=localStorage.getItem(id);viewed||auth.signInAnonymously().then(()=>{vare=db.collection("views").doc(id);localStorage.setItem(id,!0),e.get().then(e=>{e.exists?db.collection("views").doc(id).update({views:firebase.firestore.FieldValue.increment(1)}):db.collection("views").doc(id).set({views:1})}).catch(e=>{console.log("Error getting document:",e)})}).catch(e=>{vart=e.code,n=e.message;console.error(t,n)})}</script></section><footerclass="pt-8 max-w-prose print:hidden"><divclass=flex><imgclass="!mt-0 !mb-0 h-24 w-24 rounded-full ltr:mr-4 rtl:ml-4"width=96height=96alt=Blowfishsrc=/blowfish/img/blowfish_logo_hu184ea2fa12490a2458ca388a16ab730e_227816_192x192_fill_box_smart1_3.png><divclass=place-self-center><divclass="text-[0.6rem] uppercase leading-3 text-neutral-500 dark:text-neutral-400">Author</div><divclass="font-semibold leading-6 text-neutral-800 dark:text-neutral-300">Blowfish</div><divclass="text-sm text-neutral-700 dark:text-neutral-400">A powerful, lightweight theme for Hugo built with Tailwind CSS.</div><divclass="text-2xl sm:text-lg"><divclass="flex flex-wrap text-neutral-400 dark:text-neutral-500"><aclass="px-1 hover:text-primary-700 dark:hover:text-primary-400"href=https://twitter.com/burufugutarget=_blankaria-label=Twitterrel="me noopener noreferrer"><spanclass="relative inline-block align-text-bottom icon"><svgxmlns="http://www.w3.org/2000/svg"viewBox="0 0 512 512"><pathfill="currentcolor"d="M459.37 151.716c.325 4.548.325 9.097.325 13.645.0 138.72-105.583 298.558-298.558 298.558-59.452.0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055.0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421.0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391.0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04.0-57.828 46.782-104.934 104.934-104.934 30.213.0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/></svg></span></a><aclass="px-1 hover:text-primary-700 dark:hover:text-primary-400"href=https://github.com/nunocoracao/blowfishtarget=_blankaria-label=Githubrel="me noopener noreferrer"><spanclass="relative inline-block align-text-bottom icon"><svgxmlns="http://www.w3.org/2000/svg"viewBox="0 0 496 512"><pathfill="currentcolor"d="M165.9397.4c02-2.33.6-5.23.6-3.3.3-5.6-1.3-5.6-3.6.0-22.3-3.65.2-3.63-.35.61.35.63.6zm-31.1-4.5c-.721.34.34.34.92.615.6.06.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.22.3zm44.2-1.7c-2.9.7-4.92.6-4.64.9.322.93.35.92.62.9-.74.9-2.64.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.88C106.180113.3.0252c0110.969.8205.8169.5239.212.82.317.3-5.617.3-12.1.0-6.2-.3-40.4-.3-61.4.0.0-7015-84.7-29.8.0.0-11.4-29.1-27.8-36.6.0.0-22.9-15.71.6-15.4.0.024.9238.625.821.938.658.627.572.920.92.3-168.8-27.116-33.7-55.9-6.2-112.3-14.3-112.3-110.5.0-27.57.6-41.323.6-58.9-2.6-6.5-11.1-33.32.6-67.920.9-6.56927692720-5.641.5-8.562.8-8.5s42.82.962.88.5c0048.1-33.669-2713.734.75.261.42.667.91617.725.831.525.858.9.096.5-58.9104.2-114.8110.59.27.91722.91746.4.033.7-.375.4-.383.6.06.54.614.417.312.1C428.2457.8496362.9496252496113.3383.58244.88zM97.2352.9c-1.31-13.3.75.21.61
