mirror of
https://github.com/tiennm99/HugoBlox-kit.git
synced 2026-10-24 10:17:01 +00:00
George Cushen
c37cf33fc6
- featured image: Enable focal point to be set by user in front matter - pages: Featured image responsively transforms to split view on XL monitors - pages: Refactor page title, metadata, and image into one reusable module - archetypes: Migrate to folder approach and update image options - post widget: Refactor detailed layout to use featured image - accessibility: Add alt tag to header and featured image - accessibility: Improve text contrast based on Lighthouse audit - publication: Entirely deprecate old `image` front matter option - docs: Remove header image option (was never a documented feature) - project widget: Add `noopener` to external links See #708 Fix #728 Fix #704 Fix #705 See #718
93 lines
2.9 KiB
HTML
93 lines
2.9 KiB
HTML
{{ $page := . }}
|
|
{{ $featured := (.Resources.ByType "image").GetMatch "*featured*" }}
|
|
{{ $anchor := $page.Params.image.focal_point | default "Smart" }}
|
|
|
|
{{/* Set default titles for node pages */}}
|
|
{{ $title := .Title }}
|
|
{{ if and (not $title) .IsNode }}
|
|
{{ if eq .Type "post" }}
|
|
{{ $title = i18n "posts" }}
|
|
{{ else if eq .Type "talk" }}
|
|
{{ $title = i18n "talks" }}
|
|
{{ else if eq .Type "publication" }}
|
|
{{ $title = i18n "publications" }}
|
|
{{end}}
|
|
{{end}}
|
|
|
|
{{/* Header image */}}
|
|
{{ if and .Params.header.image (not $featured) }}
|
|
<div class="article-header">
|
|
{{ $img_src := urls.Parse .Params.header.image }}
|
|
{{ if $img_src.Scheme }}
|
|
<img src="{{ .Params.header.image }}" class="article-banner" itemprop="image" alt="">
|
|
{{ else }}
|
|
<img src="{{ (printf "/img/%s" .Params.header.image) | relURL }}" class="article-banner" itemprop="image" alt="">
|
|
{{ end }}
|
|
|
|
{{ with .Params.header.caption }}<span class="article-header-caption">{{ . | markdownify | emojify }}</span>{{ end }}
|
|
</div>
|
|
{{end}}
|
|
|
|
{{/* Featured image */}}
|
|
{{ with $featured }}
|
|
{{ $image := .Fill (printf "1600x400 q90 %s" $anchor) }}
|
|
<div class="article-header d-xl-none">
|
|
<img src="{{ $image.RelPermalink }}" class="article-banner" itemprop="image" alt="">
|
|
{{ with $.Params.image.caption }}<span class="article-header-caption">{{ . | markdownify | emojify }}</span>{{ end }}
|
|
</div>
|
|
|
|
{{ $image := .Fill (printf "680x500 q90 %s" $anchor) }}
|
|
<div class="container-fluid split-header d-none d-xl-block">
|
|
<div class="row">
|
|
<div class="col-6">
|
|
<div class="split-header-content">
|
|
<h1 itemprop="name">{{ $title }}</h1>
|
|
|
|
{{ with $page.Params.subtitle }}
|
|
<p class="page-subtitle">{{ . | markdownify | emojify }}</p>
|
|
{{end}}
|
|
|
|
{{ partial "page_metadata" (dict "content" $page "is_list" 1) }}
|
|
|
|
{{ partial "share.html" $page }}
|
|
</div>
|
|
</div>
|
|
<div class="col-6">
|
|
<div class="split-header-image">
|
|
<img src="{{ $image.RelPermalink }}" itemprop="image" alt="">
|
|
{{ with $.Params.image.caption }}<span class="article-header-caption">{{ . | markdownify | emojify }}</span>{{ end }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="article-container d-xl-none">
|
|
<h1 itemprop="name">{{ $title }}</h1>
|
|
|
|
{{ with $page.Params.subtitle }}
|
|
<p class="page-subtitle">{{ . | markdownify | emojify }}</p>
|
|
{{end}}
|
|
|
|
{{ partial "page_metadata" (dict "content" $page "is_list" 0) }}
|
|
</div>
|
|
{{else}}
|
|
{{/* Case when page has no image */}}
|
|
|
|
{{/* Wider container for nodes */}}
|
|
{{ $ctnr := "article-container" }}
|
|
{{ if $page.IsNode }}
|
|
{{ $ctnr = "universal-wrapper" }}
|
|
{{end}}
|
|
<div class="{{$ctnr}} pt-3">
|
|
<h1 itemprop="name">{{ $title }}</h1>
|
|
|
|
{{ with $page.Params.subtitle }}
|
|
<p class="page-subtitle">{{ . | markdownify | emojify }}</p>
|
|
{{end}}
|
|
|
|
{{ if not .IsNode }}
|
|
{{ partial "page_metadata" (dict "content" $page "is_list" 0) }}
|
|
{{end}}
|
|
</div>
|
|
{{end}}
|