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

Add image processing to missing components + Update examples

Browse source
This commit is contained in:
Emruz Hossain 2021-01-01 01:41:40 +06:00
parent 94138f89f0
commit 7317ba53de
26 changed files with 171 additions and 111 deletions
Download patch file Download diff file Expand all files Collapse all files

12
layouts/404.html
View file

@ -7,9 +7,19 @@
{{ end }}
{{ define "content" }}
{{/* not found image */}}
{{ $notFoundImage := "/images/404.png" }}
{{/* resize the image. don't resize svg because it is not supported */}}
{{ $notFoundImage := resources.Get $notFoundImage}}
{{ if and $notFoundImage (ne $notFoundImage.MediaType.SubType "svg") }}
{{ $notFoundImage = $notFoundImage.Resize "42x" }}
{{ end }}
{{ $notFoundImage = $notFoundImage.RelPermalink}}
<div class="container">
<div class="notFound">
<img src="{{ "/assets/images/404.png" | relURL }}" alt="">
<img src="{{ $notFoundImage }}" alt="">
<div class="message">
<h1>404</h1>
<h4>The page you are looking for is not there yet.</h4>

4
layouts/_default/single.html
View file

@ -35,13 +35,13 @@
<div class="content">
<div class="container p-0 read-area">
<!--Hero Area-->
<div class="hero-area col-sm-12" id="hero-area" style='background-image: url({{ strings.TrimSuffix "/" site.BaseURL }}{{ partial "helpers/get-hero.html" . | relURL }});'>
<div class="hero-area col-sm-12" id="hero-area" style='background-image: url({{ strings.TrimSuffix "/" site.BaseURL }}{{ partial "helpers/get-hero.html" . }});'>
</div>
<!--Content Start-->
<div class="page-content">
<div class="author-profile ml-auto align-self-lg-center">
<img class="rounded-circle" src='{{ partial "helpers/get-author-image.html" . | relURL }}'/>
<img class="rounded-circle" src='{{ partial "helpers/get-author-image.html" . }}'/>
<h5 class="author-name">{{ partial "helpers/get-author-name.html" . }}</h5>
<p>{{ .Page.Date.Format "January 2, 2006" }}</p>
</div>

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

@ -3,13 +3,14 @@
<div class="card">
<div class="card-head d-flex">
{{ if .logo }}
{{ $logoImage := resources.Get .logo }}
{{ $logoImage:= resources.Get .logo}}
{{ if $logoImage }}
{{ $logoImage := $logoImage.Fit "24x24" }}
{{/* 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 }}
<img class="card-img-xs" src="{{ $logoImage.RelPermalink }}" alt="{{ .name }}" />
{{ end }}
<h5 class="card-title">{{ .name }}</h5>
</div>

21
layouts/partials/footer.html
View file

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

17
layouts/partials/header.html
View file

@ -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
layouts/partials/helpers/get-author-image.html
View file

@ -2,7 +2,7 @@
{{ if (index site.Data site.Language.Lang).author }}
{{ $author = (index site.Data site.Language.Lang).author }}
{{ end }}
{{ $authorImage:= "/assets/images/default-avatar.png" }}
{{ $authorImage:= "/images/default-avatar.png" }}
{{ if $author.image }}
{{ $authorImage = $author.image }}
{{ end }}

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

@ -1,15 +1,19 @@
{{ $heroImage := .Page.Resources.GetMatch "hero.{jpg,png}"}}
{{/* 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 "default-hero.jpg"}}
{{ .Scratch.Set "heroScratch" $heroImage }}
{{ $heroImage:= resources.Get "images/default-hero.jpg"}}
{{ .Scratch.Set "heroScratch" $heroImage }}
{{ end }}
{{ $heroImage := .Scratch.Get "heroScratch" }}
{{ if $heroImage }}
{{ $heroImage := $heroImage.Resize "148x" }}
{{ return $heroImage.RelPermalink }}
{{/* 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 }}

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

@ -1,5 +1,5 @@
{{ $mainLogo:="/assets/images/main-logo.png" }}
{{ $invertedLogo:="/assets/images/inverted-logo.png" }}
{{ $mainLogo:="/images/main-logo.png" }}
{{ $invertedLogo:="/images/inverted-logo.png" }}
{{ if site.Params.logo.main }}
{{ $mainLogo = site.Params.logo.main }}
{{ end }}

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

@ -1,22 +1,27 @@
{{ $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 }}
{{ 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 $mainLogo }}
{{ $mainLogo = $mainLogo.Resize "42x" }}
{{ if and $mainLogo (ne $mainLogo.MediaType.SubType "svg") }}
{{ $mainLogo = $mainLogo.Resize "42x" }}
{{ end }}
{{ $mainLogo = $mainLogo.RelPermalink}}
{{ end }}
{{ $invertedLogo:= resources.Get $invertedLogo}}
{{ if $invertedLogo }}
{{ $invertedLogo = $invertedLogo.Resize "42x" }}
{{ $invertedLogo = $invertedLogo.RelPermalink}}
{{ 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 }}

78
layouts/shortcodes/rimg.html
View file

@ -4,50 +4,50 @@
{{ $src := resources.GetMatch (.Get "src") }}
{{ if in (.Get "src") "http" }}
<img src="{{$src}}" {{ with .Get "alt" }}alt="{{.}}"{{ else }}alt=""{{ end }}>
<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 */}}
{{ 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" }}
{{ $tinyw := default "500x" }}
{{ $smallw := default "800x" }}
{{ $mediumw := default "1200x" }}
{{ $largew := default "1500x" }}
{{/* resize the src image to the given sizes */}}
{{/* resize the src image to the given sizes */}}
{{ $tiny := $src.Resize $tinyw }}
{{ $small := $src.Resize $smallw }}
{{ $medium := $src.Resize $mediumw }}
{{ $large := $src.Resize $largew }}
{{ $tiny := $src.Resize $tinyw }}
{{ $small := $src.Resize $smallw }}
{{ $medium := $src.Resize $mediumw }}
{{ $large := $src.Resize $largew }}
{{/* add the processed images to the scratch */}}
{{/* 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 }}>
{{/* 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 }}
{{ end }}