diff --git a/layouts/partials/js.html b/layouts/partials/js.html index d848f1b..74777b5 100644 --- a/layouts/partials/js.html +++ b/layouts/partials/js.html @@ -9,6 +9,7 @@ + diff --git a/layouts/shortcodes/youtube.html b/layouts/shortcodes/youtube.html index c38c7ef..456f1cc 100644 --- a/layouts/shortcodes/youtube.html +++ b/layouts/shortcodes/youtube.html @@ -1,9 +1,10 @@ - +{{ 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 }}
{{ with .Get "title" }}
{{ . }}
@@ -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 }} >
@@ -23,7 +25,12 @@ {{ else }} {{ $numOfParams := ( len .Params ) }} -
+{{ with $.Site.Params.youtube }}{{ $.Scratch.Set "noThumb" .disable_thumb }}{{ end }} +
{{ end }} diff --git a/readme.md b/readme.md index 917fcdb..bac04c3 100644 --- a/readme.md +++ b/readme.md @@ -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. diff --git a/static/js/util.js b/static/js/util.js new file mode 100644 index 0000000..c29b5d1 --- /dev/null +++ b/static/js/util.js @@ -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) diff --git a/static/js/youtube.js b/static/js/youtube.js index 92bc708..ff30c00 100644 --- a/static/js/youtube.js +++ b/static/js/youtube.js @@ -2,27 +2,41 @@ $(document).bind("DOMContentLoaded", function () { - // TODO also grad maxwith and window padding data + var playBtn = '' $('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 = `
` - $(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 = `
` + $(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 = `` - $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));