Blog templates

publichealth/home/templates/puput/base.html

@@ -0,0 +1,115 @@
+{% extends "base.html" %}
+{% load static i18n wagtailcore_tags wagtailimages_tags wagtailroutablepage_tags wagtailuserbar puput_tags %}
+
+{% block body_class %}blog{% endblock %}
+
+{% block extra_css %}
+	<meta name="title"
+		  content="{% block meta_title %}
+						{% if blog_page.seo_title %}
+							{{ blog_page.seo_title }}
+						{% else %}
+							{{ blog_page.title }}
+						{% endif %}
+				   {% endblock meta_title %}"/>
+	<meta name="description"
+		  content="{% block meta_description %}
+						{{ blog_page.search_description }}
+				   {% endblock meta_description %}"/>
+	{% block social_share %}{% endblock social_share %}
+	<link rel="canonical" href="{% block canonical %}{% canonical_url %}{% endblock canonical %}"/>
+	<style>
+		body {
+			--main-color: {{blog_page.main_color}};
+		}
+		.content-page.blog-header {
+			background-color: {{blog_page.main_color}};
+		}
+		.content-page.blog-header h1 a { color: white; }
+		.blog-page section { background-color: transparent !important; }
+		.container .page-content, .blog_grid { background: white; }
+	</style>
+	<link rel="stylesheet" href="{% static 'puput/css/puput.css' %}"/>
+	<script src="{% static 'puput/js/puput.js' %}"></script>
+{% endblock %}
+
+{% block content %}
+<div class="content-page blog-header">
+	{% if blog_page.header_image %}
+		<span class="image featured">
+			{% image blog_page.header_image fill-1500x120 as header_image %}
+			<img alt="{{ blog_page.header_image.title }}" src="{{ header_image.url }}">
+		</span>
+	{% endif %}
+	<div class="container">
+		<section class="{% if blog_page.header_image %}title-section-image{% else %}title-section{% endif %}">
+			<h1 class="title-header">
+				<a href="{% pageurl blog_page %}">{{ blog_page.title }}</a>
+			</h1>
+			{% if not blog_page.header_image %}
+				<h2>{{ blog_page.description }}</h2>
+			{% endif %}
+		</section>
+	</div>
+</div>
+
+<section class="content-page blog-page">
+<div class="container container-blog">
+    <div class="row">
+        <div class="col-sm-8 col-md-9">
+            {% block blog_content %}{% endblock blog_content %}
+            {% block extra_content %}{% endblock extra_content %}
+        </div>
+
+        <div class="col-sm-4 col-md-3">
+            <div class="blog_sidebar">
+                <div class="rss-sitemap">
+                    <a href="{% feeds_url blog_page %}" target="_blank" title="RSS">
+                         <i class="fa fa-rss-square"></i> <span>{% trans 'Feed RSS' %}</span>
+                    </a>
+                </div>
+                <form name="search_form" class="search_form" method="get" action="{% routablepageurl blog_page 'entries_search' %}">
+                    <div class="input-group">
+                         <input type="search" name="q" placeholder="{% trans 'Search' %}">
+                         <span class="input-group-btn">
+                            <button class="btn btn-default" type="submit"><i class="fa fa-search"></i></button>
+                         </span>
+                    </div>
+                </form>
+
+                {% if blog_page.display_last_entries %}
+                    <ul class="sidebar">
+                        <h4>{% trans 'Last Entries' %}</h4>
+                        {% recent_entries blog_page.num_last_entries %}
+                    </ul>
+                {% endif %}
+                {% if blog_page.display_popular_entries %}
+                    <ul class="sidebar">
+                        <h4>{% trans 'Popular Entries' %}</h4>
+                        {% popular_entries blog_page.num_popular_entries %}
+                    </ul>
+                {% endif %}
+                {% if blog_page.display_categories %}
+                    <ul class="sidebar">
+                        <h4>{% trans 'Categories' %}</h4>
+                        {% categories_list %}
+                    </ul>
+                {% endif %}
+                {% if blog_page.display_tags %}
+                    <ul class="sidebar">
+                        <h4>{% trans 'Tags' %}</h4>
+                        {% tags_list %}
+                    </ul>
+                {% endif %}
+                {% if blog_page.display_archive %}
+                    <ul class="sidebar widget menu">
+                        <h4>{% trans 'Archive' %}</h4>
+                        {% archives_list %}
+                    </ul>
+                {% endif %}
+            </div>
+        </div>
+    </div>
+</div>
+</section>
+{% endblock %}

