Transition to Hugo Image Processing (#173)
* Update layout to use Hugo Image Processing. Created shortcode rimg that uses the srcset attribute to display responsive images. * Copy Static images to assets folder. * Add image processing to missing components + Update examples * Fix rendering in https://themes.gohugo.io/ Co-authored-by: Emruz Hossain <emruz@appscode.com>
This commit is contained in:
Patrick Magauran
GitHub
parent
ba1d6014d9
commit
a2b3c7fda2
53 changed files with 352 additions and 75 deletions
|
|
@ -8,7 +8,13 @@
|
|||
<div>
|
||||
<div class="d-flex">
|
||||
{{ if .logo }}
|
||||
<img class="card-img-xs" src="{{ .logo | relURL }}" alt="{{ .name }}" />
|
||||
|
||||
{{ $logoImage:= resources.Get .logo}}
|
||||
{{ if $logoImage }}
|
||||
{{ $logoImage := $logoImage.Fit "24x24" }}
|
||||
|
||||
<img class="card-img-xs" src="{{ $logoImage.RelPermalink }}" alt="{{ .name }}" />
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
<h5 class="card-title mb-0">{{ .name }}</h5>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,8 +2,15 @@
|
|||
<a class="skill-card-link" href="{{ if .url }}{{ .url }}{{ else }}javascript:void(0){{ end }}">
|
||||
<div class="card">
|
||||
<div class="card-head d-flex">
|
||||
{{ if .icon }}
|
||||
<img class="card-img-xs" src="{{ .icon | relURL }}" alt="{{ .name }}" />
|
||||
{{ if .logo }}
|
||||
{{ $logoImage := resources.Get .logo }}
|
||||
|
||||
{{/* svg don't support "Fit" operation */}}
|
||||
{{ if ne $logoImage.MediaType.SubType "svg" }}
|
||||
{{ $logoImage := $logoImage.Fit "24x24" }}
|
||||
{{ end }}
|
||||
|
||||
<img class="card-img-xs" src="{{ $logoImage.RelPermalink }}" alt="{{ .name }}" />
|
||||
{{ end }}
|
||||
<h5 class="card-title">{{ .name }}</h5>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -16,6 +16,23 @@
|
|||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
{{/* footer logos */}}
|
||||
{{ $themeLogo := "/images/theme-logo.png" }}
|
||||
{{ $hugoLogo := "/images/hugo-logo.svg" }}
|
||||
|
||||
{{/* resize the logos. don't resize svg because it is not supported */}}
|
||||
{{ $themeLogo:= resources.Get $themeLogo}}
|
||||
{{ if and $themeLogo (ne $themeLogo.MediaType.SubType "svg") }}
|
||||
{{ $themeLogo = $themeLogo.Resize "32x" }}
|
||||
{{ end }}
|
||||
{{ $themeLogo = $themeLogo.RelPermalink}}
|
||||
|
||||
{{ $hugoLogo:= resources.Get $hugoLogo}}
|
||||
{{ if and $hugoLogo (ne $hugoLogo.MediaType.SubType "svg")}}
|
||||
{{ $hugoLogo = $hugoLogo.Resize "32x" }}
|
||||
{{ end }}
|
||||
{{ $hugoLogo = $hugoLogo.RelPermalink}}
|
||||
|
||||
<footer class="container-fluid text-center align-content-center footer pb-2">
|
||||
<div class="container pt-5">
|
||||
<div class="row text-left">
|
||||
|
|
@ -76,7 +93,7 @@
|
|||
<div class="row text-left">
|
||||
<div class="col-md-4">
|
||||
<a id="theme" href="https://github.com/hossainemruz/toha" target="#">
|
||||
<img src="{{ "/assets/images/inverted-logo.png" | relURL }}">
|
||||
<img src="{{ $themeLogo }}">
|
||||
Toha
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -84,7 +101,7 @@
|
|||
<div class="col-md-4 text-right">
|
||||
<a id="hugo" href="https://gohugo.io/">{{ i18n "hugoAttributionText" }}
|
||||
<img
|
||||
src="{{ "/assets/images/hugo-logo-wide.svg" | relURL }}"
|
||||
src="{{ $hugoLogo }}"
|
||||
alt="Hugo Logo"
|
||||
height="18"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,18 @@
|
|||
{{/* default favicon */}}
|
||||
{{ $favicon := "/images/favicon.png" }}
|
||||
|
||||
{{/* if favicon is provided in the config, then use that */}}
|
||||
{{ if site.Params.logo.favicon }}
|
||||
{{ $favicon = site.Params.logo.favicon }}
|
||||
{{ end }}
|
||||
|
||||
{{/* resize the favicon. don't resize svg because it is not supported */}}
|
||||
{{ $favicon := resources.Get $favicon }}
|
||||
{{ if and $favicon (ne $favicon.MediaType.SubType "svg") }}
|
||||
{{ $favicon = $favicon.Resize "42x" }}
|
||||
{{ end }}
|
||||
{{ $favicon = $favicon.RelPermalink}}
|
||||
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
||||
|
|
@ -13,7 +28,7 @@
|
|||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" />
|
||||
|
||||
<!--================= fab-icon =========================-->
|
||||
<link rel="icon" type="image/png" href="{{ site.Params.logo.favicon | default "/assets/images/favicon.png" | relURL }}" />
|
||||
<link rel="icon" type="image/png" href="{{ $favicon }}" />
|
||||
|
||||
<!--================= custom style overrides =========================-->
|
||||
<link rel="stylesheet" href="{{ "/assets/css/style.css" | relURL }}"/>
|
||||
|
|
|
|||
|
|
@ -2,11 +2,14 @@
|
|||
{{ if (index site.Data site.Language.Lang).author }}
|
||||
{{ $author = (index site.Data site.Language.Lang).author }}
|
||||
{{ end }}
|
||||
{{ $authorImage:= "/assets/images/default-avatar.png" }}
|
||||
|
||||
{{/* default author image */}}
|
||||
{{ $authorImage:= "/images/default-avatar.png" }}
|
||||
{{ if $author.image }}
|
||||
{{ $authorImage = $author.image }}
|
||||
{{ end }}
|
||||
|
||||
{{/* if author image is provided in author's data, then use that */}}
|
||||
{{ if eq (printf "%T" .Params.author ) "maps.Params" }}
|
||||
{{ with .Params.author }}
|
||||
{{ if .image }}
|
||||
|
|
@ -14,4 +17,13 @@
|
|||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ return $authorImage }}
|
||||
|
||||
{{/* apply image processing. don't use "Fit" in svg because its not supported */}}
|
||||
{{ $authorImage:= resources.Get $authorImage}}
|
||||
{{ if and $authorImage (ne $authorImage.MediaType.SubType "svg") }}
|
||||
{{ $authorImage := $authorImage.Fit "120x120" }}
|
||||
{{ end }}
|
||||
|
||||
{{/* return the author image link */}}
|
||||
{{ return $authorImage.RelPermalink }}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,19 @@
|
|||
{{ $heroImage:= "/assets/images/default-hero.jpg"}}
|
||||
{{ if .Params.hero }}
|
||||
{{ $heroImage = .Params.hero }}
|
||||
{{/* check if there is any hero image in the same folder as the markdown file */}}
|
||||
{{ $heroImage := .Page.Resources.GetMatch "hero.{jpg,png,svg}"}}
|
||||
{{ .Scratch.Set "heroScratch" $heroImage }}
|
||||
|
||||
{{/* if hero image is not provided, then use the default hero image */}}
|
||||
{{ if not $heroImage }}
|
||||
{{ $heroImage := resources.Get "images/default-hero.jpg"}}
|
||||
{{ .Scratch.Set "heroScratch" $heroImage }}
|
||||
{{ end }}
|
||||
{{ return $heroImage }}
|
||||
|
||||
{{ $heroImage := .Scratch.Get "heroScratch" }}
|
||||
|
||||
{{/* resize hero image. don't resize if the image is an svg */}}
|
||||
{{ if and $heroImage (ne $heroImage.MediaType.SubType "svg") }}
|
||||
{{ $heroImage := $heroImage.Resize "148x" }}
|
||||
{{ end }}
|
||||
|
||||
{{/* return the hero image */}}
|
||||
{{ return $heroImage.RelPermalink }}
|
||||
|
|
|
|||
|
|
@ -1,19 +1,36 @@
|
|||
{{ $mainLogo:="/assets/images/main-logo.png" }}
|
||||
{{ $invertedLogo:="/assets/images/inverted-logo.png" }}
|
||||
{{/* default logos */}}
|
||||
{{ $mainLogo := "/images/main-logo.png" }}
|
||||
{{ $invertedLogo := "/images/inverted-logo.png" }}
|
||||
|
||||
{{/* if custom logo has been provided in the config file, then use them */}}
|
||||
{{ if site.Params.logo.main }}
|
||||
{{ $mainLogo = site.Params.logo.main }}
|
||||
{{ end }}
|
||||
|
||||
{{ if site.Params.logo.inverted }}
|
||||
{{ $invertedLogo = site.Params.logo.inverted }}
|
||||
{{ end }}
|
||||
|
||||
{{/* resize the logos. don't resize svg because it is not supported */}}
|
||||
{{ $mainLogo := resources.Get $mainLogo}}
|
||||
{{ if and $mainLogo (ne $mainLogo.MediaType.SubType "svg") }}
|
||||
{{ $mainLogo = $mainLogo.Resize "42x" }}
|
||||
{{ end }}
|
||||
{{ $mainLogo = $mainLogo.RelPermalink}}
|
||||
|
||||
{{ $invertedLogo := resources.Get $invertedLogo}}
|
||||
{{ if and $invertedLogo (ne $invertedLogo.MediaType.SubType "svg") }}
|
||||
{{ $invertedLogo = $invertedLogo.Resize "42x" }}
|
||||
{{ end }}
|
||||
{{ $invertedLogo = $invertedLogo.RelPermalink}}
|
||||
|
||||
<nav class="navbar navbar-expand-xl top-navbar final-navbar shadow">
|
||||
<div class="container">
|
||||
<button class="navbar-toggler navbar-light" id="sidebar-toggler" type="button" onclick="toggleSidebar()">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<a class="navbar-brand" href="{{ site.BaseURL | relLangURL }}">
|
||||
<img src="{{ $mainLogo | relURL }}">
|
||||
<img src="{{ $mainLogo }}">
|
||||
{{- site.Title -}}
|
||||
</a>
|
||||
<button class="navbar-toggler navbar-light" id="toc-toggler" type="button" onclick="toggleTOC()">
|
||||
|
|
@ -29,6 +46,6 @@
|
|||
</div>
|
||||
</div>
|
||||
<!-- Store the logo information in a hidden img for the JS -->
|
||||
<img src="{{ $mainLogo | relURL }}" class="d-none" id="main-logo">
|
||||
<img src="{{ $invertedLogo | relURL }}" class="d-none" id="inverted-logo">
|
||||
<img src="{{ $mainLogo }}" class="d-none" id="main-logo">
|
||||
<img src="{{ $invertedLogo }}" class="d-none" id="inverted-logo">
|
||||
</nav>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,8 @@
|
|||
{{ $mainLogo:="/assets/images/main-logo.png" }}
|
||||
{{ $invertedLogo:="/assets/images/inverted-logo.png" }}
|
||||
{{/* default logos */}}
|
||||
{{ $mainLogo := "/images/site/main-logo.png" }}
|
||||
{{ $invertedLogo := "/images/inverted-logo.png" }}
|
||||
|
||||
{{/* if custom logo is used, them */}}
|
||||
{{ if site.Params.logo.main }}
|
||||
{{ $mainLogo = site.Params.logo.main }}
|
||||
{{ end }}
|
||||
|
|
@ -7,7 +10,20 @@
|
|||
{{ $invertedLogo = site.Params.logo.inverted }}
|
||||
{{ end }}
|
||||
|
||||
{{ $sections:= site.Data.sections }}
|
||||
{{/* resize the logos. don't resize svg because it is not supported */}}
|
||||
{{ $mainLogo := resources.Get $mainLogo}}
|
||||
{{ if and $mainLogo (ne $mainLogo.MediaType.SubType "svg") }}
|
||||
{{ $mainLogo = $mainLogo.Resize "42x" }}
|
||||
{{ end }}
|
||||
{{ $mainLogo = $mainLogo.RelPermalink}}
|
||||
|
||||
{{ $invertedLogo := resources.Get $invertedLogo}}
|
||||
{{ if and $invertedLogo (ne $invertedLogo.MediaType.SubType "svg")}}
|
||||
{{ $invertedLogo = $invertedLogo.Resize "42x" }}
|
||||
{{ end }}
|
||||
{{ $invertedLogo = $invertedLogo.RelPermalink}}
|
||||
|
||||
{{ $sections := site.Data.sections }}
|
||||
{{ if (index site.Data site.Language.Lang).sections }}
|
||||
{{ $sections = (index site.Data site.Language.Lang).sections }}
|
||||
{{ end }}
|
||||
|
|
@ -15,7 +31,7 @@
|
|||
<nav class="navbar navbar-expand-xl top-navbar initial-navbar" id="top-navbar">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="{{ site.BaseURL | relLangURL }}">
|
||||
<img src="{{ $invertedLogo | relURL }}" id="logo">
|
||||
<img src="{{ $invertedLogo }}" id="logo">
|
||||
{{- site.Title -}}
|
||||
</a>
|
||||
<button
|
||||
|
|
@ -72,6 +88,6 @@
|
|||
</div>
|
||||
</div>
|
||||
<!-- Store the logo information in a hidden img for the JS -->
|
||||
<img src="{{ $mainLogo | relURL }}" class="d-none" id="main-logo">
|
||||
<img src="{{ $invertedLogo | relURL }}" class="d-none" id="inverted-logo">
|
||||
<img src="{{ $mainLogo }}" class="d-none" id="main-logo">
|
||||
<img src="{{ $invertedLogo }}" class="d-none" id="inverted-logo">
|
||||
</nav>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,18 @@
|
|||
<div
|
||||
{{ $achievementImage := resources.Get .image }}
|
||||
{{ $achievementImageLg := ""}}
|
||||
{{ $achievementImageSm := ""}}
|
||||
|
||||
{{/* resize the images. don't resize svg image because its not supported */}}
|
||||
{{ if $achievementImage }}
|
||||
{{ $achievementImageSm = $achievementImage.Resize "x300" }}
|
||||
{{ $achievementImageSm = $achievementImageSm.RelPermalink }}
|
||||
{{ $achievementImageLg = $achievementImage.Resize "x1500" }}
|
||||
{{ $achievementImageLg = $achievementImageLg.RelPermalink }}
|
||||
{{ end }}
|
||||
{{/* don't use "background-image: url('{{ $achievementImageSm }}');" Otherwise the images won't show in https://themes.gohugo.io/ */}}
|
||||
<div
|
||||
class="achievement-entry text-center"
|
||||
style="background-image: url('{{ strings.TrimSuffix "/" site.BaseURL }}{{ .image | relURL }}');"
|
||||
style="background-image: url('{{ strings.TrimSuffix "/" site.BaseURL }}{{ $achievementImageSm }}');"
|
||||
>
|
||||
<i class="fas fa-search-plus" id="enlarge-icon"></i>
|
||||
<h4 class="title" id="achievement-title">{{ .title }}</h4>
|
||||
|
|
@ -8,4 +20,6 @@
|
|||
<h4>{{ .title }}</h4>
|
||||
<p>{{ .summary | markdownify }}</p>
|
||||
</div>
|
||||
<span style="background-image: url('{{ strings.TrimSuffix "/" site.BaseURL }}{{ $achievementImageSm }}');" class="d-none" id="SmallImage" active="true"></span>
|
||||
<span style="background-image: url('{{ strings.TrimSuffix "/" site.BaseURL }}{{ $achievementImageLg }}');" class="d-none" id="LargeImage"></span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -15,23 +15,97 @@
|
|||
{{ $sections = (index site.Data site.Language.Lang).sections }}
|
||||
{{ end }}
|
||||
|
||||
{{ $backgroundImage:= "/assets/images/default-background.jpg" }}
|
||||
{{ $backgroundImage:= "/images/default-background.jpg" }}
|
||||
{{ if site.Params.background }}
|
||||
{{ $backgroundImage = site.Params.background }}
|
||||
{{ end }}
|
||||
|
||||
{{ $authorImage:= "/assets/images/default-avatar.png" }}
|
||||
|
||||
{{ $authorImage:= "/images/default-avatar.png" }}
|
||||
{{ if $author.image }}
|
||||
{{ $authorImage = $author.image }}
|
||||
{{ end }}
|
||||
{{ $authorImage := resources.Get $authorImage }}
|
||||
{{ $authorImage := $authorImage.Fit "148x148" }}
|
||||
|
||||
{{/* get file that matches the filename as specified as src="" in shortcode */}}
|
||||
{{ $src := resources.Get $backgroundImage }}
|
||||
|
||||
{{/* set image sizes, these are hardcoded for now, x dictates that images are resized to this width */}}
|
||||
|
||||
{{ $tinyw := default "500x" }}
|
||||
{{ $smallw := default "800x" }}
|
||||
{{ $mediumw := default "1200x" }}
|
||||
{{ $largew := default "1500x" }}
|
||||
|
||||
{{/* resize the src image to the given sizes */}}
|
||||
|
||||
{{ $tiny := $src.Resize $tinyw }}
|
||||
{{ $small := $src.Resize $smallw }}
|
||||
{{ $medium := $src.Resize $mediumw }}
|
||||
{{ $large := $src.Resize $largew }}
|
||||
|
||||
{{/* only use images smaller than or equal to the src (original) image size, as Hugo will upscale small images */}}
|
||||
{{/* set the sizes attribute to (min-width: 35em) 1200px, 100vw unless overridden in shortcode */}}
|
||||
|
||||
{{ if lt $src.Width "500" }}
|
||||
{{ $tiny := $src}}
|
||||
{{ $small := $src}}
|
||||
{{ $medium := $src}}
|
||||
{{ $large := $src}}
|
||||
{{ end }}
|
||||
|
||||
{{ if lt $src.Width "800" }}
|
||||
{{ $small := $src}}
|
||||
{{ $medium := $src}}
|
||||
{{ $large := $src}}
|
||||
{{ end }}
|
||||
|
||||
{{ if lt $src.Width "1200" }}
|
||||
{{ $medium := $src}}
|
||||
{{ $large := $src}}
|
||||
{{ end }}
|
||||
|
||||
{{ if lt $src.Width "1500" }}
|
||||
{{ $large := $src}}
|
||||
{{ end }}
|
||||
|
||||
<div class="container-fluid home" id="home">
|
||||
<style>
|
||||
/* 0 to 299 */
|
||||
#homePageBackgroundImageDivStyled {
|
||||
/*background-image: url('{{ $tiny.RelPermalink }}'); This does not work on https://themes.gohugo.io/ */
|
||||
background-image: url('{{ strings.TrimSuffix "/" site.BaseURL }}{{ $tiny.RelPermalink }}');
|
||||
}
|
||||
/* 300 to X */
|
||||
@media (min-width: 500px) and (max-width: 800px) { /* or 301 if you want really the same as previously. */
|
||||
#homePageBackgroundImageDivStyled {
|
||||
background-image: url('{{ strings.TrimSuffix "/" site.BaseURL }}{{ $small.RelPermalink }}');
|
||||
}
|
||||
}
|
||||
@media (min-width: 801px) and (max-width: 1200px) { /* or 301 if you want really the same as previously. */
|
||||
#homePageBackgroundImageDivStyled {
|
||||
background-image: url('{{ strings.TrimSuffix "/" site.BaseURL }}{{ $medium.RelPermalink }}');
|
||||
}
|
||||
}
|
||||
@media (min-width: 1201px) and (max-width: 1500px) { /* or 301 if you want really the same as previously. */
|
||||
#homePageBackgroundImageDivStyled {
|
||||
background-image: url('{{ strings.TrimSuffix "/" site.BaseURL }}{{ $large.RelPermalink }}');
|
||||
}
|
||||
}
|
||||
@media (min-width: 1501px) { /* or 301 if you want really the same as previously. */
|
||||
#homePageBackgroundImageDivStyled {
|
||||
background-image: url('{{ strings.TrimSuffix "/" site.BaseURL }}{{ $src.RelPermalink }}');
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<span class="on-the-fly-behavior"></span>
|
||||
<div
|
||||
id="homePageBackgroundImageDivStyled"
|
||||
class="background container-fluid"
|
||||
style="background-image: url('{{ strings.TrimSuffix "/" site.BaseURL }}{{ $backgroundImage | relURL }}');"
|
||||
></div>
|
||||
<div class="container content text-center">
|
||||
<img src="{{ $authorImage | relURL }}"
|
||||
<img src="{{ $authorImage.RelPermalink }}"
|
||||
class="rounded-circle mx-auto d-block img-fluid"
|
||||
/>
|
||||
<h1 class="greeting"> {{ $author.greeting }} {{ $name }}</h1>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue