michaelh/hugo-academic-mirror
1
0
Fork 0
mirror of https://github.com/gcushen/hugo-academic.git synced 2025-07-26 03:00:50 +02:00
Code Issues Projects Releases Packages Wiki Activity

feat: add support for video backgrounds

Browse source 
Via design > background > video > path

Also add flip option and move `advanced` params under `design` instead, whilst maintaining legacy compat.
This commit is contained in:
George Cushen 2021-07-10 00:20:15 +01:00
commit 42d1cf0063
3 changed files with 26 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

2
test/config.yaml
View file

@ -8,6 +8,8 @@ outputs:
home: [HTML, RSS, JSON, WebAppManifest, headers, redirects] home: [HTML, RSS, JSON, WebAppManifest, headers, redirects]
disableAliases: true disableAliases: true
taxonomies: [] taxonomies: []
markup:
_merge: deep
params: params:
require_isotope: false require_isotope: false
day_night: true day_night: true

10
wowchemy/assets/scss/wowchemy/widgets/_base.scss
View file

@ -94,6 +94,16 @@
background-size: cover; background-size: cover;
} }
.bg-video {
position: absolute;
top: 0;
max-height: initial; // Override general `video` selector's max-height.
}
.bg-video.flip {
transform: rotateY(180deg);
}
/* Create a parallax-like scrolling effect on desktop browsers. */ /* Create a parallax-like scrolling effect on desktop browsers. */
.parallax { .parallax {
background-attachment: fixed; background-attachment: fixed;

17
wowchemy/layouts/partials/widget_page.html
View file

@ -41,6 +41,15 @@
{{ $style_bg = printf "%sbackground-image: linear-gradient(%sdeg, %s, %s);" $style_bg $angle $bg.gradient_start $bg.gradient_end }} {{ $style_bg = printf "%sbackground-image: linear-gradient(%sdeg, %s, %s);" $style_bg $angle $bg.gradient_start $bg.gradient_end }}
{{ end }} {{ end }}
{{ $bg_video := "" }}
{{ if $bg.video.path }}
{{ $bg_video = resources.Get (printf "media/%s" $bg.video.path) }}
{{ end }}
{{ $bg_video_class := "" }}
{{ if $bg.video.flip }}
{{ $bg_video_class = "flip" }}
{{ end }}
{{ if $bg.image }} {{ if $bg.image }}
{{/* See Hugo note on linking assets in styles: https://github.com/gohugoio/hugoThemes#common-permalink-issues */}} {{/* See Hugo note on linking assets in styles: https://github.com/gohugoio/hugoThemes#common-permalink-issues */}}
{{ $bg_img := resources.Get (printf "media/%s" $bg.image) }} {{ $bg_img := resources.Get (printf "media/%s" $bg.image) }}
@ -74,7 +83,7 @@
{{ $style = print $style $style_clip_path }} {{ $style = print $style $style_clip_path }}
{{ end }} {{ end }}
{{ with $st.Params.advanced.css_style }} {{ with ($st.Params.design.css_style | default $st.Params.advanced.css_style) }}
{{ $style = print $style . }} {{ $style = print $style . }}
{{ end }} {{ end }}
@ -87,7 +96,7 @@
{{ $widget_path := printf "widgets/%s.html" $widget }} {{ $widget_path := printf "widgets/%s.html" $widget }}
{{ $widget_args := dict "root" $ "page" $st "hash_id" $hash_id }} {{ $widget_args := dict "root" $ "page" $st "hash_id" $hash_id }}
{{ $css_classes := $st.Params.advanced.css_class | default "" }} {{ $css_classes := $st.Params.design.css_class | default $st.Params.advanced.css_class | default "" }}
{{ $extra_attributes := "" }} {{ $extra_attributes := "" }}
{{ $use_container := true }} {{ $use_container := true }}
@ -111,7 +120,9 @@
{{/* Dedicated child div for bg prevents parallax 100% height issue within new CSS grid page wrapper. */}} {{/* Dedicated child div for bg prevents parallax 100% height issue within new CSS grid page wrapper. */}}
<section id="{{$hash_id}}" class="home-section {{$widget_class}} {{if $bg.text_color_light}}dark{{else if (eq $bg.text_color_light false)}}light{{end}} {{with $css_classes}}{{.}}{{end}}" {{with $style}}style="{{. | safeCSS}}"{{end}} {{print $extra_attributes | safeHTMLAttr}}> <section id="{{$hash_id}}" class="home-section {{$widget_class}} {{if $bg.text_color_light}}dark{{else if (eq $bg.text_color_light false)}}light{{end}} {{with $css_classes}}{{.}}{{end}}" {{with $style}}style="{{. | safeCSS}}"{{end}} {{print $extra_attributes | safeHTMLAttr}}>
<div class="home-section-bg {{if $bg.image}} bg-image{{if ($bg.image_parallax | default true) }} parallax{{end}}{{end}}" {{with $style_bg}}style="{{. | safeCSS}}"{{end}}></div> <div class="home-section-bg {{if $bg.image}} bg-image{{if ($bg.image_parallax | default true) }} parallax{{end}}{{end}}" {{with $style_bg}}style="{{. | safeCSS}}"{{end}}>
{{with $bg_video}}<video class="bg-video {{$bg_video_class}}" playsinline="" preload="auto" loop="" muted autoplay="" tabindex="-1" width="100%" height="100%" src="{{.RelPermalink}}" style="width: 100%; height: 100%; object-fit: cover; object-position: center center; opacity: 1;"></video>{{end}}
</div>
{{if $use_container}}<div class="container">{{end}} {{if $use_container}}<div class="container">{{end}}
{{if $use_cols}} {{if $use_cols}}