<!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>
Like</button></span></div></div></header><sectionclass="flex flex-col max-w-full mt-0 prose dark:prose-invert lg:flex-row"><divclass="min-w-0 min-h-0 max-w-prose"><p>A quick example of how to start using Thumbnails in your articles.</p><p>If your average directory for an article looks like this:</p><divclass=highlight><pretabindex=0class=chroma><codeclass=language-shelldata-lang=shell><spanclass=line><spanclass=cl>content
</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>varliked_article=!1,oid,id,viewed,oid_likes,id_likes,liked;typeofauth!="undefined"&&(oid="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)}),oid_likes="likes_samples/thumbnail_sample/index.md",id_likes=oid_likes&&oid_likes.replaceAll("/","-"),liked=localStorage.getItem(id_likes),liked&&(liked_article=!0,document.querySelectorAll("button[id='likes_button']")[0].innerText="Remove Like"));functionlike_article(e){console.log("add"),liked_article=!0,localStorage.setItem(e,!0),document.querySelectorAll("button[id='likes_button']")[0].innerText="Remove Like",auth.signInAnonymously().then(()=>{vart=db.collection("likes").doc(e);t.get().then(t=>{t.exists?db.collection("likes").doc(e).update({likes:firebase.firestore.FieldValue.increment(1)}):db.collection("likes").doc(e).set({likes:1})}).catch(e=>{console.log("Error getting document:",e)})}).catch(e=>{vart=e.code,n=e.message;console.error(t,n)})}functionremove_like_article(e){console.log("remove"),liked_article=!1,localStorage.setItem(e,!1),document.querySelectorAll("button[id='likes_button']")[0].innerText="Like",auth.signInAnonymously().then(()=>{vart=db.collection("likes").doc(e);t.get().then(t=>{t.exists?db.collection("likes").doc(e).update({likes:firebase.firestore.FieldValue.increment(-1)}):db.collection("likes").doc(e).set({likes:0})}).catch(e=>{console.log("Error getting document:",e)})}).catch(e=>{vart=e.code,n=e.message;console.error(t,n)})}functionprocess_article(){vare="likes_samples/thumbnail_sample/index.md",t=e&&e.replaceAll("/","-");liked_article?remove_like_article(t):like_article(t)}</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.37151.716c.3254.548.3259.097.32513.645.0138.72-105.583298.558-298.558298.558-59.452.0-114.68-17.219-161.137-47.1068.447.97416.5681.29925.341.29949.055.094.213-16.568130.274-44.832-46.132-.975-84.792-31.188-98.112-72.7726.498.97412.9951.62419.8181.6249.421.018.843-1.327.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.9697.79730.21412.6747.43113.319-28.264-18.843-46.781-51.005-46.781-87.391.0-19.4925.197-37.3614.294-52.95451.65563.675129.3105.258216.365109.807-1.624-7.797-2.599-15.918-2.599-24.04.0-57.82846.782-104.934104.934-104.93430.213.
