Skip to content

Instantly share code, notes, and snippets.

@DarrylDias

DarrylDias/postachio-gridly-theme.html

Forked from bmann/postachio-gridly-theme.html
Created May 9, 2016 18:55
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save DarrylDias/b638ab06a09772d3b358ddcb45bbe7df to your computer and use it in GitHub Desktop.
Save DarrylDias/b638ab06a09772d3b358ddcb45bbe7df to your computer and use it in GitHub Desktop.
Download ZIP
Custom Postachio theme based on the Gridly base theme. Modified to focus on highlighting link posts over "original" posts. Home page links go directly to original article.
Raw
postachio-gridly-theme.html
<!DOCTYPE html>
<html lang="en-US" prefix="og: http://ogp.me/ns#">
<head>
<meta charset="utf-8">
<title>{% if is_home %}{{ site.author }} {% elif is_post %} {{ post.title }} {% elif is_link %} {{ link.title }} {% elif is_tag %} {{ tag }} {% elif is_page %} {{ page.title }} {% endif %} | {{ site.name }}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="description" content="{{ site.bio|striptags }} - {{ site.author }}" />
<meta name="copyright" content="Copyright (c) 2013 {{ site.author }}" />
<meta property="og:site_name" content="{{ site.name }}" />
{% if is_post %}
<meta property="article:published_time" content="{{ post.created_at }}" />
{% if post.tags %}
{% for tag in post.tags %}
<meta property="article:tag" content="{{ tag|format_tag(link=False, humanize=True) }}" />
{% endfor %}
{% endif %}
{% if post.photos %}
{% for photo in post.photos %}
{% if loop.index == 1 and photo %}
<meta property="og:image" content="{{ photo.width_600 }}" />
{% else %}
<meta property="og:image" content="{{ site.avatar }}" />
{% endif %}
{% endfor %}
{% endif %}
<meta property="og:type" content="article" />
<meta property="og:title" content="{{ post.title }}" />
<meta property="og:url" content="{{ site.base_url }}{{ post.permalink }}" />
<meta property="og:description" content="{{ post.content|striptags|truncate(255)|e }}" />
{% elif is_page %}
<meta property="og:image" content="{{ site.avatar }}" />
<meta property="og:type" content="article" />
<meta property="og:title" content="{{ page.title }}" />
<meta property="og:url" content="{{ site.base_url }}{{ page.permalink }}" />
<meta property="og:description" content="{{ page.content|striptags|truncate(255)|e }}" />
{% else %}
<meta property="og:image" content="{{ site.avatar }}" />
<meta property="og:type" content="website" />
<meta property="og:title" content="{{ site.name }}" />
<meta property="og:url" content="{{ site.base_url }}" />
<meta property="og:description" content="{{ site.bio|striptags }}" />
{% endif %}
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@{{ site.twitter }}">
{% if is_post %}
<meta name="twitter:title" content="{{ post.title }}">
<meta name="twitter:description" content="{{ post.content|striptags|truncate(255)|e }}...">
{% elif is_page %}
<meta name="twitter:title" content="{{ page.title }}">
<meta name="twitter:description" content=" {{ page.content|striptags|truncate(255)|e }}...">
{% else %}
<meta name="twitter:title" content="{{ site.name }}">
<meta name="twitter:description" content="{{ site.bio|striptags|truncate(255)|e }}...">
{% endif %}
<meta name="twitter:creator" content="@{{ site.twitter }}">
<meta name="twitter:image:src" content="{{ site.avatar }}">
<meta name="twitter:domain" content="{{ site.base_url }}">
<link rel="alternate" type="application/rss+xml" title="RSS" href="{{ site.atom_url }}" />
<link href="{{ static('themes/gridly/css/gridly.css') }}" rel="stylesheet" />
<link href="{{ static('mediaelement/mediaelementplayer.css') }}" rel="stylesheet" />
{% if site.analytics %}
<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', '{{ site.analytics }}']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
{% endif %}
</head>
<body>
<div class="wrap">
<header class="header">
<div class="avatar">
<a href="/"><img src="{{ site.avatar }}" class="img-circle" alt="{{ site.author }}" /></a>
</div>
<div class="nav-logo">
<div class="logo">
<h1><a href="/" rel="home">{{ site.name }}</a></h1>
</div>
<nav id="nav">
<ul>
<li><a href="/">Home</a></li>
{% if pages %}
{% for page in pages %}
<li><a href="{{ page.permalink }}">{{ page.title }}</a></li>
{% endfor %}
{% endif %}
</ul>
</nav>
</div>
<div class="social-icons">
<ul>
{% if site.twitter %}
<li>
<a href="{{ site.twitter }}" title="Twitter" target="_blank">
<i class="icon-twitter"></i>
<span class="hide-text">Twitter</span>
</a>
</li>
{% endif %}
{% if site.facebook %}
<li>
<a href="{{ site.facebook }}" title="Facebook" target="_blank">
<i class="icon-facebook"></i>
<span class="hide-text">Facebook</span>
</a>
</li>
{% endif %}
{% if site.googleplus %}
<li>
<a href="{{ site.googleplus }}?rel=author" title="Google+" target="_blank">
<i class="icon-google-plus"></i>
<span class="hide-text">Google Plus</span>
</a>
</li>
{% endif %}
{% if site.linkedin %}
<li>
<a href="{{ site.linkedin }}" title="LinkedIn" target="_blank">
<i class="icon-linkedin"></i>
<span class="hide-text">LinkedIn</span>
</a>
</li>
{% endif %}
<li>
<a href="{{ site.atom_url }}" title="RSS" target="_blank">
<i class="icon-rss"></i>
<span class="hide-text">RSS</span>
</a>
</li>
</ul>
</div>
</header>
{% if is_home or is_tag %}
<div class="post-area">
{% if is_tag %}
<h2 class="tag-head">Showing all posts tagged {{ tag }}:</h2>
{% endif %}
{% if posts %}
<section itemscope itemtype="http://schema.org/Blog" class="posts">
{% for post in posts %}
<article itemprop="blogPosts" itemscope itemtype="http://schema.org/BlogPosting" class="blog-post">
{% if post.photos %}
{% for photo in post.photos %}
{% if loop.index == 1 %}
<div class="post-image">
{% if post.url %}
<a href="{{ post.url }}">
{% else %}
<a href="{{ post.permalink }}">
{% endif %}
{% if photo %}
<img src="{{ photo.width_600 }}" alt="Picture {{ loop.index }}" />
{% else %}
<img src="http://placehold.it/400x300/0eafff/ffffff.png" alt="" />
{% endif %}
</a>
{% if post.tags %}
<div class="post-tags">
<p>{{- post.tags|format_tags(humanize=True) -}}</p>
</div>
{% endif %}
</div>
{% endif %}
{% endfor %}
{% endif %}
<div class="post-content">
<h2>{% if post.url %}
<a href="{{ post.url }}">{% else %}<a href="{{ post.permalink }}">{% endif %}{{ post.title }}</a></h2>
<p class="post-date"><time datetime="{{ post.created_at }}">{{ post.created_at|date_format }}</time> {% if post.url %}<a href="{{ post.permalink }}" title="Permalink - {{ post.title }}">#</a>{% endif %}</p>
{% if post.tags and not post.photos %}
<p class="post-tags">{{- post.tags|format_tags(humanize=True) -}}</p>
{% endif %}
{% if post.content|striptags|wordcount > 0 %}
<p>{{ post.content|striptags|truncate(200) }}</p>
{% endif %}
<p class="post-link">{% if post.url %} <a href="{{ post.url }}">Visit original &rarr;</a>{% else %}<a href="{{ post.permalink }}">Read more &rarr;</a>{% endif %}</p>
</div>
</article>
{% endfor %}
</section>
{% if not is_tag %}
<div class="pagination">
{% if pagination.prev %}<a href="{{ pagination.prev }}" class="post-prev">&larr; View Previous Posts</a>{% endif %}
{% if pagination.next %}<a href="{{ pagination.next }}" class="post-next">View More Posts &rarr;</a>{% endif %}
</div>
{% endif %}
{% else %}
<h2 class="title"><em>No posts yet :(</em></h2>
{% endif %}
{% elif is_post %}
<article itemscope itemtype="http://schema.org/BlogPosting" class="post">
<section class="content">
<div class="post-content">
<header>
<h1>{{ post.title }}</h1>
</header>
<p class="post-date">Published by {{ site.author }}, <time datetime="{{ post.created_at }}">{{ post.created_at|date_format }}</time></p>
{{ post.content}}
{% if post.tags %}
<p><strong>Tags:</strong> {{ post.tags|format_tags(humanize=True) }}</p>
{% endif %}
</div>
</section>
{% if site.disqus %}
<hr class="large" />
<section class="comments">
<div id="disqus_thread"></div>
<script type="text/javascript">
var disqus_shortname = '{{ site.disqus }}';
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>
Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a>
</noscript>
<a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
</section>
{% endif %}
</article>
<!--
<div class="post-nav">
<div class="post-prev"></div>
<div class="post-next"></div>
</div>
-->
{% elif is_link %}
<article itemscope itemtype="http://schema.org/BlogPosting" class="post">
<section class="content">
<div class="post-content">
<header>
<h1 class="icon-share"><a href="{{ link.url }}">{{ link.title }}</a></h1>
</header>
<!-- like the front, pull in attached images -->
{% if post.photos %}
{% for photo in post.photos %}
{% if loop.index == 1 %}
<div class="post-image">
<a href="{{ link.url }}">
{% if photo %}
<img src="{{ photo.width_600 }}" alt="Picture {{ loop.index }}" />
{% else %}
<img src="http://placehold.it/400x300/0eafff/ffffff.png" alt="" />
{% endif %}
</a>
</div>
{% endif %}
{% endfor %}
{% endif %}
<!-- /end photos -->
<!-- fix for CB and others, truncate content to 400 -->
<p>{{ link.content|striptags|truncate(400) }}</p>
<!-- /end content truncate -->
<p><i class="icon-share"></i> <a href="{{ link.url }}">{{ link.url }}</a></p>
{% if link.tags %}
<p><strong>Tags</strong>: {{ link.tags|format_tags(humanize=True) }}</p>
{% endif %}
<p class="post-date">Curated by {{ site.author }}, <time datetime="{{ link.created_at }}">{{ link.created_at|date_format }}</time></p>
</div>
</section>
{% if site.disqus %}
<hr class="large" />
<section class="comments">
<div id="disqus_thread"></div>
<script type="text/javascript">
var disqus_shortname = '{{ site.disqus }}';
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>
Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a>
</noscript>
<a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
</section>
{% endif %}
</article>
<!--
<div class="post-nav">
<div class="post-prev"></div>
<div class="post-next"></div>
</div>
-->
{% elif is_page %}
<div class="page">
<div class="post-content">
<h1>{{ page.title }}</h1>
{{ page.content }}
</div>
</div>
{% endif %}
<footer class="footer">
<div class="copyright">
<p class="pull-left">All rights Reserved &copy; <a href="/">{{ site.name }}</a>.</p>
<p class="pull-right">Powered by <a href="http://postach.io" target="_blank">Postach.io</a> | Design based on <a href="http://www.eleventhemes.com/gridly-theme/">Gridly</a></p>
</div>
</footer>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="{{ url_for("static", filename="js/jquery.min.js") }}"><\/script>')</script>
<script src="{{ static('themes/gridly/js/main.min.js') }}"></script>
<script src="{{ static('js/plugins/postachio-pdf.min.js') }}"></script>
<script src="{{ static('mediaelement/mediaelement-and-player.min.js') }}"></script>
<script>
$('audio').mediaelementplayer();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment