feat: move media library from static/ to assets/

Refactor:
- business JSON-LD
- site_head
- Slider
- Gallery
- Video

Gallery is now intended only for local images in the page bundle (so that they can be optimized by Hugo).

Close #2119

wowchemy/layouts/partials/jsonld/business.html

@@ -1,3 +1,4 @@
+{{- $sharing_image := resources.GetMatch (path.Join "media" "sharing.*") -}}
 <script type="application/ld+json">
 {
   "@context": "https://schema.org",
@@ -5,7 +6,7 @@
   "@id": {{site.BaseURL}},
   "name": {{site.Params.org_name | default site.Title}},
   "logo": {{ partial "functions/get_logo_url" . }},
-  {{with site.Params.sharing_image}}"image": {{printf "%s/%s" ($.Scratch.Get "media_dir") . | absURL}},{{end}}
+  {{with $sharing_image}}"image": {{.Permalink}},{{end}}
   {{ if (eq site.Params.site_type "LocalBusiness") | and site.Params.coordinates }}
   "geo": {
     "@type": "GeoCoordinates",

wowchemy/layouts/partials/site_head.html

@@ -21,9 +21,6 @@
 
   {{ $scr := .Scratch }}
 
-  {{ $media_dir := site.Params.media_dir | default "media" }}
-  {{ $scr.Set "media_dir" $media_dir }}
-
   {{/* Attempt to load superuser. */}}
   {{ $superuser_name := "" }}
   {{ $superuser_username := "" }}
@@ -219,8 +216,6 @@
     {{ $twitter_card = "summary" }}
   {{ else if $featured_image }}
     {{ $og_image = $featured_image.Permalink }}
-  {{ else if .Params.header.image }}
-    {{ $og_image = printf "%s/%s" $media_dir .Params.header.image | absURL }}
   {{ else if $sharing_image }}
     {{ $og_image = $sharing_image.Permalink }}
   {{ else if $has_logo }}

wowchemy/layouts/partials/widgets/slider.html

@@ -12,17 +12,27 @@
 <!-- Carousel slides wrapper -->
 <div class="carousel-inner">
   {{ range $index, $item := $page.Params.item }}
-  <div class="wg-hero dark carousel-item{{if eq $index 0}} active{{end}}" style="{{with $page.Params.height}}{{printf "height: %s;" . | safeCSS}}{{end}}
+
+    {{ $style_bg := "" }}
+    {{with $page.Params.height}}
+      {{ $style_bg = printf "%s height: %s;" $style_bg . }}
+    {{end}}
     {{ if $item.overlay_color }}
-    background-color: {{ $item.overlay_color | default "transparent" }};
+      {{ $style_bg = printf "%s background-color: %s;" $style_bg ($item.overlay_color | default "transparent") }}
     {{ end }}
     {{ if $item.overlay_img }}
-    {{ $media_dir := $.Scratch.Get "media_dir" }}
-    background-image:
-    {{ if $item.overlay_filter }}linear-gradient(rgba(0, 0, 0, {{ $item.overlay_filter }}), rgba(0, 0, 0, {{ $item.overlay_filter }})), {{ end }}
-    url('{{ printf "%s/%s" $media_dir $item.overlay_img | absURL }}');
-    {{ end }}
-    ;">
+      {{ $bg_img := resources.Get (printf "media/%s" $item.overlay_img) }}
+      {{ if $bg_img }}
+        {{ $style_bg = printf "%sbackground-image: url('%s');" $style_bg $bg_img.Permalink }}
+      {{ else }}
+        {{ errorf "Couldn't find `%s` in the `assets/media/` folder - please add it." $item.overlay_img }}
+      {{ end }}
+      {{ if $item.overlay_filter }}
+        {{ $style_bg = printf "%sfilter: brightness(%s);" $style_bg (string $item.overlay_filter) }}
+      {{ end }}
+   {{ end }}
+
+  <div class="wg-hero dark carousel-item{{if eq $index 0}} active{{end}}" style="{{$style_bg | safeCSS}}">
     <div class="container" style="text-align: {{$item.align | default "left"}};">
         <h1 class="hero-title">
           {{ with $item.title }}{{ . | markdownify | emojify }}{{ end }}

wowchemy/layouts/shortcodes/gallery.html

@@ -1,6 +1,8 @@
+{{/* Gallery Shortcode for Wowchemy. */}}
+{{/* Load gallery images from page dir. */}}
+
 {{/* Get album folder or default to `gallery/`. */}}
-{{ $album := "" }}
-{{ with .Get "album" }}{{ $album = . }}{{else}}{{ $album = "gallery" }}{{end}}
+{{ $album := (.Get "album") | default "gallery" }}
 
 {{/* Set image path and page bundle that images are associated with. */}}
 {{ $album_path := "" }}
@@ -17,7 +19,6 @@
 
   {{/* Attempt to automatically load gallery images from page bundle */}}
   {{ $images := ($resource_page.Resources.ByType "image").Match $album_path }}
-  {{ with $images }}
   {{ range $images }}
     {{ $image := .Resize "x190" }}
     {{/* Check if the user set a caption for this image */}}
@@ -31,28 +32,8 @@
     <a data-fancybox="gallery-{{$album}}" href="{{ .RelPermalink }}" {{ with $caption }}data-caption="{{.|markdownify|emojify|safeHTMLAttr}}"{{ end }}>
       <img src="{{ $image.RelPermalink }}" loading="lazy" alt="{{ plainify $caption | default $filename }}" width="{{ $image.Width }}" height="{{ $image.Height }}">{{/* Width & height (or low res src) required for lazy loading. */}}
     </a>
-  {{end}}
-
-  {{else}}
-  {{/* Load gallery images from the `static/media/` media library or internet */}}
-
-  {{ if $.Page.Params.gallery_item }}
-  {{ range (where $.Page.Params.gallery_item "album" $album) }}
-  {{/* Set image path. */}}
-  {{ $.Scratch.Set "src" .image }}
-  {{ if gt (len .image) 4 }}
-    {{ if ne "http" (slicestr .image 0 4) }}
-      {{ $media_dir := site.Params.media_dir | default "media" }}
-      {{ $.Scratch.Set "src" (printf "%s/%s" $media_dir .image | relURL) }}
-    {{ end }}
-  {{ end }}
-  {{/* Don't lazy load image as cannot init image size from non-Hugo asset, resulting in inaccurate anchor scrolling & active link highlighting. */}}
-  <a data-fancybox="gallery{{ with .album }}-{{.}}{{ end }}" {{ with .caption }}data-caption="{{.|markdownify|emojify|safeHTMLAttr}}"{{ end }} href="{{$.Scratch.Get "src"}}">
-    <img src="{{$.Scratch.Get "src"}}" alt="{{ plainify .caption | default .image }}">
-  </a>
-  {{end}}
   {{else}}
     {{ errorf "Unable to load gallery in %s." .Page.File.Filename }}
   {{end}}
-  {{end}}
+
 </div>

wowchemy/layouts/shortcodes/video.html

@@ -1,29 +1,35 @@
-{{/* Enable video to be loaded from local page dir or media library at `static/media/`. */}}
+{{/* Video Shortcode for Wowchemy. */}}
+{{/* Load video from page dir falling back to media library at `assets/media/` and then to remote URI. */}}
 
-{{ $path := "" }}
-{{ $root_dir := "" }}
-{{ $media_dir := site.Params.media_dir | default "media" }}
-{{ if .Get "library" }}
-  {{ $path = printf "%s/" $media_dir }}
-  {{ $root_dir = "static/" }}
-{{ end }}
+{{ $destination := .Get "src" }}
+{{ $video_ext_with_dot := path.Ext (.Get "src") }}
+{{ $video_ext := strings.TrimPrefix "." $video_ext_with_dot }}
+{{ $video_type := $video_ext }}
+{{ $destination_preview := (.Get "poster") | default (replace $destination $video_ext_with_dot ".jpg") }}
+{{ $is_remote := strings.HasPrefix $destination "http" }}
+{{- $asset := "" -}}
+{{- $asset_preview := "" -}}
+{{- if not $is_remote -}}
+  {{- $asset = (.Page.Resources.ByType "video").GetMatch $destination -}}
+  {{- $asset_preview = (.Page.Resources.ByType "image").GetMatch $destination_preview -}}
+  {{- if not $asset -}}
+    {{- $asset = resources.Get (path.Join "media" $destination) -}}
+    {{- $asset_preview = resources.Get (path.Join "media" $destination_preview) -}}
+  {{- end -}}
+  {{ $video_type = $asset.MediaType.SubType }}
+{{- end -}}
 
-{{ $video := printf "%s%s" $path (.Get "src") }}
-{{ $video_type := strings.TrimPrefix "." (path.Ext (.Get "src")) }}
-{{ if .Get "library" }}
-  {{ $video = $video | relURL }}
+{{ if $asset }}
+  {{ $destination = $asset.RelPermalink }}
+{{ else }}
+  {{ $destination = $destination | safeURL }}
 {{ end }}
 
-{{ $poster := printf "%s%s%s" $path (substr (.Get "src") 0 -4) ".jpg" }}
-{{ $has_poster := fileExists (printf "%s%s" $root_dir $poster) }}
-{{ if and $has_poster (.Get "library") }}
-  {{ $poster = $poster | relURL }}
-{{ else if $has_poster }}
-  {{ $poster = $poster }}
-{{ else }}
-  {{ $poster = "" }}
+{{ $poster := (.Get "poster") | default "" }}
+{{ if $asset_preview }}
+  {{ $poster = $asset_preview.RelPermalink }}
 {{ end }}
 
-<video {{if (.Get "controls")}}controls{{else}}autoplay loop{{end}} {{with $poster}}poster="{{.}}"{{end}}>
-  <source src="{{ $video }}" type="video/{{$video_type}}">
+<video {{if (.Get "controls")}}controls{{else}}autoplay loop{{end}} {{with $poster}}poster="{{.}}"{{end}} {{ with (.Get "id") }}id="video-{{.|anchorize}}"{{end}}>
+  <source src="{{$destination}}" type="video/{{$video_type}}">
 </video>