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

Transition to Hugo Image Processing (#173)

Browse source 
* 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 2020-12-31 15:55:28 -05:00 • committed by GitHub
parent ba1d6014d9
commit a2b3c7fda2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
53 changed files with 352 additions and 75 deletions
Download patch file Download diff file Expand all files Collapse all files

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

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