Add featured image to detailed layout of pub/talk widgets

Close #708

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

@@ -12,8 +12,15 @@ authors = []
 tags = ["Academic"]
 summary = "Create a beautifully simple website or blog in under 10 minutes."
 
+# Featured image
+# To use, add an image named `featured.jpg/png` to your project's folder. 
 [image]
-caption = "Image credit: [**Unsplash**](https://unsplash.com/photos/CpkOjOcXdUY)"
+  # Caption (optional)
+  caption = "Image credit: [**Unsplash**](https://unsplash.com/photos/CpkOjOcXdUY)"
+
+  # Focal point (optional)
+  # Options: Smart, Center, TopLeft, Top, TopRight, Left, Right, BottomLeft, Bottom, BottomRight
+  focal_point = ""
 
 [[gallery_item]]
 album = "1"

layouts/partials/publication_li_detailed.html

@@ -1,22 +1,15 @@
 <div class="pub-list-item card-simple" itemscope itemtype="http://schema.org/CreativeWork">
 
-  {{ if .Params.image_preview }}
-    {{ .Scratch.Set "image" .Params.image_preview }}
-  {{ else if .Params.header.image }}
-    {{ .Scratch.Set "image" .Params.header.image }}
-  {{ end }}
-  {{ if .Scratch.Get "image" }}
+  {{ $resource := (.Resources.ByType "image").GetMatch "*featured*" }}
+  {{ $anchor := .Params.image.focal_point | default "Smart" }}
+  {{ with $resource }}
+  {{ $image := .Fill (printf "918x517 q90 %s" $anchor) }}
   <div>
-    <a href="{{ .RelPermalink }}">
-      {{ $img_src := urls.Parse (.Scratch.Get "image") }}
-      {{ if $img_src.Scheme }}
-        <img src="{{ .Scratch.Get "image" }}" class="article-banner" itemprop="image">
-      {{ else }}
-        <img src="{{ "/img/" | relURL }}{{ .Scratch.Get "image" }}" class="article-banner" itemprop="image">
-      {{ end }}
+    <a href="{{ $.RelPermalink }}">
+      <img src="{{ $image.RelPermalink }}" class="article-banner" itemprop="image" alt="">
     </a>
   </div>
-  {{ end }}
+  {{end}}
 
   <h3 class="article-title" itemprop="name">
     <a href="{{ .RelPermalink }}" itemprop="url">{{ .Title }}</a>

layouts/partials/talk_li_detailed.html

@@ -1,22 +1,15 @@
 <div class="card-simple" itemscope itemtype="http://schema.org/Event">
 
-  {{ if .Params.image_preview }}
-    {{ .Scratch.Set "image" .Params.image_preview }}
-  {{ else if .Params.header.image }}
-    {{ .Scratch.Set "image" .Params.header.image }}
-  {{ end }}
-  {{ if .Scratch.Get "image" }}
+  {{ $resource := (.Resources.ByType "image").GetMatch "*featured*" }}
+  {{ $anchor := .Params.image.focal_point | default "Smart" }}
+  {{ with $resource }}
+  {{ $image := .Fill (printf "918x517 q90 %s" $anchor) }}
   <div>
-    <a href="{{ .RelPermalink }}">
-      {{ $img_src := urls.Parse (.Scratch.Get "image") }}
-      {{ if $img_src.Scheme }}
-        <img src="{{ .Scratch.Get "image" }}" class="article-banner" itemprop="image">
-      {{ else }}
-        <img src="{{ "/img/" | relURL }}{{ .Scratch.Get "image" }}" class="article-banner" itemprop="image">
-      {{ end }}
+    <a href="{{ $.RelPermalink }}">
+      <img src="{{ $image.RelPermalink }}" class="article-banner" itemprop="image" alt="">
     </a>
   </div>
-  {{ end }}
+  {{end}}
 
   <h3 class="article-title" itemprop="name">
     <a href="{{ .RelPermalink }}" itemprop="url">{{ .Title }}</a>