hugo-academic/wowchemy/layouts/partials/page_header.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 "event" }}
    {{ $title = i18n "talks" }}
  {{ else if eq .Type "publication" }}
    {{ $title = i18n "publications" }}
  {{end}}
{{end}}

{{/* Banner image */}}
{{ if and .Params.banner.image (not (and $featured (not .Params.image.preview_only))) }}
<div class="article-header">
  {{- $img := "" -}}
  {{ $alt := (.Params.banner.caption | default "") | plainify }}
  {{ $destination := .Params.banner.image }}
  {{ $is_remote := strings.HasPrefix $destination "http" }}
  {{- if not $is_remote -}}
    {{- $img = (.Page.Resources.ByType "image").GetMatch $destination -}}
    {{- if not $img -}}
      {{- $img = resources.Get (path.Join "media" $destination) -}}
    {{- end -}}
  {{- end -}}
  {{ if $img }}
    <img src="{{$img.RelPermalink}}" width="{{$img.Width}}" height="{{$img.Height}}" class="article-banner" alt="{{$alt}}">
  {{ else }}
    <img src="{{ .Params.banner.image }}" class="article-banner" alt="{{$alt}}">
  {{ end }}

  {{ with .Params.banner.caption }}<span class="article-header-caption">{{ . | markdownify | emojify }}</span>{{ end }}
</div>
{{end}}

{{/* Featured image layout */}}
{{ if and $featured (not .Params.image.preview_only) }}

{{/* Fit image within max size. */}}
{{ $image := $featured }}

{{/* Determine image placement. */}}
{{ $placement := .Params.image.placement | default 1 }}{{/* Default to full column width. */}}
{{/* Fit image to container's max width */}}
{{ $image_container := "" }}
{{ if eq $placement 2}}
  {{ $image_container = "container" }}
  {{ $image = $featured.Fit "1200x2500 webp" }}
{{else if eq $placement 3}}
  {{ $image_container = "container-fluid" }}
  {{ $image := $featured.Fit "2560x2560 webp" }}
{{else}}
  {{ $image_container = "article-container" }}
  {{ $image = $featured.Fit "720x2500 webp" }}
{{end}}

<div class="article-container pt-3">
  <h1>{{ $title }}</h1>

  {{ with $page.Params.subtitle }}
  <p class="page-subtitle">{{ . | markdownify | emojify }}</p>
  {{end}}

  {{ partial "page_metadata" (dict "page" $page "is_list" 0 "share" true) }}
  {{ partial "page_links_div.html" $page }}
</div>

{{/* Featured image */}}
<div class="article-header {{$image_container}} featured-image-wrapper mt-4 mb-4" style="max-width: {{$image.Width}}px; max-height: {{$image.Height}}px;">
  <div style="position: relative">
    <img src="{{ $image.RelPermalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}" alt="{{ with $.Params.image.alt_text }}{{.}}{{ end }}" class="featured-image">
    {{ with $.Params.image.caption }}<span class="article-header-caption">{{ . | markdownify | emojify }}</span>{{ end }}
  </div>
</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>{{ $title }}</h1>

  {{ with $page.Params.subtitle }}
  <p class="page-subtitle">{{ . | markdownify | emojify }}</p>
  {{end}}

  {{ if not .IsNode }}
    {{ partial "page_metadata" (dict "page" $page "is_list" 0 "share" true) }}
    {{ partial "page_links_div.html" $page }}
  {{end}}
</div>
{{end}}