feat: add `placement` option for featured images

Placement options: 1 = Full column width, 2 = Out-set, 3 = Screen-width.
Defaults to 1, full column width.
Deprecates the split title/image style that was shown on XL displays.

Close #1175

assets/sass/academic/_content.scss

@@ -13,14 +13,6 @@ article {
   margin: 0 auto 0 auto;
 }
 
-.split-header {
-  margin-bottom: 2rem;
-}
-
-.split-header .share-box {
-  float: left;
-}
-
 .page-subtitle {
   font-size: 1.15rem;
   color: rgba(0,0,0,.54);
@@ -31,25 +23,6 @@ article {
   color: rgba(255,255,255,0.54);
 }
 
-.split-header .page-subtitle {
-  margin-bottom: 1.5rem;
-}
-
-.split-header-content {
-  max-width: 612px;
-  width: 100%;
-  padding: 60px 60px 32px 0;
-  margin-left: auto;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-}
-
-.split-header-image {
-  position: relative; /* Required for caption positioning */
-  clear: both;
-  max-width: 580px;
-}
-
 .article-header {
   position: relative; /* Required for caption positioning */
   clear: both;
@@ -60,30 +33,17 @@ article {
   height: auto;
 }
 
-.featured-image {
-  width: 100%;
-  background-position: left;
-  background-origin: border-box;
-  background-size: cover;
-  height: 60vh;
-  min-height: 500px;
-  -webkit-box-flex: 1;
-  -webkit-flex: 1 0 auto;
-  -ms-flex: 1 0 auto;
-  flex: 1 0 auto
-}
-
-@media screen and (max-width: 1199px) {
-  .featured-image {
-    min-height: 400px;
-    height: auto;
-  }
+.featured-image-wrapper {
+  position: relative;
+  padding-left: 0; /* Override container padding. */
+  padding-right: 0; /* Override container padding. */
 }
 
-@media screen and (max-width: 767px) {
-  .featured-image {
-    min-height: 300px;
-  }
+.featured-image {
+  position: relative;
+  width: 100%;
+  display: block;
+  margin: 0 auto;
 }
 
 .article-header-caption {

exampleSite/content/post/getting-started/index.md

@@ -14,8 +14,10 @@ draft: false
 
 # Featured image
 # To use, add an image named `featured.jpg/png` to your page's folder.
+# Placement options: 1 = Full column width, 2 = Out-set, 3 = Screen-width
 # Focal point options: Smart, Center, TopLeft, Top, TopRight, Left, Right, BottomLeft, Bottom, BottomRight
 image:
+  placement: 1
   caption: 'Image credit: [**Unsplash**](https://unsplash.com/photos/CpkOjOcXdUY)'
   focal_point: ""
   preview_only: false
@@ -71,7 +73,7 @@ gallery_item:
   - [Decorate your laptop or journal with an Academic sticker](https://www.redbubble.com/people/neutreno/works/34387919-academic)
   - [Wear the T-shirt](https://academic.threadless.com/)
 
-[![Screenshot](https://raw.githubusercontent.com/gcushen/hugo-academic/master/academic.png)](https://github.com/gcushen/hugo-academic/)
+{{< figure src="https://raw.githubusercontent.com/gcushen/hugo-academic/master/academic.png" lightbox="true" >}}
 
 **Key features:**
 

layouts/partials/page_header.html

@@ -28,42 +28,31 @@
 </div>
 {{end}}
 
-{{/* Featured image */}}
+{{/* Featured image layout */}}
 {{ if and $featured (not .Params.image.preview_only) }}
-{{ $image := $featured.Resize "800x" }}
-<div class="article-header d-xl-none">
-  <div class="featured-image" style="background-image: url('{{ $image.RelPermalink }}');"></div>
-  {{ with $.Params.image.caption }}<span class="article-header-caption">{{ . | markdownify | emojify }}</span>{{ end }}
-</div>
-
-{{ $image := $featured.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 "page" $page "is_list" 0) }}
+{{/* Fit image within max size. */}}
+{{ $image := $featured }}
 
-        {{ partial "page_links_div.html" $page }}
-
-        {{ 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>
+{{/* Determine image placement. */}}
+{{ $placement := .Params.image.placement | default 1 }}{{/* Default to full column width. */}}
+{{ $image_container := "" }}
+{{ if eq $placement 2}}
+  {{ $image_container = "container" }}
+  {{ if gt $featured.Width 1200 }}
+    {{ $image = $featured.Resize "1200x" }}
+  {{ end }}
+{{else if eq $placement 3}}
+  {{ $image_container = "container-fluid" }}
+  {{ $image := $featured.Fit "2560x2560" }}
+{{else}}
+  {{ $image_container = "article-container" }}
+  {{ if gt $featured.Width 720 }}
+    {{ $image = $featured.Resize "720x" }}
+  {{ end }}
+{{end}}
 
-<div class="article-container d-xl-none">
+<div class="article-container pt-3">
   <h1 itemprop="name">{{ $title }}</h1>
 
   {{ with $page.Params.subtitle }}
@@ -73,6 +62,14 @@
   {{ 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 }}" alt="" 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 */}}