page_header.html 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  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. <img src="{{ (printf "/img/%s" .Params.header.image) | relURL }}" class="article-banner" alt="">
  23. {{ end }}
  24. {{ with .Params.header.caption }}<span class="article-header-caption">{{ . | markdownify | emojify }}</span>{{ end }}
  25. </div>
  26. {{end}}
  27. {{/* Featured image layout */}}
  28. {{ if and $featured (not .Params.image.preview_only) }}
  29. {{/* Fit image within max size. */}}
  30. {{ $image := $featured }}
  31. {{/* Determine image placement. */}}
  32. {{ $placement := .Params.image.placement | default 1 }}{{/* Default to full column width. */}}
  33. {{ $image_container := "" }}
  34. {{ if eq $placement 2}}
  35. {{ $image_container = "container" }}
  36. {{ if gt $featured.Width 1200 }}
  37. {{ $image = $featured.Resize "1200x" }}
  38. {{ end }}
  39. {{else if eq $placement 3}}
  40. {{ $image_container = "container-fluid" }}
  41. {{ $image := $featured.Fit "2560x2560" }}
  42. {{else}}
  43. {{ $image_container = "article-container" }}
  44. {{ if gt $featured.Width 720 }}
  45. {{ $image = $featured.Resize "720x" }}
  46. {{ end }}
  47. {{end}}
  48. <div class="article-container pt-3">
  49. <h1>{{ $title }}</h1>
  50. {{ with $page.Params.subtitle }}
  51. <p class="page-subtitle">{{ . | markdownify | emojify }}</p>
  52. {{end}}
  53. {{ partial "page_metadata" (dict "page" $page "is_list" 0 "share" true) }}
  54. {{ partial "page_links_div.html" $page }}
  55. </div>
  56. {{/* Featured image */}}
  57. <div class="article-header {{$image_container}} featured-image-wrapper mt-4 mb-4" style="max-width: {{$image.Width}}px; max-height: {{$image.Height}}px;">
  58. <div style="position: relative">
  59. <img src="{{ $image.RelPermalink }}" alt="" class="featured-image">
  60. {{ with $.Params.image.caption }}<span class="article-header-caption">{{ . | markdownify | emojify }}</span>{{ end }}
  61. </div>
  62. </div>
  63. {{else}}
  64. {{/* Case when page has no image */}}
  65. {{/* Wider container for nodes */}}
  66. {{ $ctnr := "article-container" }}
  67. {{ if $page.IsNode }}
  68. {{ $ctnr = "universal-wrapper" }}
  69. {{end}}
  70. <div class="{{$ctnr}} pt-3">
  71. <h1>{{ $title }}</h1>
  72. {{ with $page.Params.subtitle }}
  73. <p class="page-subtitle">{{ . | markdownify | emojify }}</p>
  74. {{end}}
  75. {{ if not .IsNode }}
  76. {{ partial "page_metadata" (dict "page" $page "is_list" 0 "share" true) }}
  77. {{ partial "page_links_div.html" $page }}
  78. {{end}}
  79. </div>
  80. {{end}}