caffeinated.blog/public/post/image-test/index.html

215 lines
7.7 KiB
HTML
Raw Permalink Normal View History

<!DOCTYPE html>
<html lang="en" data-theme=""><head>
<title> Glenn | Guide to Thumbnails in Hugo </title>
<meta charset="utf-8"><meta name="generator" content="Hugo 0.74.3" /><meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
<meta name="description" content="A bit of personal space for writing">
<link rel="stylesheet"
href="https://example.com/css/style.min.9a6700e4461b50dccdddfc4f81dc65d77e7fca22c35665e398a0c36568db59c7.css"
integrity="sha256-mmcA5EYbUNzN3fxPgdxl135/yiLDVmXjmKDDZWjbWcc="
crossorigin="anonymous"
type="text/css">
<link rel="stylesheet"
href="https://example.com/css/markupHighlight.min.cc84ed683057cc175ddfa738ea6ba2d5c882b95cb64f50bf9be918cb3791887b.css"
integrity="sha256-zITtaDBXzBdd36c46mui1ciCuVy2T1C/m&#43;kYyzeRiHs="
crossorigin="anonymous"
type="text/css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
crossorigin="anonymous" />
<link rel="shortcut icon" href="https://example.com/favicons/favicon.ico" type="image/x-icon">
<link rel="apple-touch-icon" sizes="180x180" href="https://example.com/favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="https://example.com/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="https://example.com/favicons/favicon-16x16.png">
<link rel="canonical" href="https://example.com/post/image-test/">
<script type="text/javascript"
src="https://example.com/js/anatole-header.min.d8599ee07b7d3f11bafbac30657ccc591e8d7fd36a9f580cd4c09e24e0e4a971.js"
integrity="sha256-2Fme4Ht9PxG6&#43;6wwZXzMWR6Nf9Nqn1gM1MCeJODkqXE="
crossorigin="anonymous"></script>
<script type="text/javascript"
src="https://example.com/js/anatole-theme-switcher.min.e289e9ebb2a4e7a7f895859c8a2b0da2de1ec73f22cea58d8475aa0597023837.js"
integrity="sha256-4onp67Kk56f4lYWciisNot4exz8izqWNhHWqBZcCODc="
crossorigin="anonymous"></script>
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:image" content="https://example.com/images/site-feature-image.png"/>
<meta name="twitter:title" content="Guide to Thumbnails in Hugo"/>
<meta name="twitter:description" content="Guide to Thumbnails in Hugo"/>
</head>
<body><div class="sidebar animated fadeInDown ">
<div class="logo-title">
<div class="title">
<img src="https://example.com/images/site-logo.png" alt="profile picture">
<h3 title=""><a href="/">Caffeinated</a></h3>
<div class="description">
<p>A bit of personal space for writing</p>
</div>
</div>
</div>
<ul class="social-links">
<li>
<a href="https://de.linkedin.com/" rel="me" aria-label="Linkedin">
<i class="fab fa-linkedin fa-2x" aria-hidden="true"></i>
</a>
</li>
<li>
<a href="https://github.com/lxndrblz/anatole/" rel="me" aria-label="GitHub">
<i class="fab fa-github fa-2x" aria-hidden="true"></i>
</a>
</li>
<li>
<a href="https://www.instagram.com/" rel="me" aria-label="instagram">
<i class="fab fa-instagram fa-2x" aria-hidden="true"></i>
</a>
</li>
<li>
<a href="mailto:mail@alexbilz.com" rel="me" aria-label="e-mail">
<i class="fas fa-envelope fa-2x" aria-hidden="true"></i>
</a>
</li>
</ul>
<div class="footer">
<div class="by_farbox">&copy; Glenn 2021 </div>
</div>
</div>
<div class="main">
<div class="page-top animated fadeInDown ">
<a role="button" class="navbar-burger" data-target="navMenu" aria-label="menu" aria-expanded="false">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
<ul class="nav" id="navMenu">
<li><a
href="/"
title="">Home</a></li>
<li><a
href="/post/"
title="">Posts</a></li>
<li><a
href="/about/"
title="">About</a></li>
<li><a
href="/contact/"
title="">Contact</a></li>
<li class="theme-switch-item">
<a class="theme-switch" title="Switch Theme">
<i class="fas fa-adjust fa-fw" aria-hidden="true"></i>
</a>
</li>
</ul>
</div>
<div class="autopagerize_page_element">
<div class="content">
<div class="post animated fadeInDown ">
<div class="post-content">
<img class="post-thumbnail" src="https://example.com/images/landscape.jpg" alt="Thumbnail image">
<div class="post-title">
<h3>Guide to Thumbnails in Hugo</h3>
<div class="info">
<em class="fas fa-calendar-day"></em>
<span class="date"> Mon, Mar 4, 2019
</span>
<em class="fas fa-stopwatch"></em>
<span class="reading-time">One-minute read</span>
</div>
</div>
<p>Thumbnails can be enabled easily by setting the <code>thumbnail</code> parameter in the frontmatter to an image such as <code>&quot;images/landscape.jpg&quot;</code>.</p>
<p>Make sure to copy the image the <code>static/images/</code> directory.</p>
<p>If put together, it will look like this (that&rsquo;s in fact this post&rsquo;s frontmatter):</p>
<div class="highlight"><pre class="chroma"><code class="language-md" data-lang="md">+++
author = &#34;Hugo Authors&#34;
title = &#34;Guide to Thumbnails in Hugo&#34;
date = &#34;2019-03-04&#34;
description = &#34;Guide to Thumbnails in Hugo&#34;
tags = [
&#34;thumbnail&#34;,
]
thumbnail= &#34;images/landscape.jpg&#34;
+++
</code></pre></div></div>
<div class="post-footer">
<div class="info">
<span class="separator"><a class="tag" href="/tags/thumbnail/">thumbnail</a></span>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript"
src="https://example.com/js/jquery.min.86b1e8f819ee2d9099a783e50b49dff24282545fc40773861f9126b921532e4c.js"
integrity="sha256-hrHo&#43;BnuLZCZp4PlC0nf8kKCVF/EB3OGH5EmuSFTLkw="
crossorigin="anonymous"></script>
<script type="text/javascript"
src="https://example.com/js/bundle.min.0f9c74cb78f13d1f15f33daff4037c70354f98acfbb97a6f61708966675c3cae.js"
integrity="sha256-D5x0y3jxPR8V8z2v9AN8cDVPmKz7uXpvYXCJZmdcPK4="
crossorigin="anonymous"></script>
<script type="text/javascript"
src="https://example.com/js/medium-zoom.min.92f21c856129f84aeb719459b3e6ac621a3032fd7b180a18c04e1d12083f8aba.js"
integrity="sha256-kvIchWEp&#43;ErrcZRZs&#43;asYhowMv17GAoYwE4dEgg/iro="
crossorigin="anonymous"></script>
</body>
</html>