From 3a77d4c703a1cd931a1e4473a6edda2b4af231a2 Mon Sep 17 00:00:00 2001 From: Patrick Magauran Date: Thu, 26 Nov 2020 13:59:15 -0500 Subject: [PATCH] Update layout to use Hugo Image Processing. Created shortcode rimg that uses the srcset attribute to display responsive images. --- layouts/partials/cards/project.html | 8 +- layouts/partials/cards/skill.html | 10 ++- .../partials/helpers/get-author-image.html | 7 +- layouts/partials/helpers/get-hero.html | 18 ++++- layouts/partials/navigators/navbar-2.html | 17 +++- layouts/partials/navigators/navbar.html | 17 +++- .../partials/sections/achievements/entry.html | 16 +++- layouts/partials/sections/home.html | 79 ++++++++++++++++++- layouts/shortcodes/rimg.html | 53 +++++++++++++ static/assets/js/home.js | 13 +++ 10 files changed, 218 insertions(+), 20 deletions(-) create mode 100644 layouts/shortcodes/rimg.html diff --git a/layouts/partials/cards/project.html b/layouts/partials/cards/project.html index 3f21d31..7c5f417 100644 --- a/layouts/partials/cards/project.html +++ b/layouts/partials/cards/project.html @@ -8,7 +8,13 @@
{{ if .logo }} - {{ .name }} + + {{ $logoImage:= resources.Get .logo}} + {{ if $logoImage }} + {{ $logoImage := $logoImage.Fit "24x24" }} + + {{ .name }} + {{ end }} {{ end }}
{{ .name }}
diff --git a/layouts/partials/cards/skill.html b/layouts/partials/cards/skill.html index 4478e1e..bb3339f 100644 --- a/layouts/partials/cards/skill.html +++ b/layouts/partials/cards/skill.html @@ -2,8 +2,14 @@
- {{ if .icon }} - {{ .name }} + {{ if .logo }} + + {{ $logoImage:= resources.Get .logo}} + {{ if $logoImage }} + {{ $logoImage := $logoImage.Fit "24x24" }} + + {{ .name }} + {{ end }} {{ end }}
{{ .name }}
diff --git a/layouts/partials/helpers/get-author-image.html b/layouts/partials/helpers/get-author-image.html index 8142ddc..6e336ea 100644 --- a/layouts/partials/helpers/get-author-image.html +++ b/layouts/partials/helpers/get-author-image.html @@ -14,4 +14,9 @@ {{ end }} {{ end }} {{ end }} -{{ return $authorImage }} +{{ $authorImage:= resources.Get $authorImage}} +{{ if $authorImage }} +{{ $authorImage := $authorImage.Fit "120x120" }} +{{ return $authorImage.RelPermalink }} +{{ end }} + diff --git a/layouts/partials/helpers/get-hero.html b/layouts/partials/helpers/get-hero.html index 72ef4ec..001a379 100644 --- a/layouts/partials/helpers/get-hero.html +++ b/layouts/partials/helpers/get-hero.html @@ -1,5 +1,15 @@ -{{ $heroImage:= "/assets/images/default-hero.jpg"}} -{{ if .Params.hero }} - {{ $heroImage = .Params.hero }} +{{ $heroImage := .Page.Resources.GetMatch "hero.{jpg,png}"}} +{{ .Scratch.Set "heroScratch" $heroImage }} + +{{ if not $heroImage }} + +{{ $heroImage:= resources.Get "default-hero.jpg"}} +{{ .Scratch.Set "heroScratch" $heroImage }} + +{{ end }} + +{{ $heroImage := .Scratch.Get "heroScratch" }} +{{ if $heroImage }} +{{ $heroImage := $heroImage.Resize "148x" }} +{{ return $heroImage.RelPermalink }} {{ end }} -{{ return $heroImage }} diff --git a/layouts/partials/navigators/navbar-2.html b/layouts/partials/navigators/navbar-2.html index e057e21..a13339f 100644 --- a/layouts/partials/navigators/navbar-2.html +++ b/layouts/partials/navigators/navbar-2.html @@ -6,6 +6,17 @@ {{ if site.Params.logo.inverted }} {{ $invertedLogo = site.Params.logo.inverted }} {{ end }} +{{ $mainLogo:= resources.Get $mainLogo}} +{{ if $mainLogo }} +{{ $mainLogo = $mainLogo.Resize "42x" }} +{{ $mainLogo = $mainLogo.RelPermalink}} + +{{ end }} +{{ $invertedLogo:= resources.Get $invertedLogo}} +{{ if $invertedLogo }} +{{ $invertedLogo = $invertedLogo.Resize "42x" }} +{{ $invertedLogo = $invertedLogo.RelPermalink}} +{{ end }}
- - + + diff --git a/layouts/partials/navigators/navbar.html b/layouts/partials/navigators/navbar.html index f936796..cb9efd2 100644 --- a/layouts/partials/navigators/navbar.html +++ b/layouts/partials/navigators/navbar.html @@ -6,6 +6,17 @@ {{ if site.Params.logo.inverted }} {{ $invertedLogo = site.Params.logo.inverted }} {{ end }} +{{ $mainLogo:= resources.Get $mainLogo}} +{{ if $mainLogo }} +{{ $mainLogo = $mainLogo.Resize "42x" }} +{{ $mainLogo = $mainLogo.RelPermalink}} + +{{ end }} +{{ $invertedLogo:= resources.Get $invertedLogo}} +{{ if $invertedLogo }} +{{ $invertedLogo = $invertedLogo.Resize "42x" }} +{{ $invertedLogo = $invertedLogo.RelPermalink}} +{{ end }} {{ $sections:= site.Data.sections }} {{ if (index site.Data site.Language.Lang).sections }} @@ -15,7 +26,7 @@ diff --git a/layouts/partials/sections/achievements/entry.html b/layouts/partials/sections/achievements/entry.html index 4f665ce..b2e6cb9 100644 --- a/layouts/partials/sections/achievements/entry.html +++ b/layouts/partials/sections/achievements/entry.html @@ -1,6 +1,16 @@ -