publichealth/home/templates/puput/blog_page.html

@@ -1,30 +1,48 @@
-{% extends "base.html" %}
+{% extends "puput/base.html" %}
-{% load static i18n wagtailcore_tags wagtailimages_tags puput_tags %}
 
-{% block body_class %}template-{{ self.get_verbose_name|slugify }}{% endblock %}
+{% load static i18n wagtailcore_tags wagtailimages_tags puput_tags social_share %}
+
+{% block title %}
+    {% if search_term %}
+        {{ search_term }} | {{ blog_page.title }}
+    {% else %}
+        {{ block.super }}
+    {% endif %}
+{% endblock title %}
+
+{% block meta_title %}
+    {% if search_term %}
+        {% trans 'Entries for' %} {{ search_type }} {{ search_term }}
+    {% else %}
+        {{ block.super }}
+    {% endif %}
+{% endblock meta_title %}
+
+{% block meta_description %}
+    {% if search_term %}
+        {% trans 'Entries for' %} {{ search_type }} {{ search_term }}
+    {% else %}
+        {{ block.super }}
+    {% endif %}
+{% endblock meta_description %}
 
-{% block title %}{% if search_term %}{{ search_term }} | {{ blog_page.title }}{% else %}{{ block.super }}{% endif %}{% endblock title %}
-{% block meta_title %}{% if search_term %}{% trans 'Entries for' %} {{ search_type }} {{ search_term }}{% else %}{{ block.super }}{% endif %}{% endblock meta_title %}
-{% block meta_description %}{% if search_term %}{% trans 'Entries for' %} {{ search_type }} {{ search_term }}{% else %}{{ block.super }}{% endif %}{% endblock meta_description %}
 {% block social_share %}
     {% image blog_page.header_image fill-800x450 as share_image %}
     <meta property="og:title" content="{{ blog_page.title }}" />
     <meta property="og:description" content="{{ blog_page.description }}" />
     <meta property="og:url" content="{% canonical_url %}" />
     {% if blog_page.header_image %}
-    <meta property="og:image" content="{% image_url share_image.url %}" />
+        <meta property="og:image" content="{% image_url share_image.url %}" />
-    <meta property="og:image:width" content="800" />
+        <meta property="og:image:width" content="800" />
-    <meta property="og:image:height" content="450" />
+        <meta property="og:image:height" content="450" />
-    <meta name="twitter:image" content="{% image_url share_image.url %}" />
+        <meta name="twitter:image" content="{% image_url share_image.url %}" />
     {% endif %}
     <meta name="twitter:card" content="summary_large_image" />
     <meta name="twitter:title" content="{{ blog_page.title }}" />
     <meta name="twitter:description" content="{{ blog_page.description }}" />
-    <link rel="alternate" type="application/rss+xml" title="{{ blog_page.title }}" href="{% feeds_url blog_page %}" />
 {% endblock social_share %}
 
