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>
<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 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 }}
{{ if eq (getenv "HUGO_ENV") "PRD" }}

View File

@ -1,7 +1,9 @@
{{ define "header" }}
{{ $banner := (.Page.Resources.ByType "image").GetMatch "banner.png" }}
{{ $resized := $banner.Resize "1280x q99 jpg" }}
{{ $author := index .Site.Data.authors ( .Params.author | 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>
<span class="title px-md py-sm">{{ .Title }}</span>

View File

@ -15,7 +15,9 @@
</div>
{{ else }}
{{ $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">
<span class="title">{{ .Title }}</span>
</div>

View File

@ -1,3 +1,4 @@
{{ $originals := (.Page.Resources.ByType "image") }}
<div class="columns is-img-preview">
{{ range $param := .Params }}
<!-- image -->
@ -15,7 +16,10 @@
{{ else }}
<a href="{{ $src }}" title="{{ $title }}">
{{- 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 -}}
<img src="{{ $src }}" alt="{{ $title }}">
{{- end -}}

View File

@ -1,4 +1,5 @@
{{ $title := .Get 0 }}
{{ $originals := (.Page.Resources.ByType "image") }}
<div class="columns is-bottom-marginless">
<div class="column is-bottom-paddingless juxtapose">
{{ range $param := last 2 .Params }}
@ -9,7 +10,10 @@
{{ $split_src := split $src "." }}
{{ $extension := index $split_src (sub (len $split_src) 1) }}
{{- 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 -}}
<img src="{{ $src }}" alt="{{ $title }}">
{{- end -}}

View File

@ -1,4 +1,5 @@
{{ $title := .Get 0 }}
{{ $originals := (.Page.Resources.ByType "image") }}
<div class="columns is-img-preview is-bottom-marginless">
{{ range $param := last (sub (len .Params) 1) .Params }}
<!-- image -->
@ -16,7 +17,9 @@
{{ else }}
<a href="{{ $src }}" title="{{ $subtitle }}">
{{- 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 -}}
<img src="{{ $src }}" alt="{{ $title }}">
{{- end -}}