page_header.html 3.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  1. {{ $page := . }}
  2. {{ $featured := (.Resources.ByType "image").GetMatch "*featured*" }}
  3. {{ $anchor := $page.Params.image.focal_point | default "Smart" }}
  4. {{/* Set default titles for node pages */}}
  5. {{ $title := .Title }}
  6. {{ if and (not $title) .IsNode }}
  7. {{ if eq .Type "post" }}
  8. {{ $title = i18n "posts" }}
  9. {{ else if eq .Type "talk" }}
  10. {{ $title = i18n "talks" }}
  11. {{ else if eq .Type "publication" }}
  12. {{ $title = i18n "publications" }}
  13. {{end}}
  14. {{end}}
  15. {{/* Header image */}}
  16. {{ if and .Params.header.image (not (and $featured (not .Params.image.preview_only))) }}
  17. <div class="article-header">
  18. {{ $img_src := urls.Parse .Params.header.image }}
  19. {{ if $img_src.Scheme }}
  20. <img src="{{ .Params.header.image }}" class="article-banner" alt="">
  21. {{ else }}
  22. {{ $media_dir := $.Scratch.Get "media_dir" }}
  23. <img src="{{ (printf "/%s/%s" $media_dir .Params.header.image) | relURL }}" class="article-banner" alt="">
  24. {{ end }}
  25. {{ with .Params.header.caption }}<span class="article-header-caption">{{ . | markdownify | emojify }}</span>{{ end }}
  26. </div>
  27. {{end}}
  28. {{/* Featured image layout */}}
  29. {{ if and $featured (not .Params.image.preview_only) }}
  30. {{/* Fit image within max size. */}}
  31. {{ $image := $featured }}
  32. {{/* Determine image placement. */}}
  33. {{ $placement := .Params.image.placement | default 1 }}{{/* Default to full column width. */}}
  34. {{ $image_container := "" }}
  35. {{ if eq $placement 2}}
  36. {{ $image_container = "container" }}
  37. {{ if gt $featured.Width 1200 }}
  38. {{ $image = $featured.Resize "1200x" }}
  39. {{ end }}
  40. {{else if eq $placement 3}}
  41. {{ $image_container = "container-fluid" }}
  42. {{ $image := $featured.Fit "2560x2560" }}
  43. {{else}}
  44. {{ $image_container = "article-container" }}
  45. {{ if gt $featured.Width 720 }}
  46. {{ $image = $featured.Resize "720x" }}
  47. {{ end }}
  48. {{end}}
  49. <div class="article-container pt-3">
  50. <h1>{{ $title }}</h1>
  51. {{ with $page.Params.subtitle }}
  52. <p class="page-subtitle">{{ . | markdownify | emojify }}</p>
  53. {{end}}
  54. {{ partial "page_metadata" (dict "page" $page "is_list" 0 "share" true) }}
  55. {{ partial "page_links_div.html" $page }}
  56. </div>
  57. {{/* Featured image */}}
  58. <div class="article-header {{$image_container}} featured-image-wrapper mt-4 mb-4" style="max-width: {{$image.Width}}px; max-height: {{$image.Height}}px;">
  59. <div style="position: relative">
  60. <img src="{{ $image.RelPermalink }}" alt="{{ with $.Params.image.alt_text }}{{.}}{{ end }}" class="featured-image">
  61. {{ with $.Params.image.caption }}<span class="article-header-caption">{{ . | markdownify | emojify }}</span>{{ end }}
  62. </div>
  63. </div>
  64. {{else}}
  65. {{/* Case when page has no image */}}
  66. {{/* Wider container for nodes */}}
  67. {{ $ctnr := "article-container" }}
  68. {{ if $page.IsNode }}
  69. {{ $ctnr = "universal-wrapper" }}
  70. {{end}}
  71. <div class="{{$ctnr}} pt-3">
  72. <h1>{{ $title }}</h1>
  73. {{ with $page.Params.subtitle }}
  74. <p class="page-subtitle">{{ . | markdownify | emojify }}</p>
  75. {{end}}
  76. {{ if not .IsNode }}
  77. {{ partial "page_metadata" (dict "page" $page "is_list" 0 "share" true) }}
  78. {{ partial "page_links_div.html" $page }}
  79. {{end}}
  80. </div>
  81. {{end}}