-{% block content %}
+{% block blog_content %}
-<section id="news-page">
     {% with per_page=blog_page.num_entries_page %}
         {# 'paginate' tag cannot render dotted variables, so we need to create a context var #}
         {% paginate per_page entries %}
@@ -32,33 +50,51 @@
             <div class="searchTerm">{% trans 'Entries for' %} {{ search_type }} "{{ search_term }}"</div>
         {% endif %}
         {% for entry in entries %}
-            <article class="container page-content">
+            {% entry_url entry blog_page as post_url %}
+            <article class="box page-content blog_grid">
                 {% include 'puput/entry_page_header.html' %}
-                {% if entry.header_image %}
+                <section>
-                    <span class="img-responsive">
+                    {% if entry.header_image %}
-                        {% image entry.header_image fill-800x240 as header_image %}
+                        <span class="img-responsive">
-                        <img alt="{{ entry.header_image.title }}" src="{{ header_image.url }}">
+                            {% image entry.header_image fill-800x240 as header_image %}
-                    </span>
+                            <img alt="{{ entry.header_image.title }}" src="{{ header_image.url }}">
-                {% endif %}
+                        </span>
-                <div class="article">
+                    {% endif %}
+                    {% include 'puput/entry_links.html' %}
+                </section>
+                <section class="article">
                     {% if entry.excerpt %}
                         {{ entry.excerpt|richtext }}
                     {% else %}
                         {{ entry.body|richtext|truncatewords_html:70 }}
                     {% endif %}
-                    <a class="blog_btn continue" href="{% pageurl entry %}">{% trans 'Continue reading' %} &raquo;</a>
+                    <div class="row">
-                </div>
+                        <ul class="social-share col-md-9">
+                            <li class="social-item">
+                               {% post_to_facebook post_url '<span><i class="fa fa-facebook"></i></span>' %}
+                            </li>
+                            <li class="social-item">
+                                {% post_to_twitter entry.title post_url '<span><i class="fa fa-twitter"></i></span>' %}
+                            </li>
+                            <li class="social-item">
+                                {% post_to_linkendin post_url '<span><i class="fa fa-linkedin"></i></span>' %}
+                            </li>
+                            <li class="social-item">
+                                {% post_to_gplus post_url '<span><i class="fa fa-google-plus"></i></span>' %}
+                            </li>
+                        </ul>
+                        <div class="col-md-3">
+                            <a class="blog_btn continue" href="{{ post_url }}">{% trans 'Continue reading' %} &raquo;</a>
+                        </div>
+                    </div>
+                </section>
             </article>
         {% empty %}
             <span>{% trans 'No results found.' %}</span>
         {% endfor %}
+
         <div class="pagination">
             {% show_paginator %}
         </div>
     {% endwith %}
-</section>
+{% endblock blog_content %}
-
-<a href="{% feeds_url blog_page %}" target="_blank" title="RSS">
-     <i class="fa fa-rss-square"></i> <span>RSS Feed</span>
-</a>
-{% endblock content %}

publichealth/home/templates/puput/entry_page.html

@@ -1,50 +1,88 @@
-{% extends "base.html" %}
+{% extends "puput/base.html" %}
-{% load wagtailcore_tags wagtailimages_tags puput_tags %}
+{% load i18n wagtailcore_tags wagtailimages_tags puput_tags social_share %}
 
-{% block body_class %}template-{{ self.get_verbose_name|slugify }}{% endblock %}
+{% block title %}
+    {{ self.title }} | {{ blog_page.title }}
+{% endblock title %}
+
+{% block meta_title %}
+    {% if self.seo_title %}
+        {{ self.seo_title }}
+    {% else %}
+        {{ self.title }}
+    {% endif %}
+{% endblock meta_title %}
+
+{% block meta_description %}
+    {% if self.search_description %}
+        {{ self.search_description }}
+    {% else %}
+        {{ self.body|striptags|truncatewords:20 }}
+    {% endif %}
+{% endblock meta_description %}
+
+{% block canonical %}
+    {% canonical_url entry=self %}
+{% endblock canonical %}
 
-{% block title %}{{ self.title }} | {{ blog_page.title }}{% endblock title %}
-{% block meta_title %}{% if self.seo_title %}{{ self.seo_title }}{% else %}{{ self.title }}{% endif %}{% endblock meta_title %}
-{% block meta_description %}{% if self.search_description %}{{ self.search_description }}{% else %}{{ self.body|striptags|truncatewords:20 }}{% endif %}{% endblock meta_description %}
-{% block canonical %}{% canonical_url entry=self %}{% endblock canonical %}
 {% block social_share %}
     {% image self.header_image fill-800x450 as share_image %}
     <meta property="og:title" content="{{ self.title }}" />
     <meta property="og:description" content="{% if self.excerpt %}{{ self.excerpt|striptags }}{% else %}{{ self.body|striptags|truncatewords:20 }}{% endif %}" />
     <meta property="og:url" content="{% canonical_url entry=self %}" />
     {% if self.header_image %}
-    <meta property="og:image" content="{% image_url share_image.url %}" />
+        <meta property="og:image" content="{% image_url share_image.url %}" />
-    <meta property="og:image:width" content="800" />
+        <meta property="og:image:width" content="800" />
-    <meta property="og:image:height" content="450" />
+        <meta property="og:image:height" content="450" />
-    <meta name="twitter:image" content="{% image_url share_image.url %}" />
+        <meta name="twitter:image" content="{% image_url share_image.url %}" />
     {% endif %}
     <meta name="twitter:card" content="summary_large_image" />
     <meta name="twitter:title" content="{{ self.title }}" />
     <meta name="twitter:description" content="{% if self.excerpt %}{{ self.excerpt|striptags }}{% else %}{{ self.body|striptags|truncatewords:20 }}{% endif %}" />
 {% endblock social_share %}
 
-{% block content %}
+{% block blog_content %}
-<section class="content-page">
+    <article class="box page-content"
-  <article class="container"
+             {% if self.id %}data-entry-page-update-comments-url="{% url 'entry_page_update_comments' self.id %}{% endif %}">
-           {%if self.id %}data-entry-page-update-comments-url="{% url 'entry_page_update_comments' self.id %}{% endif %}">
+        {% include 'puput/entry_page_header.html' with entry=self %}
+        {% if self.header_image %}
+            <section>
+                <span class="image featured">
+                    {% image self.header_image fill-800x450 as header_image %}
+                    <img alt="{{ self.header_image.title }}" src="{{ header_image.url }}">
+                </span>
+                {% include 'puput/entry_links.html' with entry=self %}
+            </section>
+        {% endif %}
+        <section>
+            {{ self.body|richtext}}
+            <div class="row">
+                <div class="col-md-2">
+                    <a href="{% pageurl blog_page %}" class="blog_btn back">
+                        <i class="fa fa-angle-left"></i> {% trans 'Return' %}
+                    </a>
+                </div>
+                {% entry_url self blog_page as post_url %}
+                <ul class="social-share-all text-right col-md-10">
+                    <li class="social-item">
+                       {% post_to_facebook post_url '<span><i class="fa fa-facebook"></i></span>' %}
+                    </li>
+                    <li class="social-item">
+                        {% post_to_twitter self.title post_url '<span><i class="fa fa-twitter"></i></span>' %}
+                    </li>
+                    <li class="social-item">
+                        {% post_to_linkendin post_url '<span><i class="fa fa-linkedin"></i></span>' %}
+                    </li>
+                    <li class="social-item">
+                        {% post_to_gplus post_url '<span><i class="fa fa-google-plus"></i></span>' %}
+                    </li>
+                </ul>
+            </div>
 
-    {% if self.header_image %}
+        </section>
-    <div class="image">
+        {% show_comments %}
-      {% image self.header_image fill-940x300 as header_image %}
+    </article>
-      <img alt="{{ self.header_image.title }}" src="{{ header_image.url }}" class="img-responsive">
+{% endblock blog_content %}
-    </div>
-    {% endif %}
-
-    {% include 'puput/entry_page_header.html' with entry=self %}
-
-    <div class="article-body" role="main">
-      {{ self.body|richtext}}
-    </div>
-
-    {% show_comments %}
-  </article>
-</section>
-{% endblock content %}
 
 {% block extra_content %}
     {% if self.has_related %}

publichealth/home/templates/puput/entry_page_header.html

@@ -1,36 +1,6 @@
-{% load wagtailcore_tags wagtailroutablepage_tags puput_tags %}
+{% load puput_tags %}
 <header>
     <h2 class="post_title">
-        <a href="{% pageurl entry %}">{{ entry.title }}</a>
+        <a href="{% entry_url entry blog_page %}">{{ entry.title }}</a>
     </h2>
-    <ul class="links">
-        <li>
-            <i class="fa fa-user"></i>
-            <a href="{% routablepageurl blog_page "entries_by_author" entry.owner.username %}">
-                {{ entry.owner.username }}
-            </a>
-        </li>
-        <li>
-            <i class="fa fa-calendar"></i>
-            {{ entry.date|date:"DATE_FORMAT" }}
-        </li>
-        {% if entry.categories.count > 0 %}
-            <li>
-                <i class="fa fa-folder-open"></i>
-                {% categories_list entry.categories %}
-            </li>
-        {% endif %}
-        {% if entry.tags.count > 0 %}
-            <li>
-                <i class="fa fa-tag"></i>
-                {% tags_list blog_page.num_tags_entry_header entry.tags %}
-            </li>
-        {% endif %}
-        {% if blog_page.disqus_api_secret %}
-            <li>
-                <i class="fa fa-comments"></i>
-                {{ entry.num_comments }}
-            </li>
-        {% endif %}
-    </ul>
 </header>