mirror of
https://github.com/McShelby/hugo-theme-relearn.git
synced 2024-10-27 18:53:18 +00:00
251 lines
14 KiB
HTML
251 lines
14 KiB
HTML
<!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.119.0">
|
|
<meta name="generator" content="Relearn 5.21.0+tip">
|
|
<meta name="description" content="Documentation for Hugo Relearn Theme">
|
|
<meta name="author" content="Sören Weber">
|
|
<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="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="../../cont/imageeffects/index.xml" rel="alternate" type="application/rss+xml" title="Image Effects :: Hugo Relearn Theme">
|
|
<link href="../../images/logo.svg?1695761291" rel="icon" type="image/svg+xml">
|
|
<!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
|
|
<link href="../../css/fontawesome-all.min.css?1695761292" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1695761292" rel="stylesheet"></noscript>
|
|
<link href="../../css/nucleus.css?1695761292" rel="stylesheet">
|
|
<link href="../../css/auto-complete.css?1695761292" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1695761292" rel="stylesheet"></noscript>
|
|
<link href="../../css/perfect-scrollbar.min.css?1695761292" rel="stylesheet">
|
|
<link href="../../css/fonts.css?1695761292" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1695761292" rel="stylesheet"></noscript>
|
|
<link href="../../css/theme.css?1695761292" rel="stylesheet">
|
|
<link href="../../css/theme-auto.css?1695761292" rel="stylesheet" id="R-variant-style">
|
|
<link href="../../css/variant.css?1695761292" rel="stylesheet">
|
|
<link href="../../css/print.css?1695761292" rel="stylesheet" media="print">
|
|
<link href="../../css/format-print.css?1695761292" rel="stylesheet">
|
|
<link href="../../css/ie.css?1695761292" rel="stylesheet">
|
|
<script src="../../js/url.js?1695761292"></script>
|
|
<script src="../../js/variant.js?1695761292"></script>
|
|
<script>
|
|
// hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
|
|
// https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
|
|
window.index_js_url="../../index.search.js";
|
|
var root_url="../../";
|
|
var baseUri=root_url.replace(/\/$/, '');
|
|
// 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_No_results_found = 'No results found for \u0022{0}\u0022';
|
|
window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
|
|
// some further base stuff
|
|
var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
|
|
window.variants && variants.init( [ 'auto', 'relearn-bright', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
|
|
</script>
|
|
<style>
|
|
#R-body img.bg-white {
|
|
background-color: white;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="mobile-support print disableInlineCopyToClipboard" data-url="../../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+ALT+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="../../cont/index.html"><span itemprop="name">Content</span></a><meta itemprop="position" content="1"> > </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="../../cont/markdown/#image-effects">image effects</a>.</p>
|
|
<p>As described, you can add this to the URL query parameter, but this may be cumbersome to do it consistently for the whole page.</p>
|
|
<p>Instead, you can configure the defaults in your <code>config.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>config.toml</code> this defaults to</p>
|
|
|
|
|
|
<div class="tab-panel" data-tab-group="5ca6961391a92dc0e815e64d3ff7f52f">
|
|
<div class="tab-nav">
|
|
<div class="tab-nav-title">​</div>
|
|
<button
|
|
data-tab-item="configtoml"
|
|
class="tab-nav-button tab-panel-style cstyle initial active"
|
|
onclick="switchTab('5ca6961391a92dc0e815e64d3ff7f52f','configtoml')"
|
|
>
|
|
<span>
|
|
<span class="tab-nav-hidden">config.toml</span>
|
|
<span class="tab-nav-text">config.toml</span>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
<div class="tab-content-container">
|
|
<div
|
|
data-tab-item="configtoml"
|
|
class="tab-content tab-panel-style cstyle initial active">
|
|
<div class="tab-content-text">
|
|
|
|
<div class="wrap-code highlight"><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">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>
|
|
</div><p>This can be overridden in a pages frontmatter by eg.</p>
|
|
|
|
|
|
<div class="tab-panel" data-tab-group="ec5636a0d1109999685af1f718f8a48c">
|
|
<div class="tab-nav">
|
|
<div class="tab-nav-title">​</div>
|
|
<button
|
|
data-tab-item="frontmatter"
|
|
class="tab-nav-button tab-panel-style cstyle initial active"
|
|
onclick="switchTab('ec5636a0d1109999685af1f718f8a48c','frontmatter')"
|
|
>
|
|
<span>
|
|
<span class="tab-nav-hidden">frontmatter</span>
|
|
<span class="tab-nav-text">frontmatter</span>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
<div class="tab-content-container">
|
|
<div
|
|
data-tab-item="frontmatter"
|
|
class="tab-content tab-panel-style cstyle initial active">
|
|
<div class="tab-content-text">
|
|
|
|
<div class="wrap-code highlight"><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>
|
|
</div><p>Or by explicitly override settings by URL query parameter</p>
|
|
|
|
|
|
<div class="tab-panel" data-tab-group="8561738c5c105962b049639c7f7610fc">
|
|
<div class="tab-nav">
|
|
<div class="tab-nav-title">​</div>
|
|
<button
|
|
data-tab-item="url"
|
|
class="tab-nav-button tab-panel-style cstyle initial active"
|
|
onclick="switchTab('8561738c5c105962b049639c7f7610fc','url')"
|
|
>
|
|
<span>
|
|
<span class="tab-nav-hidden">URL</span>
|
|
<span class="tab-nav-text">URL</span>
|
|
</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="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">![<span class="nt">Minion</span>](<span class="na">https://octodex.github.com/images/minion.png?lightbox=false&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="f20414e8580374135ea8f37b1baa4949">
|
|
<div class="tab-nav">
|
|
<div class="tab-nav-title">​</div>
|
|
<button
|
|
data-tab-item="result"
|
|
class="tab-nav-button tab-panel-style cstyle initial active"
|
|
onclick="switchTab('f20414e8580374135ea8f37b1baa4949','result')"
|
|
>
|
|
<span>
|
|
<span class="tab-nav-hidden">Result</span>
|
|
<span class="tab-nav-text">Result</span>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
<div class="tab-content-container">
|
|
<div
|
|
data-tab-item="result"
|
|
class="tab-content tab-panel-style cstyle initial active">
|
|
<div class="tab-content-text">
|
|
|
|
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><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">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><span class="line"><span class="cl"> <span class="nx">bg-white</span> <span class="p">=</span> <span class="kc">true</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="f026a7901635f889776e9a62353a2eb7">
|
|
<div class="tab-nav">
|
|
<div class="tab-nav-title">​</div>
|
|
<button
|
|
data-tab-item="html"
|
|
class="tab-nav-button tab-panel-style cstyle initial active"
|
|
onclick="switchTab('f026a7901635f889776e9a62353a2eb7','html')"
|
|
>
|
|
<span>
|
|
<span class="tab-nav-hidden">HTML</span>
|
|
<span class="tab-nav-text">HTML</span>
|
|
</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="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://octodex.github.com/images/minion.png?lightbox=false&bg-white=true"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"Minion"</span> <span class="na">class</span><span class="o">=</span><span class="s">"bg-white border nolightbox noshadow"</span><span class="p">></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>config.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="nobg-white"</code> in the HTML will only be generated if a default value was set in the <code>config.toml</code> or pages frontmatter.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<footer class="footline">
|
|
|
|
</footer>
|
|
</article>
|
|
|
|
</div>
|
|
</main>
|
|
</div>
|
|
<script src="../../js/clipboard.min.js?1695761292" defer></script>
|
|
<script src="../../js/perfect-scrollbar.min.js?1695761292" defer></script>
|
|
<script src="../../js/theme.js?1695761292" defer></script>
|
|
</body>
|
|
</html>
|