layouts: use Hugo's image resizing facilities

This commit is contained in:
liushuyu 2021-10-25 03:01:56 -06:00
parent 90c8df3121
commit 1525e0712d
No known key found for this signature in database
GPG key ID: 23D1CE4534419437
6 changed files with 22 additions and 6 deletions

View file

@ -21,7 +21,8 @@
<title>{{- if not .IsHome }}{{ .Title }} - {{ .Site.Title }}{{- else }}{{ .Site.Title }} - {{ .Site.Params.Tagline }}{{- end}}</title> <title>{{- if not .IsHome }}{{ .Title }} - {{ .Site.Title }}{{- else }}{{ .Site.Title }} - {{ .Site.Params.Tagline }}{{- end}}</title>
<link href="https://fonts.googleapis.com/css?family=Ubuntu|Dosis" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Ubuntu|Dosis" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.0.2/css/all.css" rel="stylesheet"> <link href="https://use.fontawesome.com/releases/v5.0.2/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="{{ .Site.BaseURL }}/css/style.css" /> {{ $stylesheet := resources.Get "scss/style.scss" | toCSS | minify }}
<link rel="stylesheet" href="{{ $stylesheet.Permalink }}" />
{{- block "css" . }}{{- end }} {{- block "css" . }}{{- end }}
{{ if eq (getenv "HUGO_ENV") "PRD" }} {{ if eq (getenv "HUGO_ENV") "PRD" }}

View file

@ -1,7 +1,9 @@
{{ define "header" }} {{ define "header" }}
{{ $banner := (.Page.Resources.ByType "image").GetMatch "banner.png" }}
{{ $resized := $banner.Resize "1280x q99 jpg" }}
{{ $author := index .Site.Data.authors ( .Params.author | default "" ) }} {{ $author := index .Site.Data.authors ( .Params.author | default "" ) }}
{{ $coauthors := split ( .Params.coauthor | default "" ) "," }} {{ $coauthors := split ( .Params.coauthor | default "" ) "," }}
<div class="mb-md blog-entry-header single" style="background-image: url('{{ .Site.BaseURL }}/{{ .Dir }}banner.png');background-repeat:no-repeat;background-size:contain;background-position:center;"></div> <div class="mb-md blog-entry-header single" style="background-image: url('{{ $resized.Permalink }}');background-repeat:no-repeat;background-size:contain;background-position:center;"></div>
<div class="has-text-centered"> <div class="has-text-centered">
<div> <div>
<span class="title px-md py-sm">{{ .Title }}</span> <span class="title px-md py-sm">{{ .Title }}</span>

View file

@ -15,7 +15,9 @@
</div> </div>
{{ else }} {{ else }}
{{ $author := index .Site.Data.authors ( .Params.author | default "" ) }} {{ $author := index .Site.Data.authors ( .Params.author | default "" ) }}
<div class="mb-md blog-entry-header summary entry" style="background-image: url('/{{ path.Join .File.Dir "summary.png" }}')" data-href="{{ .Permalink }}"> {{ $original := (.Page.Resources.ByType "image").GetMatch "summary.png" }}
{{ $resized := $original.Resize "1280x q90 jpg" }}
<div class="mb-md blog-entry-header summary entry" style="background-image: url('{{ $resized.Permalink }}')" data-href="{{ .Permalink }}">
<div class="px-md"> <div class="px-md">
<span class="title">{{ .Title }}</span> <span class="title">{{ .Title }}</span>
</div> </div>

View file

@ -1,3 +1,4 @@
{{ $originals := (.Page.Resources.ByType "image") }}
<div class="columns is-img-preview"> <div class="columns is-img-preview">
{{ range $param := .Params }} {{ range $param := .Params }}
<!-- image --> <!-- image -->
@ -15,7 +16,10 @@
{{ else }} {{ else }}
<a href="{{ $src }}" title="{{ $title }}"> <a href="{{ $src }}" title="{{ $title }}">
{{- if eq $extension "png" -}} {{- if eq $extension "png" -}}
<img src="{{ $src }}.jpg" alt="{{ $title }}"> {{ $original := $originals.GetMatch (printf "*%s" (path.Base $src)) }}
{{ $resized_width := math.Min $original.Width 1024 }}
{{ $resized := $original.Resize (print $resized_width "x q90 jpg" ) }}
<img src="{{ $resized.Permalink }}" alt="{{ $title }}">
{{- else -}} {{- else -}}
<img src="{{ $src }}" alt="{{ $title }}"> <img src="{{ $src }}" alt="{{ $title }}">
{{- end -}} {{- end -}}

View file

@ -1,4 +1,5 @@
{{ $title := .Get 0 }} {{ $title := .Get 0 }}
{{ $originals := (.Page.Resources.ByType "image") }}
<div class="columns is-bottom-marginless"> <div class="columns is-bottom-marginless">
<div class="column is-bottom-paddingless juxtapose"> <div class="column is-bottom-paddingless juxtapose">
{{ range $param := last 2 .Params }} {{ range $param := last 2 .Params }}
@ -9,7 +10,10 @@
{{ $split_src := split $src "." }} {{ $split_src := split $src "." }}
{{ $extension := index $split_src (sub (len $split_src) 1) }} {{ $extension := index $split_src (sub (len $split_src) 1) }}
{{- if eq $extension "png" -}} {{- if eq $extension "png" -}}
<img src="{{ $src }}.jpg" alt="{{ $title }}"> {{ $original := $originals.GetMatch (printf "*%s" (path.Base $src)) }}
{{ $resized_width := math.Min $original.Width 1024 }}
{{ $resized := $original.Resize (print $resized_width "x q90 jpg" ) }}
<img src="{{ $resized.Permalink }}" alt="{{ $title }}">
{{- else -}} {{- else -}}
<img src="{{ $src }}" alt="{{ $title }}"> <img src="{{ $src }}" alt="{{ $title }}">
{{- end -}} {{- end -}}

View file

@ -1,4 +1,5 @@
{{ $title := .Get 0 }} {{ $title := .Get 0 }}
{{ $originals := (.Page.Resources.ByType "image") }}
<div class="columns is-img-preview is-bottom-marginless"> <div class="columns is-img-preview is-bottom-marginless">
{{ range $param := last (sub (len .Params) 1) .Params }} {{ range $param := last (sub (len .Params) 1) .Params }}
<!-- image --> <!-- image -->
@ -16,7 +17,9 @@
{{ else }} {{ else }}
<a href="{{ $src }}" title="{{ $subtitle }}"> <a href="{{ $src }}" title="{{ $subtitle }}">
{{- if eq $extension "png" -}} {{- if eq $extension "png" -}}
<img src="{{ $src }}.jpg" alt="{{ $title }}"> {{ $original := $originals.GetMatch (printf "*%s" (path.Base $src)) }}
{{ $resized := $original.Resize "800x q90 jpg" }}
<img src="{{ $resized.Permalink }}" alt="{{ $title }}">
{{- else -}} {{- else -}}
<img src="{{ $src }}" alt="{{ $title }}"> <img src="{{ $src }}" alt="{{ $title }}">
{{- end -}} {{- end -}}