Videos in slider

- https://github.com/balaramadurai/hugo-travelify-theme/issues/32 - removed Google Plus from the share - introduced embed.css from - https://www.w3docs.com/snippets/css/how-to-create-a-responsive-iframe-with-css.html - for YouTube and Vimeo embedding
author: Bala Ramadurai <bala@balaramadurai.net> 2020-12-30 10:33:31 +0300
committer: Bala Ramadurai <bala@balaramadurai.net> 2020-12-30 10:33:31 +0300
commit: 87d9cdf1a5397ada9ef8784b94ec9b7da7216c48 (patch)
tree: a1da319febe9d3a531ba500779e6e5ea361de9ec
parent: 4effe5d6ad4db17f5a4e28fa823a83b7ed1a0a30 (diff)
6 files changed, 118 insertions, 53 deletions
diff --git a/README.md b/README.md
index d5f9eb1..80cfbb0 100644
--- a/README.md
+++ b/README.md
@@ -85,6 +85,9 @@ num_features = 4 # The slider picks up the banner images from the N most recent
 
 The slider can be made `manual = true` and in each of the posts you want highlighted on the slider, include `slider = true` in the frontmatter. Another way to add a slideshow to the slider is by creating YAML files in the `data/slider` folder. Check the `exampleSite` for example.
 
