add in settings to turn off youtube thumb images on demand globally and per shortcode

master
David Kebler 2017-04-11 20:08:03 -07:00
parent dd94b656c9
commit 7667e7d097
5 changed files with 49 additions and 13 deletions

View File

@ -9,6 +9,7 @@
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.10.0/highlight.min.js"></script>
<!-- LOCAL -->
<script src="/js/util.js"></script>
<!-- sizing tools -->
<script src="/js/fitToWindow.js"></script>
<script src="/js/flowType.js"></script>

View File

@ -1,9 +1,10 @@
<!-- TODO add in defaul maxwidth and wpad here with site parameters and scratch -->
{{ if .IsNamedParams }}
{{ with $.Site.Params.youtube }}{{ $.Scratch.Set "maxwidth" .maxwidth }}{{ end }}
{{ with .Get "maxwidth" }}{{ $.Scratch.Set "maxwidth" . }}{{ end }}
{{ with $.Site.Params.youtube }}{{ $.Scratch.Set "wpad" .wpad }}{{ end }}
{{ with .Get "wpad" }}{{ $.Scratch.Set "wpad" . }}{{ end }}
{{ if .IsNamedParams }}
{{ with $.Site.Params.youtube }}{{ $.Scratch.Set "noThumb" .disable_thumb }}{{ end }}
{{ with .Get "nothumb" }}{{ $.Scratch.Set "noThumb" . }}{{ end }}
<div class="box box--column">
{{ with .Get "title" }}
<div class="box__title">{{ . }}</div>
@ -14,6 +15,7 @@
{{ with .Get "plist"}} list="{{ . }}"{{ end }}
{{ with $.Scratch.Get "maxwidth"}} maxWidth="{{ . }}"{{ end }}
{{ with $.Scratch.Get "wpad"}} wPad="{{ . }}"{{ end }}
{{ with $.Scratch.Get "noThumb"}} nothumb="yes" {{ end }}
>
<!-- thumb and video get put here -->
</div>
@ -23,7 +25,12 @@
</div>
{{ else }}
{{ $numOfParams := ( len .Params ) }}
<div class="box box--embed box--youtube" youtube_id="{{ .Get 0 }}" {{ if eq $numOfParams 2 }} start="{{ .Get 1 }}"{{ end }}>
{{ with $.Site.Params.youtube }}{{ $.Scratch.Set "noThumb" .disable_thumb }}{{ end }}
<div class="box box--embed box--youtube"
youtube_id="{{ .Get 0 }}"
{{ if eq $numOfParams 2 }} start="{{ .Get 1 }}"{{ end }}
{{ with $.Scratch.Get "noThumb"}} nothumb="yes" {{ end }}
>
<!-- image or iframe injected here -->
</div>
{{ end }}

View File

@ -21,3 +21,11 @@ For those who are Hugo experienced and know what they are doing and are able to
## Getting Started
See this theme in action as a landing page and learn about how to use it to make your own landing page by visiting the [landing page guide](https://dkebler.github.io/landingpage-guide/) (generated by Hugo and this theme of course). Once you have the tools you'll need installed you can begin editing a copy of the starter repository. Quickly you'll have a rough version of **your** landing page in just a few minutes.
## Cavets
**This code does not support older nor old-ball browsers** I have taken **NO** measures to support anything but the latest popular browsers (that would be Chrome, Firefox and Edge). There is not css prefixing. The javascript should be compatible with the mentioned browsers on any version out in the last year or two. If you want to use this code to reach "everyone" then it would be up to you to make the necessary modifications. That said it will work for most people who have upgraded their phone/browser in the last two years. I make no guarantees against bugs as I have done very little testing on actual devices as services like browserstack are expensive and I don't have the time. So for example I have not tested in IOS running Safari since I don't own any Apple devices. Beyond that I have written no tests for the javascript code although I have tried to manually test things in particular the settings in the toml file. It's probably just fine for non-critical stuff. Otherwise I'd fork it and spend the time making it battle hardended.
## Optimization
At this time I have not written any workflow code to concatenate and minifify the javascript, css, or html. Plans are in the works to write some nodejs to do this so when building using for depolyment Hugo will use the optimized files and templates. For the time being it is what it is. There not so much code here that I have honestly noticed a performance hit. I did write javascript code to use youtube thumb images which really helps with load time if you need a lot of videos embedded. Using optomized images on your part if you have a lot would have a greater effect than this optimization anyway.

6
static/js/util.js Normal file
View File

@ -0,0 +1,6 @@
function isMobile(a) {
return (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0, 4)));
}
// Call is
// isMobile(navigator.userAgent || navigator.vendor || window.opera)

View File

@ -2,27 +2,41 @@
$(document).bind("DOMContentLoaded",
function () {
// TODO also grad maxwith and window padding data
var playBtn = '<i class="fa fa-play-circle-o play-button"></i>'
$('div[youtube_id]').each(function () {
var vid = $(this).attr('youtube_id');
var mw = $(this).attr('maxWidth');
var wp = $(this).attr('wPad');
var bgi = `style="background-image: url(https://i.ytimg.com/vi/${vid}/mqdefault.jpg)"`
var thumb = `<div class="thumb--yt" ${bgi} width="560" height="315">`
$(this).append(thumb).children().append(playBtn).click(insertIframe).fitToWindow(mw, wp)
if ($(this).attr('nothumb') !== "yes") {
var vid = $(this).attr('youtube_id');
var mw = $(this).attr('maxWidth');
var wp = $(this).attr('wPad');
var bgi = `style="background-image: url(https://i.ytimg.com/vi/${vid}/mqdefault.jpg)"`
var thumb = `<div class="thumb--yt" ${bgi} width="560" height="315">`
$(this).append(thumb).children().append(playBtn).click(insertIframe).fitToWindow(mw, wp)
} else { // if image thumbs turned off
insertIframe.call(this)
}
})
});
})
function insertIframe() {
var $box = $(this).parent()
var id = $box.attr('youtube_id')
var autoplay = "autoplay=1&"
if (!id) { // image thumb is off not called by thumb so don't need parent
$box = $(this)
id = $box.attr('youtube_id')
autoplay = ""
}
var mw = $box.attr('maxWidth');
var wp = $box.attr('wPad');
var start = $box.attr("start") || 1
var list = ""
if ($box.attr("list")) { list = `&list=${$box.attr("list")}` }
var url = `https://www.youtube.com/embed/${id}?autoplay=1&start=${start}`
var url = `https://www.youtube.com/embed/${id}?${autoplay}start=${start}`
var vIframe = `<iframe width = "560" height = "315" src ="${url}${list}" frameborder = "0" allowfullscreen></iframe>`
$box.html(vIframe).children().fitToWindow($box.data("maxWidth"), $box.data("wPad"))
$box.html(vIframe).children().fitToWindow($box.data("maxWidth") || mw, $box.data("wPad") || wp)
}
}(jQuery));