FunctionalHacker/hugo-toha
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update layout to use Hugo Image Processing.

Browse source 
Created shortcode rimg that uses the srcset attribute to display responsive images.
This commit is contained in:
Patrick Magauran 2020-11-26 13:59:15 -05:00
parent da036923f3
commit 3a77d4c703
10 changed files with 218 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

8
layouts/partials/cards/project.html
View file

@ -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>

10
layouts/partials/cards/skill.html
View file

@ -2,8 +2,14 @@
<a class="skill-card-link" href="{{ if .url }}{{ .url }}{{ else }}#{{ 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}}
{{ if $logoImage }}
{{ $logoImage := $logoImage.Fit "24x24" }}
<img class="card-img-xs" src="{{ $logoImage.RelPermalink }}" alt="{{ .name }}" />
{{ end }}
{{ end }}
<h5 class="card-title">{{ .name }}</h5>
</div>

7
layouts/partials/helpers/get-author-image.html
View file

@ -14,4 +14,9 @@
{{ end }}
{{ end }}
{{ end }}
{{ return $authorImage }}
{{ $authorImage:= resources.Get $authorImage}}
{{ if $authorImage }}
{{ $authorImage := $authorImage.Fit "120x120" }}
{{ return $authorImage.RelPermalink }}
{{ end }}

18
layouts/partials/helpers/get-hero.html
View file

@ -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 }}

17
layouts/partials/navigators/navbar-2.html
View file

@ -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 }}
<nav class="navbar navbar-expand-xl top-navbar final-navbar shadow">
<div class="container">
@ -13,7 +24,7 @@
<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 +40,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>

17
layouts/partials/navigators/navbar.html
View file

@ -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 @@
<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 +83,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>

16
layouts/partials/sections/achievements/entry.html
View file

@ -1,6 +1,16 @@
<div
{{ $achievementImage:= resources.Get .image}}
{{ $achievementImageLg := ""}}
{{ $achievementImageSm := ""}}
{{ if $achievementImage }}
{{ $achievementImageSm = $achievementImage.Resize "x300" }}
{{ $achievementImageSm = $achievementImageSm.RelPermalink }}
{{ $achievementImageLg = $achievementImage.Resize "x1500" }}
{{ $achievementImageLg = $achievementImageLg.RelPermalink }}
{{ end }}
<div
class="achievement-entry text-center"
style="background-image: url('{{ strings.TrimSuffix "/" site.BaseURL }}{{ .image | relURL }}');"
style="background-image: url('{{ $achievementImageSm }}');"
>
<i class="fas fa-search-plus" id="enlarge-icon"></i>
<h4 class="title" id="achievement-title">{{ .title }}</h4>
@ -8,4 +18,6 @@
<h4>{{ .title }}</h4>
<p>{{ .summary | markdownify }}</p>
</div>
<span style="background-image: url('{{ $achievementImageSm }}');" class="d-none" id="SmallImage" active="true"></span>
<span style="background-image: url('{{ $achievementImageLg }}');" class="d-none" id="LargeImage"></span>
</div>

79
layouts/partials/sections/home.html
View file

@ -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 }}
<div class="container-fluid home" id="home">
<style>
/* 0 to 299 */
#homePageBackgroundImageDivStyled {
background-image: url('{{ $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('{{ $small.RelPermalink }}');
}
}
@media (min-width: 801px) and (max-width: 1200px) { /* or 301 if you want really the same as previously. */
#homePageBackgroundImageDivStyled {
background-image: url('{{ $medium.RelPermalink }}');
}
}
@media (min-width: 1201px) and (max-width: 1500px) { /* or 301 if you want really the same as previously. */
#homePageBackgroundImageDivStyled {
background-image: url('{{ $large.RelPermalink }}');
}
}
@media (min-width: 1501px) { /* or 301 if you want really the same as previously. */
#homePageBackgroundImageDivStyled {
background-image: url('{{ $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>

53
layouts/shortcodes/rimg.html Normal file
View file

@ -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" }}
<img src="{{$src}}" {{ with .Get "alt" }}alt="{{.}}"{{ else }}alt=""{{ end }}>
{{ else }}
{{ if in (.Get "src") ".gif" }}
<img src="{{$src.RelPermalink}}" {{ with .Get "alt" }}alt="{{.}}"{{ else }}alt=""{{ end }}>
{{ 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 */}}
<img
{{ with .Get "sizes" }}sizes='{{.}}'{{ else }}{{ end }}
srcset='
{{ if ge $src.Width "500" }}
{{ with $tiny.RelPermalink }}{{.}} 500w{{ end }}
{{ end }}
{{ if ge $src.Width "800" }}
{{ with $small.RelPermalink }}, {{.}} 800w{{ end }}
{{ end }}
{{ if ge $src.Width "1200" }}
{{ with $medium.RelPermalink }}, {{.}} 1200w{{ end }}
{{ end }}
{{ if ge $src.Width "1500" }}
{{ with $large.RelPermalink }}, {{.}} 1500w {{ end }}
{{ end }}'
{{ if .Get (print $medium) }}
src="{{ $medium.RelPermalink }}"
{{ else }}
src="{{ $src.RelPermalink }}"
{{ end }}
{{ with .Get "alt" }}alt='{{.}}'{{ end }}>
{{ end }}
{{ end }}

13
static/assets/js/home.js
View file

@ -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");
}