blog/_includes/views/banner.html

132 lines
3.8 KiB
HTML
Raw Normal View History

2019-09-11 06:19:34 +02:00
{%- include functions.html func='log' level='debug' msg='Get banner_html value' -%}
{% assign name = 'banner_html' %}
{%- include functions.html func='get_value' -%}
{% assign banner_html = return %}
{%- include functions.html func='log' level='debug' msg='Get heading value' -%}
{% assign name = 'heading' %}
{%- include functions.html func='get_value' -%}
{% assign heading = return %}
{%- include functions.html func='log' level='debug' msg='Get subheading value' -%}
{% assign name = 'subheading' %}
{%- include functions.html func='get_value' -%}
{% assign subheading = return %}
{%- include functions.html func='get_banner' -%}
2021-06-26 06:05:19 +02:00
{%- if has_banner -%}
{%- if banner_background -%}
<style>
html .page-banner {
background: {{ banner_background }};
}
</style>
{%- endif -%}
{%- if banner_height -%}
<style>
{%- assign num = banner_height | times: 1 -%}
{%- assign unit = banner_height | replace_first: num -%}
{%- assign banner_min_height = banner_min_height | default: banner_height -%}
html .page-banner {
2021-06-17 15:32:19 +02:00
height: {{ banner_height | times: 0.368 | append: unit }};
min-height: {{ banner_min_height }};
}
html[data-scroll-status="top"] .page-banner {
height: {{ banner_height }};
}
</style>
{%- endif -%}
{%- if banner_opacity -%}
<style>
html .page-banner .page-banner-img > *:first-child {
opacity: {{ banner_opacity }};
}
html[data-theme="dark"] .page-banner .page-banner-img > *:first-child {
opacity: {{ banner_opacity | times: 0.718 }};
}
</style>
{%- endif -%}
{%- if banner_heading_style -%}
<style>
html .page-banner .page-banner-inner > *:first-child > *:nth-child(1) {
{{ banner_heading_style }}
}
</style>
{%- endif -%}
{%- if banner_subheading_style -%}
<style>
html .page-banner .page-banner-inner > *:first-child > *:nth-child(2) {
{{ banner_subheading_style }}
}
</style>
{%- endif -%}
2019-09-11 06:19:34 +02:00
<section class="page-banner">
<div class="page-banner-img">
2021-06-26 06:05:19 +02:00
{%- if banner_video -%}
<video
autoplay=""
poster="{{ banner_image }}"
playsinline
2021-06-26 06:05:19 +02:00
>
<source src="{{ banner_video }}">
</video>
<script>
(function() {
var video = document.querySelector('.page-banner .page-banner-img > video');
var videoPlay = function() {
video.play().catch (function() {
video.muted = true;
video.play();
});
2021-06-26 06:05:19 +02:00
}
video.onloadstart = function() {
video.currentTime = {{ banner_start_at }};
video.volume = {{ banner_volume }};
video.muted = (video.volume == 0);
videoPlay();
2021-06-26 06:05:19 +02:00
}
video.onended = function() {
video.currentTime = {{ banner_start_at }};
video.volume = 0;
{%- if banner_loop -%}
video.play();
{%- endif -%}
}
})();
</script>
{%- else -%}
<div style="background-image: url({{ banner_image }})"></div>
<img class="img-placeholder" src="{{ banner_image }}">
{%- endif -%}
2019-09-11 06:19:34 +02:00
</div>
<div class="wrapper">
<div class="page-banner-inner">
{%- if banner_html -%}
{%- assign banner_html = 'views/' | append: banner_html -%}
{%- include {{ banner_html }} -%}
{%- else -%}
<div class="page-banner-default">
<h1 class="page-banner-heading">
{{ heading | default: page.title | escape }}
</h1>
2020-07-10 16:30:32 +02:00
<h2 class="page-banner-subheading">
{{ subheading | default: page.subtitle | escape }}
2020-07-10 16:30:32 +02:00
</h2>
2019-09-20 09:45:37 +02:00
</div>
2019-09-11 06:19:34 +02:00
{%- endif -%}
</div>
</div>
</section>
{%- endif -%}