{{ .title }}

@@ -8,4 +18,6 @@

{{ .title }}

{{ .summary | markdownify }}

+ +
diff --git a/layouts/partials/sections/home.html b/layouts/partials/sections/home.html index 4bf85e2..5cad876 100644 --- a/layouts/partials/sections/home.html +++ b/layouts/partials/sections/home.html @@ -15,23 +15,94 @@ {{ $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 }}
+ +
-

{{ $author.greeting }} {{ $name }}

diff --git a/layouts/shortcodes/rimg.html b/layouts/shortcodes/rimg.html new file mode 100644 index 0000000..3b07819 --- /dev/null +++ b/layouts/shortcodes/rimg.html @@ -0,0 +1,53 @@ +{{/* Combination of code taken from: https://alexlakatos.com/web/2020/07/17/hugo-image-processing/ & https://dev.to/stereobooster/responsive-images-for-hugo-dn9}} + +{{/* get file that matches the filename as specified as src="" in shortcode */}} +{{ $src := resources.GetMatch (.Get "src") }} + +{{ if in (.Get "src") "http" }} + +{{ else }} +{{ if in (.Get "src") ".gif" }} + +{{ else }} +{{/* set image sizes, these are hardcoded for now */}} + +{{ $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 }} + +{{/* add the processed images to the scratch */}} + + +{{/* only use images smaller than or equal to the src (original) image size */}} + +{{ end }} +{{ end }} \ No newline at end of file diff --git a/static/assets/js/home.js b/static/assets/js/home.js index fd248b4..fe93469 100644 --- a/static/assets/js/home.js +++ b/static/assets/js/home.js @@ -329,6 +329,19 @@ var projectCards; this.parentElement.classList.toggle("col-lg-12"); this.parentElement.classList.toggle("col-md-12"); this.parentElement.classList.toggle("col-sm-12"); + if (this.children["SmallImage"].hasAttribute("active")) { + let mainLogo = this.children["LargeImage"].getAttribute("Style"); + this.children["LargeImage"].setAttribute("active",true); + this.children["SmallImage"].removeAttribute("active"); + + this.setAttribute("Style", mainLogo); + } else { + let mainLogo = this.children["SmallImage"].getAttribute("Style"); + this.children["SmallImage"].setAttribute("active",true); + this.children["LargeImage"].removeAttribute("active"); + this.setAttribute("Style", mainLogo); + } + if (this.children["caption"] != undefined) { this.children["caption"].classList.toggle("hidden"); }