diff options
Diffstat (limited to 'app/posts/templates/posts/guide_detail.html')
| -rw-r--r-- | app/posts/templates/posts/guide_detail.html | 222 |
1 files changed, 70 insertions, 152 deletions
diff --git a/app/posts/templates/posts/guide_detail.html b/app/posts/templates/posts/guide_detail.html index 998d6ce..ee1908e 100644 --- a/app/posts/templates/posts/guide_detail.html +++ b/app/posts/templates/posts/guide_detail.html @@ -10,178 +10,96 @@ <link rel="stylesheet" href="/media/src/solarized.css" type="text/css" media="screen"/> {%endif %} <link rel="canonical" href="https://luxagraf.net{{object.get_absolute_url}}" /> - <meta property="og:type" content="article" /> - <meta property="og:title" content="{{object.title|safe}}" /> - <meta property="og:url" content="https://luxagraf.net{{object.get_absolute_url}}" /> - <meta property="og:description" content="{% if object.meta_description %}{{object.meta_description}}{%else%}{{object.subtitle}}{%endif%}" /> - <meta property="article:published_time" content="{{object.pub_date|date:'c'}}" /> - <meta property="article:author" content="Scott Gilbertson" /> - <meta property="og:site_name" content="Luxagraf" /> - <meta property="og:image" content="{{self.get_featured_image}}" /> - <meta property="og:locale" content="en_US" /> - <meta name="twitter:card" content="summary_large_image"/> - <meta name="twitter:description" content="{% if object.meta_description %}{{object.meta_description}}{%else%}{{object.subtitle}}{%endif%}"/> - <meta name="twitter:title" content="{{object.title|safe}}"/> - <meta name="twitter:site" content="@luxagraf"/> - <meta name="twitter:domain" content="luxagraf"/>{% if object.featured_image %} - <meta name="twitter:image:src" content="{{object.featured_image.get_image_url}}"/>{%endif%} - <meta name="twitter:creator" content="@luxagraf"/> {%endblock%} - -{%block bodyid %}{% if object.get_post_type_display == 'tools' %}class="src"{% endif %}{%endblock%} - -{% block primary %} - <main> - <ul class="bl" id="breadcrumbs" itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> - <li><a href="/" title="luxagraf homepage" itemprop="url"><span itemprop="title">Home</span></a> → </li> - <li><a href="/field-tests/" title="Advice, Tools, Tips and Tricks for Full Time Van, RV, and School Bus Life." itemprop="url"> <span itemprop="title">Field-Tests</span></a> → </li> - <li itemprop="title">{{object.short_title|smartypants|safe}}</li> - </ul> - <article class="h-entry hentry" itemscope itemType="http://schema.org/Article"> - <span class="hide" itemprop="author" itemscope itemtype="http://schema.org/Person">by - <a class="p-author h-card" href="/about"><span itemprop="name">Scott Gilbertson</span></a> +{% block breadcrumbs %} +<nav class="breadcrumbs" itemscope itemtype="http://schema.org/BreadcrumbList"> + <span class="nav-item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"> + <a href="/" itemprop="name">Home</a> + <meta itemprop="position" content="1" /> </span> - <meta itemprop="image" content="https://images.luxagraf.net/header.gif" /> <!--{{self.featured_image.url}}" />--> + <span class="nav-item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"> + <a href="{% url 'guides:guide-base' %}" itemprop="name">Guides</a> + <meta itemprop="position" content="2" /> + </span> + <span class="nav-item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"> + <span itemprop="name">{{topic}}</span> + <meta itemprop="position" content="3" /> + </span> + </nav> +{% endblock %} + {% block primary %}<main> + <article class="h-entry hentry entry-content content" itemscope itemType="http://schema.org/BlogPosting"> <header id="header" class="post-header"> <h1 class="p-name post-title" itemprop="headline">{{object.title|smartypants|safe}}</h1> - <h2 class="post-subtitle">{{object.subtitle|smartypants|safe}}</h2> - <div class="post-linewrapper"> - {% if object.originally_published_by %}<h4 class="post-source">Originally Published By: <a href="{{object.originally_published_by_url}}" title="View {{object.title}} on {{object.originally_published_by}}">{{object.originally_published_by}}</a></h4>{%endif%} - {% if object.location %}<div class="p-location h-adr adr post-location" itemprop="contentLocation" itemscope itemtype="http://schema.org/Place"> - <h3 class="h-adr" itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">{% if object.location.country_name == "United States" %}<span class="p-locality locality" itemprop="addressLocality">{{object.location.name|smartypants|safe}}</span>, <a class="p-region region" href="/jrnl/united-states/" title="travel writing from the United States">{{object.location.state_name|safe}}</a>, <span class="p-country-name" itemprop="addressCountry">U.S.</span>{%else%}<span class="p-region" itemprop="addressRegion">{{object.location.name|smartypants|safe}}</span>, <a class="p-country-name country-name" href="/jrnl/{{object.location.country_slug}}/" title="travel writing from {{object.location.country_name}}"><span itemprop="addressCountry">{{object.location.country_name|safe}}</span></a>{%endif%}</h3> - – <a href="" onclick="showMap({{object.latitude}}, {{object.longitude}}, { type:'point', lat:'{{object.latitude}}', lon:'{{object.longitude}}'}); return false;" title="see a map">Map</a> + {% if object.subtitle %}<h2 class="post-subtitle">{{object.subtitle|smartypants|safe}}</h2>{%endif%} + <div class="post-dateline"> + {% if object.location %}<div class="p-location h-adr adr post-location"> + <span class="h-adr">{% if object.location.country_name == "United States" %} + <span class="p-locality locality">{{object.location.name|smartypants|safe}}</span>, <a class="p-region region" href="/jrnl/united-states/" title="travel writing from the United States">{{object.location.state_name|safe}}</a>, <span class="p-country-name">U.S.</span>{%else%} + <span class="p-region">{{object.location.name|smartypants|safe}}</span>, <a class="p-country-name country-name" href="/jrnl/{{object.location.country_slug}}/" title="travel writing from {{object.location.country_name}}">{{object.location.country_name|safe}}</a>{%endif%} + </span> + – <span id="mapbtn" data-clat="{{object.latitude}}" data-clon="{{object.longitude}}" data-type="point" data-latitude="{{object.latitude}}" data-longitude="{{object.longitude}}">Map</a> </div>{%endif%} - <h3 class="post-location">Filed Under: <a href="/guides/">Guides</a>, {% for topic in object.topics.all %}<a href="/guides/topic/{{topic.slug}}">{{topic}}</a>{%endfor%}</h3> - <time class="dt-published published dt-updated post-date" datetime="{{object.pub_date|date:'c'}}" itemprop="datePublished">Last Updated: {{object.last_updated|date:"F"}} <span>{{object.last_updated|date:"j, Y"}}</span></time> + <time class="dt-published published dt-updated post-date" datetime="{{object.pub_date|date:'c'}}" itemprop="datePublished">{{object.pub_date|date:"F"}} <span>{{object.pub_date|date:"j, Y"}}</span></time> + <span class="hide">by <a class="p-author h-card" href="/about">Scott Gilbertson</a></span> </div> </header> - <div id="article" class="e-content entry-content post-body post-guide" itemprop="articleBody"> - {% if object.preamble %}<div class="afterward"> - {{object.preamble_html|smartypants|safe}} - </div>{%endif%} - {{object.body_html|safe|smartypants}} + <div class="e-content entry-content post-body" itemprop="articleBody"> + {{object.body_html|safe|smartypants}} + </div> + <div class="entry-footer"> + <aside> + <h4>This is part of a series of posts on {{topic|lower}}, you can <a href="{% url 'guides:guides-by-topic' topic|lower %}">read the rest here</a>.</h4> + </aside> </div> - {% if object.afterword_html %}<div class="afterward"> - <h4>Afterward</h4> - {{object.afterword_html|smartypants|safe}} + </article> + {% if object.related.all %}<div class="article-afterward related"> + <div class="related-bottom"> + <h6 class="hedtinycaps">You might also enjoy</h6> + <div class="archive-grid-quad">{% for object in related %} + <div class="archive-grid-card archive-grid-card-simple h-entry"> + <a href="{{object.get_absolute_url}}" title="{{object.title}}"> + <div class="card-image-tiny"> + {% if object.featured_image %} + {% include "lib/img_archive.html" with image=object.featured_image nolightbox=True %} + {%endif%} + </div> + <h4 class="p-name card-hed" itemprop="headline">{% if object.title %}{{object.title|safe|smartypants|widont}}{% else %}{{object.common_name}}{%endif%}</h4> + <p class="p-author author hide" ><span class="byline-author">Scott Gilbertson</span></p> + <span class="card-smcaps"> + {% if object.location %}<span class="p-location h-adr adr card-location" itemprop="contentLocation" itemscope itemtype="http://schema.org/Place"> + {% if object.location.country_name == "United States" %}{{object.location.state_name}}{%else%}{{object.location.country_name}}{%endif%} + </span>{%endif%} + {% if object.location and object.model_name.model != 'page' %}–{%endif%} + {% if object.model_name.model != 'page' %}<time class="dt-published published dt-updated" datetime="{{object.pub_date|date:'c'}}"><span>{{object.pub_date|date:" Y"}}</span></time>{%endif%} + </span> + </a> + </div> + {% endfor %}</div> + </div> </div>{%endif%} - {%if wildlife or object.field_notes.all or object.books.all %}<div class="entry-footer">{%if wildlife %} - <aside id="wildlife"> - <h3>Fauna and Flora</h3> - {% regroup wildlife by ap.apclass.get_kind_display as wildlife_list %} - <ul> - {% for object_list in wildlife_list %} - <li class="grouper">{{object_list.grouper}}<ul> - {% for object in object_list.list %} - <li>{%if object.ap.body_markdown%}<a href="{% url 'sightings:detail' object.ap.slug %}">{{object}}</a>{%else%}{{object}}{%endif%} </li> - {% endfor %}</ul> - {% endfor %}</ul> + <aside class="narrow join mailing-list--wrapper"> + <h6 class="hedtinycaps">If you enjoyed this, you might like <em><a href="/range/">Range</a></em>, A photography (sometimes) newsletter</h6> + <iframe target='_parent' style="border:none !important; background:white; width:100% !important;" title="embedded form for subscribing the the Range newsletter" src="{% url 'lttr:subscribe' slug='range' %}"></iframe> </aside> - {% endif %}{%if object.field_notes.all %} - <aside {% if wildlife %}class="margin-left-none" {%endif%}id="field_notes"> - <h3>Field Notes</h3> - <ul>{% for obj in object.field_notes.all %} - <li><a href="{% url 'fieldnotes:detail' year=obj.pub_date.year month=obj.pub_date|date:"m" slug=obj.slug %}">{{obj}}</a></li> - {% endfor %}</ul> - </aside>{% endif %} - {%if object.books.all %} - <aside id="recommended-reading" {%if object.field_notes.all and wildlife %}class="rr-clear{%endif%}" > - <h3>Recommended Reading</h3> - <ul>{% for obj in object.books.all %} - <li><a href="{% url 'books:detail' slug=obj.slug %}"><img src="{{obj.get_small_image_url}}" /></a></li> - {% endfor %}</ul> - </aside>{% endif %} - </div>{%endif%} - </article> - - {% comment %} <div class="mailing-list--wrapper"> - <h5>If you enjoyed this, you should join the mailing list…</h5> - {% include 'mailing_list.html' %} - </div> {% endcomment %} - </main> {% if object.enable_comments %} {% get_comment_count for object as comment_count %} {%if comment_count > 0 %} -<p class="comments--header">{{comment_count}} Comment{{ comment_count|pluralize }}</p> +<div class="comment-wrapper"> +<p class="comments-header">{{comment_count}} Comment{{ comment_count|pluralize }}</p> {% render_comment_list for object %} {%endif%} -<div class="comment--form--wrapper {%if comment_count > 0%}comment-form-border{%endif%}"> +<div class="comment-form-wrapper {%if comment_count > 0%}comment-form-border{%endif%}"> {% render_comment_form for object %} </div> {% else %} <p class="comments--header" style="text-align: center">Sorry, comments have been disabled for this post.</p> {%endif%} +</div> +</main> {% endblock %} {% block js %} -<script type="text/javascript"> -document.addEventListener("DOMContentLoaded", function(event) { - var leaflet = document.createElement('script'); - leaflet.src = "/media/js/leaflet-master/leaflet-mod.js"; - document.body.appendChild(leaflet); - var lightbox = document.createElement('script'); - lightbox.src = "/media/js/lightbox.js"; - document.body.appendChild(lightbox); - leaflet.onload = function(){ - var detail = document.createElement('script'); - detail.src = "/media/js/detail.min.js"; - document.body.appendChild(detail); - {% with object.get_template_name_display as t %}{%if t == "single" or t == "single-dark" %} - detail.onload = function(){ - createMap(); - var open = false; - } - {%endif%}{%endwith%} - } - - lightbox.onload = function() { - var opts= { - //nextOnClick: false, - captions: true, - onload: function(){ - var im = document.getElementById("jslghtbx-contentwrapper"); - var link = im.appendChild(document.createElement('a')) - link.href = im.firstChild.src; - link.innerHTML= "open "; - link.target = "_blank"; - link.setAttribute('class', 'p-link'); - im.appendChild(link); - } - }; - var lightbox = new Lightbox(); - lightbox.load(opts); - } - {% if object.enable_comments %} -{% get_comment_count for object as comment_count %} -{%if comment_count > 0 %} - //delay loading of gravatar images using noscript data-hash attribute - dataattr = document.getElementsByClassName("datahashloader"); - for(var i=0; i<dataattr.length; i++) { - var c = dataattr[i].parentNode; - var img = document.createElement("img"); - img.src = 'https://images.luxagraf.net/gravcache/' + dataattr[i].getAttribute('data-hash') + '.jpg'; - img.className += "gravatar"; - c.insertBefore(img, c.childNodes[3]); - } -{%endif%} -{%endif%} -{% 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> +<script src="/media/js/leaflet-master/leaflet-mod.js"></script> +<script src="/media/js/detail.min.js"></script> +{{ block.super }} {%endblock%} |