Add automatic cover image support (#303)
* Add support for auto-detection of featured images. * Rename Partial, Add Documentation Renamed the partial to func/GetFeaturedImage.html. Additionally added more documentation in the partial to explain how it worked, and what values were returned. Co-authored-by: Sean Zimmermann <sz2243@columbia.edu>
This commit is contained in:
parent
506175f56f
commit
5001b28387
35
layouts/partials/func/GetFeaturedImage.html
Normal file
35
layouts/partials/func/GetFeaturedImage.html
Normal file
|
@ -0,0 +1,35 @@
|
|||
{{/*
|
||||
GetFeaturedImage
|
||||
|
||||
This partial gets the url for featured image for a given page.
|
||||
|
||||
If a featured_image was set in the page's front matter, then that will be used.
|
||||
|
||||
If not set, this will search page resources to find an image that contains the word
|
||||
"cover", and if found, returns the path to that resource.
|
||||
|
||||
If no featured_image was set, and there's no "cover" image in page resources, then
|
||||
this partial returns an empty string (which evaluates to false).
|
||||
|
||||
@return Permalink to featured image, or an empty string if not found.
|
||||
|
||||
*/}}
|
||||
|
||||
{{/* Declare a new string variable, $linkToCover */}}
|
||||
{{ $linkToCover := "" }}
|
||||
|
||||
{{/* Use the value from front matter if present */}}
|
||||
{{ if .Params.featured_image }}
|
||||
{{ $linkToCover = .Params.featured_image }}
|
||||
|
||||
{{/* Find the first image with 'cover' in the name in this page bundle. */}}
|
||||
{{ else }}
|
||||
{{ $img := (.Resources.ByType "image").GetMatch "*cover*" }}
|
||||
{{ with $img }}
|
||||
{{ $linkToCover = .Permalink }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
{{/* return either a permalink, or an empty string. Note that partials can only have a single
|
||||
return statement, so this needs to be at the end of the partial (and not in the if block) */}}
|
||||
{{ return $linkToCover }}
|
|
@ -1,4 +1,4 @@
|
|||
{{ $featured_image := .Params.featured_image }}
|
||||
{{ $featured_image := partial "func/GetFeaturedImage.html" . }}
|
||||
{{ if $featured_image }}
|
||||
{{/* Trimming the slash and adding absURL make sure the image works no matter where our site lives */}}
|
||||
{{ $featured_image := (trim $featured_image "/") | absURL }}
|
||||
|
|
|
@ -1,8 +1,8 @@
|
|||
{{ $featured_image := .Params.featured_image }}
|
||||
{{ $featured_image := partial "func/GetFeaturedImage.html" . }}
|
||||
<article class="bb b--black-10">
|
||||
<div class="db pv4 ph3 ph0-l no-underline dark-gray">
|
||||
<div class="flex flex-column flex-row-ns">
|
||||
{{ if .Params.featured_image }}
|
||||
{{ if $featured_image }}
|
||||
{{/* Trimming the slash and adding absURL make sure the image works no matter where our site lives */}}
|
||||
{{ $featured_image := (trim $featured_image "/") | absURL }}
|
||||
<div class="pr3-ns mb4 mb0-ns w-100 w-40-ns">
|
||||
|
@ -11,7 +11,7 @@
|
|||
</a>
|
||||
</div>
|
||||
{{ end }}
|
||||
<div class="blah w-100{{ if .Params.featured_image }} w-60-ns pl3-ns{{ end }}">
|
||||
<div class="blah w-100{{ if $featured_image }} w-60-ns pl3-ns{{ end }}">
|
||||
<h1 class="f3 fw1 athelas mt0 lh-title">
|
||||
<a href="{{.Permalink}}" class="color-inherit dim link">
|
||||
{{ .Title }}
|
||||
|
|
|
@ -1,12 +1,13 @@
|
|||
<article class="bb b--black-10">
|
||||
<a class="db pv4 ph3 ph0-l no-underline dark-gray dim" href="{{ .Permalink }}">
|
||||
<div class="flex flex-column flex-row-ns">
|
||||
{{ if .Params.featured_image }}
|
||||
{{ $featured_image := partial "func/GetFeaturedImage.html" . }}
|
||||
{{ if $featured_image }}
|
||||
<div class="pr3-ns mb4 mb0-ns w-100 w-40-ns">
|
||||
<img src="{{ .Params.featured_image }}" class="db" alt="image from {{ .Title }}">
|
||||
<img src="{{ $featured_image }}" class="db" alt="image from {{ .Title }}">
|
||||
</div>
|
||||
{{ end }}
|
||||
<div class="w-100{{ if .Params.featured_image }} w-60-ns pl3-ns{{ end }}">
|
||||
<div class="w-100{{ if $featured_image }} w-60-ns pl3-ns{{ end }}">
|
||||
<h1 class="f3 fw1 athelas mt0 lh-title">{{ .Title }}</h1>
|
||||
<div class="f6 f5-l lh-copy nested-copy-line-height">
|
||||
{{ .Summary }}
|
||||
|
|
Loading…
Reference in a new issue