2023-08-25 17:35:54 +00:00
<!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" >
2023-09-05 11:10:04 +00:00
< meta name = "generator" content = "Hugo 0.118.2" >
2023-09-18 19:07:16 +00:00
< meta name = "generator" content = "Relearn 5.21.0+tip" >
2023-08-25 17:35:54 +00:00
< 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" >
2023-09-23 22:28:49 +00:00
< link href = "../../images/logo.svg?1695508121" rel = "icon" type = "image/svg+xml" >
2023-08-25 17:35:54 +00:00
<!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how - to - use -->
2023-09-23 22:28:49 +00:00
< link href = "../../css/fontawesome-all.min.css?1695508122" rel = "stylesheet" media = "print" onload = "this.media='all';this.onload=null;" > < noscript > < link href = "../../css/fontawesome-all.min.css?1695508122" rel = "stylesheet" > < / noscript >
< link href = "../../css/nucleus.css?1695508122" rel = "stylesheet" >
< link href = "../../css/auto-complete.css?1695508122" rel = "stylesheet" media = "print" onload = "this.media='all';this.onload=null;" > < noscript > < link href = "../../css/auto-complete.css?1695508122" rel = "stylesheet" > < / noscript >
< link href = "../../css/perfect-scrollbar.min.css?1695508122" rel = "stylesheet" >
< link href = "../../css/fonts.css?1695508122" rel = "stylesheet" media = "print" onload = "this.media='all';this.onload=null;" > < noscript > < link href = "../../css/fonts.css?1695508122" rel = "stylesheet" > < / noscript >
< link href = "../../css/theme.css?1695508122" rel = "stylesheet" >
< link href = "../../css/theme-auto.css?1695508122" rel = "stylesheet" id = "R-variant-style" >
< link href = "../../css/variant.css?1695508122" rel = "stylesheet" >
< link href = "../../css/print.css?1695508122" rel = "stylesheet" media = "print" >
< link href = "../../css/format-print.css?1695508122" rel = "stylesheet" >
< link href = "../../css/ie.css?1695508122" rel = "stylesheet" >
< script src = "../../js/url.js?1695508122" > < / script >
< script src = "../../js/variant.js?1695508122" > < / script >
2023-08-25 17:35:54 +00:00
< 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_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 >
2023-09-23 08:19:35 +00:00
#R-body img.bg-white {
2023-08-25 17:35:54 +00:00
background-color: white;
}
< / style >
< / head >
< body class = "mobile-support print disableInlineCopyToClipboard" data-url = "../../cont/imageeffects/index.html" >
2023-09-23 08:19:35 +00:00
< div id = "R-body" class = "default-animation" >
< div id = "R-body-overlay" > < / div >
< nav id = "R-topbar" >
2023-09-18 18:49:44 +00:00
< div class = "topbar-wrapper" >
2023-09-13 21:30:04 +00:00
< div class = "topbar-sidebar-divider" > < / div >
2023-09-18 18:49:44 +00:00
< 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)" >
2023-09-12 21:10:21 +00:00
< i class = "fa-fw fas fa-bars" > < / i >
< / button >
< / div >
2023-09-13 21:30:04 +00:00
< / div >
2023-09-20 22:28:27 +00:00
< ol class = "topbar-breadcrumbs breadcrumbs highlightable" itemscope itemtype = "http://schema.org/BreadcrumbList" > < li
2023-09-21 15:25:13 +00:00
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 = "2" > > < / li > < li
2023-09-23 22:28:49 +00:00
itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement">< span itemprop = "name" > Image Effects< / span > < meta itemprop = "position" content = "2" > < / li >
2023-09-13 21:30:04 +00:00
< / ol >
2023-09-18 18:49:44 +00:00
< div class = "topbar-area topbar-area-end" data-area = "end" >
2023-09-12 21:19:47 +00:00
< / div >
2023-08-25 17:35:54 +00:00
< / div >
< / nav >
2023-09-23 08:19:35 +00:00
< div id = "R-main-overlay" > < / div >
< main id = "R-body-inner" class = "highlightable default" tabindex = "-1" >
2023-08-25 17:35:54 +00:00
< 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 >
2023-09-23 22:28:49 +00:00
< div class = "tab-panel" data-tab-group = "a370f102e65fb179644029c07305d2dc" >
2023-08-25 17:35:54 +00:00
< div class = "tab-nav" >
< div class = "tab-nav-title" > ​ < / div >
< button
2023-09-05 11:10:04 +00:00
data-tab-item="configtoml"
2023-08-25 17:35:54 +00:00
class="tab-nav-button tab-panel-style cstyle initial active"
2023-09-23 22:28:49 +00:00
onclick="switchTab('a370f102e65fb179644029c07305d2dc','configtoml')"
2023-08-25 17:35:54 +00:00
>
2023-09-21 19:35:16 +00:00
< span >
2023-08-25 17:35:54 +00:00
< div class = "tab-nav-hidden" > config.toml< / div >
< div class = "tab-nav-text" > config.toml< / div >
2023-09-21 19:35:16 +00:00
< / span >
2023-08-25 17:35:54 +00:00
< / button >
< / div >
< div class = "tab-content-container" >
< div
2023-09-05 11:10:04 +00:00
data-tab-item="configtoml"
2023-08-25 17:35:54 +00:00
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 >
2023-09-23 22:28:49 +00:00
< div class = "tab-panel" data-tab-group = "f776033464cd761ca0659d3fde36ffe1" >
2023-08-25 17:35:54 +00:00
< 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"
2023-09-23 22:28:49 +00:00
onclick="switchTab('f776033464cd761ca0659d3fde36ffe1','frontmatter')"
2023-08-25 17:35:54 +00:00
>
2023-09-21 19:35:16 +00:00
< span >
2023-08-25 17:35:54 +00:00
< div class = "tab-nav-hidden" > frontmatter< / div >
< div class = "tab-nav-text" > frontmatter< / div >
2023-09-21 19:35:16 +00:00
< / span >
2023-08-25 17:35:54 +00:00
< / 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 >
2023-09-23 22:28:49 +00:00
< div class = "tab-panel" data-tab-group = "533888644c59fd57d22e5fc568d96ece" >
2023-08-25 17:35:54 +00:00
< div class = "tab-nav" >
< div class = "tab-nav-title" > ​ < / div >
< button
2023-09-05 11:10:04 +00:00
data-tab-item="url"
2023-08-25 17:35:54 +00:00
class="tab-nav-button tab-panel-style cstyle initial active"
2023-09-23 22:28:49 +00:00
onclick="switchTab('533888644c59fd57d22e5fc568d96ece','url')"
2023-08-25 17:35:54 +00:00
>
2023-09-21 19:35:16 +00:00
< span >
2023-08-25 17:35:54 +00:00
< div class = "tab-nav-hidden" > URL< / div >
< div class = "tab-nav-text" > URL< / div >
2023-09-21 19:35:16 +00:00
< / span >
2023-08-25 17:35:54 +00:00
< / button >
< / div >
< div class = "tab-content-container" >
< div
2023-09-05 11:10:04 +00:00
data-tab-item="url"
2023-08-25 17:35:54 +00:00
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 >
2023-09-23 22:28:49 +00:00
< div class = "tab-panel" data-tab-group = "2cd83ce6a9d558b50cff671b8fa1bf16" >
2023-08-25 17:35:54 +00:00
< div class = "tab-nav" >
< div class = "tab-nav-title" > ​ < / div >
< button
2023-09-05 11:10:04 +00:00
data-tab-item="result"
2023-08-25 17:35:54 +00:00
class="tab-nav-button tab-panel-style cstyle initial active"
2023-09-23 22:28:49 +00:00
onclick="switchTab('2cd83ce6a9d558b50cff671b8fa1bf16','result')"
2023-08-25 17:35:54 +00:00
>
2023-09-21 19:35:16 +00:00
< span >
2023-08-25 17:35:54 +00:00
< div class = "tab-nav-hidden" > Result< / div >
< div class = "tab-nav-text" > Result< / div >
2023-09-21 19:35:16 +00:00
< / span >
2023-08-25 17:35:54 +00:00
< / button >
< / div >
< div class = "tab-content-container" >
< div
2023-09-05 11:10:04 +00:00
data-tab-item="result"
2023-08-25 17:35:54 +00:00
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 >
2023-09-23 22:28:49 +00:00
< div class = "tab-panel" data-tab-group = "3358f71b94d0765952d058ddb5f1141d" >
2023-08-25 17:35:54 +00:00
< div class = "tab-nav" >
< div class = "tab-nav-title" > ​ < / div >
< button
2023-09-05 11:10:04 +00:00
data-tab-item="html"
2023-08-25 17:35:54 +00:00
class="tab-nav-button tab-panel-style cstyle initial active"
2023-09-23 22:28:49 +00:00
onclick="switchTab('3358f71b94d0765952d058ddb5f1141d','html')"
2023-08-25 17:35:54 +00:00
>
2023-09-21 19:35:16 +00:00
< span >
2023-08-25 17:35:54 +00:00
< div class = "tab-nav-hidden" > HTML< / div >
< div class = "tab-nav-text" > HTML< / div >
2023-09-21 19:35:16 +00:00
< / span >
2023-08-25 17:35:54 +00:00
< / button >
< / div >
< div class = "tab-content-container" >
< div
2023-09-05 11:10:04 +00:00
data-tab-item="html"
2023-08-25 17:35:54 +00:00
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 >
2023-09-23 22:28:49 +00:00
< script src = "../../js/clipboard.min.js?1695508122" defer > < / script >
< script src = "../../js/perfect-scrollbar.min.js?1695508122" defer > < / script >
< script src = "../../js/theme.js?1695508122" defer > < / script >
2023-08-25 17:35:54 +00:00
< / body >
< / html >