+#### Videos in slider
+You can now add a video (from YouTube or Vimeo or Dailymotion or your own mp4/webm file) in the slider. (Thanks to [https://github.com/balaramadurai/hugo-travelify-theme/issues/32](Issue #32) for the idea)
+
 *Tip* - For best results in the slider, use **1018x460** resolution for the banner images.
 
 ### 2. Google Analytics
diff --git a/assets/embed.css b/assets/embed.css
new file mode 100644
index 0000000..76b64dd
--- /dev/null
+++ b/assets/embed.css
@@ -0,0 +1,14 @@
+.wrap-element {
+    position: relative;
+    overflow: hidden;
+    padding-top: 45%;
+}
+
+.wrapped-iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border: 0;
+}
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index fb302dd..dd9177d 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -1,5 +1,7 @@
 {{ $css := resources.Get "style.css" }}
 {{ $style := $css | resources.Minify }}
+{{ $embed_css := resources.Get "embed.css" }}
+{{ $embed_style := $embed_css | resources.Minify }}
 <head>
     <title>{{ if .IsHome }}{{ .Site.Title }}  - {{ .Site.Params.site_description }} {{ else }}{{ .Title }} - {{ .Site.Title }}{{ end }} </title>
     <!--    <link rel='dns-prefetch' href='//fonts.googleapis.com' />  -->
@@ -8,6 +10,7 @@
     <meta name="referrer" content="no-referrer">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
     <link rel='stylesheet' id='travelify_style-css'  href="{{ $style.Permalink }}" type='text/css' media='all' />
+    <link rel='stylesheet' id='embed_style-css'  href="{{ $embed_style.Permalink }}" type='text/css' media='all' />
     <link rel='stylesheet' id='google_font_ubuntu-css'  href="{{ $style.Permalink }}" type='text/css' media='all' />
     <link rel="shortcut icon" href="{{ .Site.BaseURL }}/favicon.ico" type="image/x-icon">
     {{ if and (and (not (eq .Site.DisqusShortname "")) (not .Params.disable_comments)) }}
diff --git a/layouts/partials/share.html b/layouts/partials/share.html
index 0b54b0f..0fc8c53 100644
--- a/layouts/partials/share.html
+++ b/layouts/partials/share.html
@@ -25,16 +25,6 @@
 	{{ end }}
 	{{ end }}
 	
-	{{ if isset .Site.Params.share "googleplus" }}
-	{{ if .Site.Params.share.googleplus }}
-	
-	<li class="google-plus">
-	    <a href="https://plus.google.com/share?url={{ .Permalink }}" title="{{ .Title }}" target="_blank">{{ .Site.Data.l10n.share.googleplus }}</a>
-	</li>
-	
-	{{ end }}
-	{{ end }}
-	
 	{{ if isset .Site.Params.share "linkedin" }}
 	{{ if .Site.Params.share.linkedin }}
 
diff --git a/layouts/partials/slider.html b/layouts/partials/slider.html
index 69ae08d..c2dc97e 100644
--- a/layouts/partials/slider.html
+++ b/layouts/partials/slider.html
@@ -1,51 +1,67 @@
+{{ $vids :=0 }}
+{{ $vid_search_terms := "youtube|vimeo|dailymotion" }}
 {{ if isset .Site.Params "slider" }}
 {{ if .Site.Params.slider.enable }}
 
 <section class="featured-slider">
     <div class="slider-cycle">
-	{{ if .Site.Data.slider }}
-	{{ if gt (len .Site.Data.slider) 0 }}
-	{{ range $index, $slide := .Site.Data.slider }}
-	{{ if and (isset $slide "banner") (not (eq .banner "")) }}
-	<div class="slides {{ if eq $index 0 }} displayblock {{ else }} displaynone {{ end }}">
-		    <figure>
-			    <a href="{{ .url }}" title="{{ .Title }}">
-			    <img src="{{ .banner | absURL }}" class="pngfix wp-post-image" alt="{{ .Title }}" title="{{ .Title }}">
-		</a>
-	    </figure>
-		    <article class="featured-text">
-			    <div class="featured-title">
-			    <a href="{{ .Permalink }}" title="{{ .Title }}">{{ .Title }}</a>
-		</div><!-- .featured-title -->
-			    <div class="featured-content">{{ printf "%s" .Summary | markdownify }}
-		</div><!-- .featured-content -->
-	    </article><!-- .featured-text -->
-		</div><!-- .slides -->
-	{{ end }}
-	{{ end }}
-	{{ end }}
-	{{ end }}
-
-	{{ if and (isset .Site.Params.slider "manual") (.Site.Params.slider.manual) }}
-	{{ range $index, $page := .Site.Pages.ByParam "slider" }}
-	{{ if and (isset .Params "banner") (not (eq .Params.banner "")) }}
-	{{ if and (isset .Params "slider") (.Params.slider) }}
-	<div class="slides {{ if eq $index 0 }} displayblock {{ else }} displaynone {{ end }}">
-		    {{ partial "single_slide" . }}
-		</div><!-- .slides -->
-	{{ end }}
-	{{ end }}
-	{{ end }}
-	{{ else }}
-	{{ $features := add .Site.Params.slider.num_features 1 }}
-	{{ range $index, $page := first $features (where .Site.Pages "Type" "post") }}
-	{{ if and (isset .Params "banner") (not (eq .Params.banner "")) }}
-	<div class="slides {{ if eq $index 0 }} displayblock {{ else }} displaynone {{ end }}">
-		    {{ partial "single_slide" . }}
-		</div><!-- .slides -->
-	{{ end }}
-	{{ end }}
-	{{ end }}
+	      {{ if .Site.Data.slider }}
+	      {{ if gt (len .Site.Data.slider) 0 }}
+	      {{ range $index, $slide := .Site.Data.slider }}
+	      {{ if and (isset $slide "banner") (not (eq .banner "")) }}
+	      <div class="slides {{ if eq $index 0 }} displayblock {{ else }} displaynone {{ end }}">
+            {{ $vids := findRE $vid_search_terms .banner }}
+            {{ if eq (len $vids) 0 }}
+		        <figure>
+			          <a href="{{ .url }}" title="{{ .Title }}">
+			              <img src="{{ .banner | absURL }}" class="pngfix wp-post-image" alt="{{ .Title }}" title="{{ .Title }}">
+		            </a>
+	          </figure>
+            {{ else }}
+            <div class="wrap-element">
+                <iframe class="wrapped-iframe" src="{{ .banner }}" allowfullscreen></iframe>
+            </div>
+            {{ end }}
+		        <article class="featured-text">
+			          <div class="featured-title">
+			              <a href="{{ .Permalink }}" title="{{ .Title }}">{{ .Title }}</a>
+		            </div><!-- .featured-title -->
+			          <div class="featured-content">{{ printf "%s" .Summary | markdownify }}
+		            </div><!-- .featured-content -->
+	          </article><!-- .featured-text -->
+		    </div><!-- .slides -->
+	      {{ end }}
+	      {{ end }}
+	      {{ end }}
+	      {{ end }}
+        
+	      {{ if and (isset .Site.Params.slider "manual") (.Site.Params.slider.manual) }}
+	      {{ range $index, $page := .Site.Pages.ByParam "slider" }}
+	      {{ if and (isset .Params "banner") (not (eq .Params.banner "")) }}
+	      {{ if and (isset .Params "slider") (.Params.slider) }}
+	      <div class="slides {{ if eq $index 0 }} displayblock {{ else }} displaynone {{ end }}">
+            {{ $vids := findRE $vid_search_terms .banner }}
+            {{ if eq (len $vids) 0 }}
+		        {{ partial "single_slide" . }}
+            {{ else }}
+            <div class="wrap-element">
+                <iframe class="wrapped-iframe" src="{{ .banner }}" allowfullscreen></iframe>
+            </div>
+            {{ end }}
+		    </div><!-- .slides -->
+	      {{ end }}
+	      {{ end }}
+	      {{ end }}
+	      {{ else }}
+	      {{ $features := add .Site.Params.slider.num_features 1 }}
+	      {{ range $index, $page := first $features (where .Site.Pages "Type" "post") }}
+	      {{ if and (isset .Params "banner") (not (eq .Params.banner "")) }}
+	      <div class="slides {{ if eq $index 0 }} displayblock {{ else }} displaynone {{ end }}">
+		        {{ partial "single_slide" . }}
+		    </div><!-- .slides -->
+	      {{ end }}
+	      {{ end }}
+	      {{ end }}
     </div>
     <nav id="controllers" class="clearfix">
     </nav>
diff --git a/static/css/embed.css b/static/css/embed.css
new file mode 100644
index 0000000..2e8149e
--- /dev/null
+++ b/static/css/embed.css
@@ -0,0 +1,39 @@
+// Credit: Nicolas Gallagher and SUIT CSS.
+
+                   .embed-responsive {
+    position: relative;
+    display: block;
+    width: 100%;
+    padding: 0;
+    overflow: hidden;
+
+    &::before {
+        display: block;
+        content: "";
+    }
+
+    .embed-responsive-item,
+    iframe,
+    embed,
+    object,
+    video {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        border: 0;
+    }
+}
+
+@each $embed-responsive-aspect-ratio in $embed-responsive-aspect-ratios {
+    $embed-responsive-aspect-ratio-x: nth($embed-responsive-aspect-ratio, 1);
+    $embed-responsive-aspect-ratio-y: nth($embed-responsive-aspect-ratio, 2);
+
+    .embed-responsive-#{$embed-responsive-aspect-ratio-x}by#{$embed-responsive-aspect-ratio-y} {
+        &::before {
+            padding-top: percentage($embed-responsive-aspect-ratio-y / $embed-responsive-aspect-ratio-x);
+        }
+    }
+}
author	Bala Ramadurai <bala@balaramadurai.net>	2020-12-30 10:33:31 +0300
committer	Bala Ramadurai <bala@balaramadurai.net>	2020-12-30 10:33:31 +0300
commit	87d9cdf1a5397ada9ef8784b94ec9b7da7216c48 (patch)
tree	a1da319febe9d3a531ba500779e6e5ea361de9ec
parent	4effe5d6ad4db17f5a4e28fa823a83b7ed1a0a30 (diff)