diff options
Diffstat (limited to 'design/templates')
| -rw-r--r-- | design/templates/admin/insert_images.html | 25 | ||||
| -rw-r--r-- | design/templates/base.html | 2 | ||||
| -rw-r--r-- | design/templates/details/entry.html | 23 |
3 files changed, 41 insertions, 9 deletions
diff --git a/design/templates/admin/insert_images.html b/design/templates/admin/insert_images.html index 70e1965..f9a2fa6 100644 --- a/design/templates/admin/insert_images.html +++ b/design/templates/admin/insert_images.html @@ -31,8 +31,18 @@ figure { </style> <script src="/static/jquery.tools.min.js"></script> <script> -// execute your scripts when the DOM is ready. this is a good habit - +function buildVideo(video_url, id, c) { + html = '<div class="embed-container">\n\t<video poster="" loop="true" preload="auto" id="'+id+'" class="vidauto'; + if (c) { + html += c+'"'; + } else { + html += '"'; + } + html += '>\n\t\t<source src="'+video_url+'.webm" type="video/webm">\n'; + html += '\t\t<source src="'+video_url+'.mp4" type="video/mp4">\n'; + html += '\t\tYour browser does not support video playback via HTML5.\n\t</video>\n</div>'; + return html; +} function buildImage(image_url, id, c, caption) { html = '<img src="'+image_url+'" id="image-'+id+'" class="'; if (c) { @@ -59,7 +69,11 @@ $(function(){ }); $('.insert').click(function(){ - var code = buildImage($(this).attr('data-src'), $(this).attr('data-id'), $(this).attr('data-class'), $(this).attr('data-caption')); + if ($(this).attr('data-is-video')) { + var code = buildVideo($(this).attr('data-src'), $(this).attr('data-id'), $(this).attr('data-class')); + } else { + var code = buildImage($(this).attr('data-src'), $(this).attr('data-id'), $(this).attr('data-class'), $(this).attr('data-caption')); + } var el = parent.document.getElementById('{{textarea_id}}'); var start = el.selectionStart var end = el.selectionEnd @@ -94,13 +108,14 @@ $(function(){ <img src="{% get_image_by_size image 'tn' %}" /> <figcaption>{{image.id}} - {{image.title}} {% if image.caption %}– {{image.caption}}{%endif%}</figcaption> </figure> - <ul class="actions"> + <ul class="actions">{%if image.is_video %} + <li><a data-is-video="true" data-src="{{image.get_video_base_url}}" data-id="{{image.id}}" data-class="vid" class="insert" href="">Insert video</a>{%else%} <li><a data-src="{% get_image_by_size image 'admin_insert' %}" data-id="{{image.id}}" data-class="picwide" class="insert" href="">full width</a></li> <li><a data-src="{% get_image_by_size image 'admin_insert' %}" data-id="{{image.id}}" data-class="picfull" class="insert" href="">column width</a></li> <li><a data-src="{% get_image_by_size image 'admin_insert' %}" data-id="{{image.id}}" data-class="picwide" data-caption="true" class="insert" href="">full width cap</a></li> <li><a data-src="{% get_image_by_size image 'admin_insert' %}" data-id="{{image.id}}" data-class="picfull" data-caption="true" class="insert" href="">column width cap</a></li> <li><a data-src="{% get_image_by_size image 'admin_insert' %}" data-id="{{image.id}}" data-class="cluster pic" class="insert" href="">cluster</a></li> - <li><a href="/admin/photos/luximage/{{image.pk}}/change/">Edit Image</a></li> + <li><a href="/admin/photos/luximage/{{image.pk}}/change/">Edit Image</a></li>{%endif%} </ul> </div> {% endfor %} diff --git a/design/templates/base.html b/design/templates/base.html index c0a5ca8..0646c9b 100644 --- a/design/templates/base.html +++ b/design/templates/base.html @@ -29,7 +29,7 @@ {%block extrahead%}{%endblock%} </head> <body {%block bodyid%}{%endblock%}{%block bodyevents%}{%endblock%}> - <div class="wrapper"> + <div class="wrapper" id="wrapper"> <div class="header-wrapper"> <header role="banner"> <h1><a id="logo" href="/" title="home">Luxagraf</a></h1> diff --git a/design/templates/details/entry.html b/design/templates/details/entry.html index 3762b48..d5038f2 100644 --- a/design/templates/details/entry.html +++ b/design/templates/details/entry.html @@ -17,8 +17,7 @@ <meta property="og:description" content="{{object.meta_description}}" /> <meta property="article:published_time" content="{{object.pub_date|date:'c'}}" /> <meta property="article:author" content="Luxagraf" /> - <meta property="og:site_name" content="Luxagraf" /> - <meta property="og:image" content="{{object.get_image_url}}" />{% for image in object.get_images %} + <meta property="og:site_name" content="Luxagraf" />{% for image in object.get_images %} <meta property="og:image" content="{{image}}" />{% endfor %} <meta property="og:locale" content="en_US" /> <meta name="twitter:card" content="summary_large_image"/> @@ -36,7 +35,7 @@ class="{%if t == 1 or t == 3 or t == 5 %}double{%else%}single{%endif%}{%if t == {% block primary %} - <main role="main"> + <main role="main" id="main"> <article class="h-entry hentry post--article{% with object.get_template_name_display as t %}{%if t == "double" or t == "double-dark" %} post--article--double{%endif%}{%endwith%}" itemscope itemType="http://schema.org/Article"> <header id="header" class="post--header {% with object.get_template_name_display as t %}{%if t == "double" or t == "double-dark" %}post--header--double{%endif%}{%endwith%}"> <h1 class="p-name entry-title post--title" itemprop="headline">{%if object.template_name == 1 or object.template_name == 3 %}{{object.title|smartypants|safe}}{%else%}{{object.title|smartypants|widont|safe}}{%endif%}</h1> @@ -127,7 +126,25 @@ window.onload = function() { createMap(); var open = false; {%endif%}{%endwith%} +{% if object.has_video %} +var tester = document.getElementsByClassName("vidauto"); +var wrapper = document.getElementById('wrapper'); +var dist = 100; + +window.onscroll = function() { + for (var i=0; i<tester.length; i++) { + checkVisible(tester[i]) ? tester[i].play() : tester[i].pause(); + } +}; + +function checkVisible(elm) { + var rect = elm.getBoundingClientRect(); + var viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight); + return !(rect.bottom < 0 || rect.top - viewHeight >= 0); } +{%endif%} +} + </script> {% with object.template_name as t %}{%if t == 1 or t == 3 %} <script src="/media/js/hyphenate.min.js" type="text/javascript"></script> |