nishiki/hugo-theme-relearn
1
0
Fork 0
mirror of https://github.com/McShelby/hugo-theme-relearn.git synced 2024-12-18 03:43:31 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions
hugo-theme-relearn/cont/imageeffects/index.print.html
McShelby adc13ec219 deploy: 7812c1f74d
2024-04-04 22:29:58 +00:00

388 lines
24 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0, minimum-scale=1.0">
<meta name="generator" content="Hugo 0.124.1">
<meta name="generator" content="Relearn 5.26.2+tip">
<meta name="description" content="Documentation for Hugo Relearn Theme">
<meta name="author" content="Sören Weber">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://mcshelby.github.io/hugo-theme-relearn/images/hero.png">
<meta name="twitter:title" content="Image Effects :: Hugo Relearn Theme">
<meta name="twitter:description" content="The theme supports non-standard image effects.
Name Description border Draws a light thin border around the image lazy Lets the image be lazy loaded lightbox The image will be clickable to show it enlarged shadow Draws a shadow around the image to make it appear hovered/glowing As described, you can add this to the URL query parameter, but this may be cumbersome to be done consistently for the whole page.">
<meta property="og:title" content="Image Effects :: Hugo Relearn Theme">
<meta property="og:description" content="The theme supports non-standard image effects.
Name Description border Draws a light thin border around the image lazy Lets the image be lazy loaded lightbox The image will be clickable to show it enlarged shadow Draws a shadow around the image to make it appear hovered/glowing As described, you can add this to the URL query parameter, but this may be cumbersome to be done consistently for the whole page.">
<meta property="og:type" content="article">
<meta property="og:url" content="https://mcshelby.github.io/hugo-theme-relearn/cont/imageeffects/index.html">
<meta property="og:image" content="https://mcshelby.github.io/hugo-theme-relearn/images/hero.png">
<meta property="article:section" content="Content :: Hugo Relearn Theme">
<meta property="og:site_name" content="Hugo Relearn Theme">
<title>Image Effects :: Hugo Relearn Theme</title>
<link href="https://mcshelby.github.io/hugo-theme-relearn/cont/imageeffects/index.html" rel="alternate" hreflang="x-default">
<link href="https://mcshelby.github.io/hugo-theme-relearn/cont/imageeffects/index.html" rel="alternate" hreflang="en">
<link href="https://mcshelby.github.io/hugo-theme-relearn/pir/cont/imageeffects/index.html" rel="alternate" hreflang="art-pir">
<link href="https://mcshelby.github.io/hugo-theme-relearn/cont/imageeffects/index.html" rel="canonical" type="text/html" title="Image Effects :: Hugo Relearn Theme">
<link href="/hugo-theme-relearn/cont/imageeffects/index.xml" rel="alternate" type="application/rss+xml" title="Image Effects :: Hugo Relearn Theme">
<link href="/hugo-theme-relearn/images/logo.svg?1712269791" rel="icon" type="image/svg+xml">
<!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
<link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1712269792" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1712269792" rel="stylesheet"></noscript>
<link href="/hugo-theme-relearn/css/nucleus.css?1712269792" rel="stylesheet">
<link href="/hugo-theme-relearn/css/auto-complete.css?1712269792" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="/hugo-theme-relearn/css/auto-complete.css?1712269792" rel="stylesheet"></noscript>
<link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1712269792" rel="stylesheet">
<link href="/hugo-theme-relearn/css/fonts.css?1712269792" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="/hugo-theme-relearn/css/fonts.css?1712269792" rel="stylesheet"></noscript>
<link href="/hugo-theme-relearn/css/theme.css?1712269792" rel="stylesheet">
<link href="/hugo-theme-relearn/css/theme-relearn-auto.css?1712269792" rel="stylesheet" id="R-variant-style">
<link href="/hugo-theme-relearn/css/chroma-relearn-auto.css?1712269792" rel="stylesheet" id="R-variant-chroma-style">
<link href="/hugo-theme-relearn/css/variant.css?1712269792" rel="stylesheet">
<link href="/hugo-theme-relearn/css/print.css?1712269792" rel="stylesheet" media="print">
<link href="/hugo-theme-relearn/css/format-print.css?1712269792" rel="stylesheet">
<link href="/hugo-theme-relearn/css/ie.css?1712269792" rel="stylesheet">
<script src="/hugo-theme-relearn/js/url.js?1712269792"></script>
<script src="/hugo-theme-relearn/js/variant.js?1712269792"></script>
<script>
window.relearn = window.relearn || {};
window.relearn.relBasePath='..\/..';
window.relearn.relBaseUri='..\/..\/..';
window.relearn.absBaseUri='https:\/\/mcshelby.github.io\/hugo-theme-relearn';
window.index_js_url="/hugo-theme-relearn/index.search.js";
// variant stuff
window.relearn.themeVariantModifier='';
window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
// translations
window.T_Copy_to_clipboard = `Copy to clipboard`;
window.T_Copied_to_clipboard = `Copied to clipboard!`;
window.T_Copy_link_to_clipboard = `Copy link to clipboard`;
window.T_Link_copied_to_clipboard = `Copied link to clipboard!`;
window.T_Reset_view = `Reset view`;
window.T_View_reset = `View reset!`;
window.T_No_results_found = `No results found for "{0}"`;
window.T_N_results_found = `{1} results found for "{0}"`;
</script>
<style>
#R-body img.bg-white {
background-color: white;
}
</style>
</head>
<body class="mobile-support print disableInlineCopyToClipboard" data-url="/hugo-theme-relearn/cont/imageeffects/index.html">
<div id="R-body" class="default-animation">
<div id="R-body-overlay"></div>
<nav id="R-topbar">
<div class="topbar-wrapper">
<div class="topbar-sidebar-divider"></div>
<div class="topbar-area topbar-area-start" data-area="start">
<div class="topbar-button topbar-button-sidebar" data-content-empty="disable" data-width-s="show" data-width-m="hide" data-width-l="hide"><button class="topbar-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)"><i class="fa-fw fas fa-bars"></i></button>
</div>
</div>
<ol class="topbar-breadcrumbs breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList"><li
itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="/hugo-theme-relearn/cont/index.html"><span itemprop="name">Content</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li><li
itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Image Effects</span><meta itemprop="position" content="2"></li>
</ol>
<div class="topbar-area topbar-area-end" data-area="end">
</div>
</div>
</nav>
<div id="R-main-overlay"></div>
<main id="R-body-inner" class="highlightable default" tabindex="-1">
<div class="flex-block-wrapper">
<article class="default">
<header class="headline">
</header>
<h1 id="image-effects">Image Effects</h1>
<p>The theme supports non-standard <a href="/hugo-theme-relearn/cont/markdown/index.html#image-effects">image effects</a>.</p>
<table>
<thead>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>border</td>
<td>Draws a light thin border around the image</td>
</tr>
<tr>
<td>lazy</td>
<td>Lets the image be lazy loaded</td>
</tr>
<tr>
<td>lightbox</td>
<td>The image will be clickable to show it enlarged</td>
</tr>
<tr>
<td>shadow</td>
<td>Draws a shadow around the image to make it appear hovered/glowing</td>
</tr>
</tbody>
</table>
<p>As <a href="/hugo-theme-relearn/cont/markdown/index.html#image-effects">described</a>, you can add this to the URL query parameter, but this may be cumbersome to be done consistently for the whole page.</p>
<p>Instead, you can configure the defaults in your <code>hugo.toml</code> aswell as overriding these default in the pages frontmatter.</p>
<p>Explicitly set URL query parameter will override the defaults in effect for a page.</p>
<p>Without any settings in your <code>hugo.toml</code> this defaults to</p>
<div class="tab-panel" data-tab-group="config-code">
<div class="tab-nav">
<div class="tab-nav-title">hugo.</div>
<button
data-tab-item="toml"
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
onclick="switchTab('config-code','toml')"
>
<span class="tab-nav-text">toml</span>
</button>
<button
data-tab-item="yaml"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('config-code','yaml')"
>
<span class="tab-nav-text">yaml</span>
</button>
<button
data-tab-item="json"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('config-code','json')"
>
<span class="tab-nav-text">json</span>
</button>
</div>
<div class="tab-content-container">
<div
data-tab-item="toml"
class="tab-content tab-panel-style cstyle initial active">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">params</span><span class="p">]</span>
</span></span><span class="line"><span class="cl"> <span class="p">[</span><span class="nx">params</span><span class="p">.</span><span class="nx">imageEffects</span><span class="p">]</span>
</span></span><span class="line"><span class="cl"> <span class="nx">border</span> <span class="p">=</span> <span class="kc">false</span>
</span></span><span class="line"><span class="cl"> <span class="nx">lazy</span> <span class="p">=</span> <span class="kc">true</span>
</span></span><span class="line"><span class="cl"> <span class="nx">lightbox</span> <span class="p">=</span> <span class="kc">true</span>
</span></span><span class="line"><span class="cl"> <span class="nx">shadow</span> <span class="p">=</span> <span class="kc">false</span></span></span></code></pre></div></div>
</div>
<div
data-tab-item="yaml"
class="tab-content tab-panel-style cstyle initial">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nt">params</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">imageEffects</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">border</span><span class="p">:</span><span class="w"> </span><span class="kc">false</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">lazy</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">lightbox</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">shadow</span><span class="p">:</span><span class="w"> </span><span class="kc">false</span></span></span></code></pre></div></div>
</div>
<div
data-tab-item="json"
class="tab-content tab-panel-style cstyle initial">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;params&#34;</span><span class="p">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;imageEffects&#34;</span><span class="p">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;border&#34;</span><span class="p">:</span> <span class="kc">false</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;lazy&#34;</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;lightbox&#34;</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;shadow&#34;</span><span class="p">:</span> <span class="kc">false</span>
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span></span></span></code></pre></div></div>
</div>
</div>
</div>
<p>This can be overridden in a pages frontmatter by eg.</p>
<div class="tab-panel" data-tab-group="config-code">
<div class="tab-nav">
<div class="tab-nav-title">&#8203;</div>
<button
data-tab-item="toml"
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
onclick="switchTab('config-code','toml')"
>
<span class="tab-nav-text">toml</span>
</button>
<button
data-tab-item="yaml"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('config-code','yaml')"
>
<span class="tab-nav-text">yaml</span>
</button>
<button
data-tab-item="json"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('config-code','json')"
>
<span class="tab-nav-text">json</span>
</button>
</div>
<div class="tab-content-container">
<div
data-tab-item="toml"
class="tab-content tab-panel-style cstyle initial active">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="err">+++</span>
</span></span><span class="line"><span class="cl"><span class="p">[</span><span class="nx">imageEffects</span><span class="p">]</span>
</span></span><span class="line"><span class="cl"> <span class="nx">border</span> <span class="p">=</span> <span class="kc">true</span>
</span></span><span class="line"><span class="cl"><span class="err">+++</span></span></span></code></pre></div></div>
</div>
<div
data-tab-item="yaml"
class="tab-content tab-panel-style cstyle initial">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nn">---</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">imageEffects</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">border</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nn">---</span></span></span></code></pre></div></div>
</div>
<div
data-tab-item="json"
class="tab-content tab-panel-style cstyle initial">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;imageEffects&#34;</span><span class="p">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;border&#34;</span><span class="p">:</span> <span class="kc">true</span>
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span></span></span></code></pre></div></div>
</div>
</div>
</div>
<p>Or by explicitly override settings by URL query parameter</p>
<div class="tab-panel" data-tab-group="6c742aa1fa702ec07e8c78c0d1b604b5">
<div class="tab-nav">
<div class="tab-nav-title">&#8203;</div>
<button
data-tab-item="url"
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
onclick="switchTab('6c742aa1fa702ec07e8c78c0d1b604b5','url')"
>
<span class="tab-nav-text">URL</span>
</button>
</div>
<div class="tab-content-container">
<div
data-tab-item="url"
class="tab-content tab-panel-style cstyle initial active">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">![<span class="nt">Minion</span>](<span class="na">https://octodex.github.com/images/minion.png?lightbox=false&amp;bg-white=true</span>)</span></span></code></pre></div></div>
</div>
</div>
</div><p>The settings applied to the above image would be</p>
<div class="tab-panel" data-tab-group="config-code">
<div class="tab-nav">
<div class="tab-nav-title">&#8203;</div>
<button
data-tab-item="toml"
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
onclick="switchTab('config-code','toml')"
>
<span class="tab-nav-text">toml</span>
</button>
<button
data-tab-item="yaml"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('config-code','yaml')"
>
<span class="tab-nav-text">yaml</span>
</button>
<button
data-tab-item="json"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('config-code','json')"
>
<span class="tab-nav-text">json</span>
</button>
</div>
<div class="tab-content-container">
<div
data-tab-item="toml"
class="tab-content tab-panel-style cstyle initial active">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="nx">bg-white</span> <span class="p">=</span> <span class="kc">true</span>
</span></span><span class="line"><span class="cl"><span class="nx">border</span> <span class="p">=</span> <span class="kc">true</span>
</span></span><span class="line"><span class="cl"><span class="nx">lazy</span> <span class="p">=</span> <span class="kc">true</span>
</span></span><span class="line"><span class="cl"><span class="nx">lightbox</span> <span class="p">=</span> <span class="kc">false</span>
</span></span><span class="line"><span class="cl"><span class="nx">shadow</span> <span class="p">=</span> <span class="kc">false</span></span></span></code></pre></div></div>
</div>
<div
data-tab-item="yaml"
class="tab-content tab-panel-style cstyle initial">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nt">bg-white</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">border</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">lazy</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">lightbox</span><span class="p">:</span><span class="w"> </span><span class="kc">false</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">shadow</span><span class="p">:</span><span class="w"> </span><span class="kc">false</span></span></span></code></pre></div></div>
</div>
<div
data-tab-item="json"
class="tab-content tab-panel-style cstyle initial">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;bg-white&#34;</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;border&#34;</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;lazy&#34;</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;lightbox&#34;</span><span class="p">:</span> <span class="kc">false</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;shadow&#34;</span><span class="p">:</span> <span class="kc">false</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span></span></span></code></pre></div></div>
</div>
</div>
</div>
<p>This ends up in the following HTML where the parameter are converted to CSS classes.</p>
<div class="tab-panel" data-tab-group="afc195f35a65891149768065dbc8e5d8">
<div class="tab-nav">
<div class="tab-nav-title">&#8203;</div>
<button
data-tab-item="html"
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
onclick="switchTab('afc195f35a65891149768065dbc8e5d8','html')"
>
<span class="tab-nav-text">HTML</span>
</button>
</div>
<div class="tab-content-container">
<div
data-tab-item="html"
class="tab-content tab-panel-style cstyle initial active">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;https://octodex.github.com/images/minion.png?lightbox=false&amp;bg-white=true&#34;</span> <span class="na">loading</span><span class="o">=</span><span class="s">&#34;lazy&#34;</span> <span class="na">alt</span><span class="o">=</span><span class="s">&#34;Minion&#34;</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;bg-white border lazy nolightbox noshadow&#34;</span><span class="p">&gt;</span></span></span></code></pre></div></div>
</div>
</div>
</div><h2 id="extending">Extending</h2>
<p>As you can see in the above example, the <code>bg-white</code> parameter is not initially supported in the themes default settings. Nevertheless you are free to define arbitrary parameter by just adding them to the URL query parameter or set them in your <code>hugo.toml</code> or pages frontmatter.</p>
<div class="box notices cstyle note">
<div class="box-label"><i class="fa-fw fas fa-exclamation-circle"></i> Note</div>
<div class="box-content">
<p>If no extended parameter like <code>bg-white</code> in the example is set on the URL, a <code>class=&quot;nobg-white&quot;</code> in the HTML will only be generated if a default value was set in the <code>hugo.toml</code> or pages frontmatter.</p>
</div>
</div>
<footer class="footline">
</footer>
</article>
</div>
</main>
</div>
<script src="/hugo-theme-relearn/js/clipboard.min.js?1712269792" defer></script>
<script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1712269792" defer></script>
<script src="/hugo-theme-relearn/js/theme.js?1712269792" defer></script>
</body>
</html>
Reference in a new issue View git blame Copy permalink