Adding representative_image

.pre-commit-config.yaml

@@ -12,7 +12,7 @@
         exclude: npp/.*\.xml
     -   id: remove-tabs
 -   repo: https://github.com/Lucas-C/pre-commit-hooks-html
-    sha: v1.2.1
+    sha: v1.3.1
     hooks:
     -   id: validate-html
         args:

README.md

@@ -2,8 +2,7 @@ mg
 ==============
 
 A minimal theme for [Pelican](http://blog.getpelican.com/) that uses uikit.
-The theme is suited for a single author blog without tag pages nor
-blogroll. Feeds are provided via ATOM.
+The theme is suited for a single author blog. Feeds are provided via ATOM.
 
 
 Screenshots
@@ -28,7 +27,7 @@ This is the article layout on a smartphone screen
 
 Live Example
 --------------
-Check out [my blog](http://www.devsbytes.com).
+Check out [my blog](https://chezsoi.org/lucas).
 
 Features
 --------------
@@ -38,11 +37,19 @@ Features
 * [Schema.org](http://schema.org) support.
 * Search with [Tipue Search](http://www.tipue.com/search).
 * Responsive design.
-* Comment with DISQUS.
+* Comment with DISQUS or inno
 * SCSS style sheets.
 * Analytics with Google Analytics, PIWIK and StatCounter.
 * Share buttons built with share urls.
 * Custom footer notice.
+* W3C-Validatated HTML
+
+Install
+-------
+This template uses the [representative_image](https://github.com/getpelican/pelican-plugins/tree/master/representative_image) plugin, so you will need to:
+
+    pip install beautifulsoup4
+
 
 Settings
 --------------
@@ -117,6 +124,9 @@ e.g.
               ('envelope', 'mailto:luca92web@gmail.com'),)
 ```
 
+**MG_DISABLE_SUMMARY**
+If you do not manually provide a summary on your articles, set this to `True` so that that the articles summary is not included on the index / search result pages.
+
 Example Configuration
 ----------------------
 

static/css/main.css

@@ -105,12 +105,34 @@ a {
   margin-bottom: 3em;
   min-height: 100%; }
 
+.mg-article-short {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap; }
+  article:nth-child(even) > .mg-article-short {
+    flex-direction: row-reverse; }
+.mg-article-image {
+  flex: 1 1 15rem;
+  min-height: 0; /* required for flexbox shrink to work properly - Chrome 60 */
+  min-width: 0; /* required for flexbox shrink to work properly - Chrome 60 */
+  max-height: 50%;
+  max-width: 50%;
+  padding: 1rem;
+  margin: 0 auto;
+  width: 100%;
+  height: 100%;
+  object-fit: contain; }
+.mg-article-content {
+  flex: 3 1 35rem; }
+
 .mg-feed {
   color: #FF6600; }
   .mg-feed:hover {
     text-decoration: none;
     color: #FF6600; }
 
+.mg-tags {
+  text-align: right; }
 .mg-tag {
   margin: 0 .5rem;
   font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;

templates/base.html

@@ -230,9 +230,9 @@
             {% if SUPPORTS %}
             <li class="uk-nav-divider"></li>
             {% for name, link, logo_url, title in SUPPORTS %}
-            <a href="{{ link }}">
+            <li><a href="{{ link }}">
                 <img class="mg-support-logo" src="{{ logo_url }}" alt="Logo {{ name }}" title="{{ title }}">
-            </a>
+            </a></li>
             {% endfor %}
             {% endif %}
         </ul>

templates/partials/article-short.html

@@ -1,11 +1,18 @@
-<article class="uk-article" itemtype="http://schema.org/BlogPosting" itemscope="itemscope" itemprop="blogPost">
-<a href="{{ SITEURL }}/{{ article.url }}" class="uk-link-muted"><h1 class="uk-article-title" itemprop="name">{{ article.title|e }}</h1></a>
-    <p class="uk-article-meta"><time datetime="{{ article.date.strftime('%Y-%m-%d') }}" itemprop="datePublished">{{ article.locale_date }}</time> • <a href="{{ SITEURL }}/{{ article.category.url }}">{{ article.category }}</a>{% if DISQUS_SITENAME %} • <br class="uk-visible-small"><i class="uk-icon-comment"></i> <a href="{{ SITEURL }}/{{ article.url }}#disqus_thread" itemprop="discussionUrl"></a>{% endif %}</p>
-    <!--{{ article.summary }}-->
-    <p class="uk-article-lead" itemprop="description">{{ article.summary|striptags|striptags }}</p>
-    {% if not MG_DISABLE_SUMMARY %}<p>{{ ' '.join(article.content.split(' ')[:SUMMARY_MAX_LENGTH])|striptags|striptags }}...</p>{% endif %}
-    <a href="{{ SITEURL }}/{{ article.url }}">Read More</a>
-    {% include "partials/inline-tags.html" %}
+<article itemtype="http://schema.org/BlogPosting" itemscope="itemscope" itemprop="blogPost">
+    <div class="mg-article-short">
+        {% if article.featured_image %}
+        <img class="mg-article-image" src="{{ article.featured_image }}" alt="">
+        {% endif %}
+        <div class="mg-article-content">
+            <a href="{{ SITEURL }}/{{ article.url }}" class="uk-link-muted"><h1 class="uk-article-title" itemprop="name">{{ article.title|e }}</h1></a>
+            <p class="uk-article-meta"><time datetime="{{ article.date.strftime('%Y-%m-%d') }}" itemprop="datePublished">{{ article.locale_date }}</time> • <a href="{{ SITEURL }}/{{ article.category.url }}">{{ article.category }}</a>{% if DISQUS_SITENAME %} • <br class="uk-visible-small"><i class="uk-icon-comment"></i> <a href="{{ SITEURL }}/{{ article.url }}#disqus_thread" itemprop="discussionUrl"></a>{% endif %}</p>
+            <!--{{ article.summary }}-->
+            <p class="uk-article-lead" itemprop="description">{{ article.summary|striptags|striptags }}</p>
+            {% if not MG_DISABLE_SUMMARY %}<p>{{ ' '.join(article.content.split(' ')[:75])|striptags|striptags }}...</p>{% endif %}
+            <a href="{{ SITEURL }}/{{ article.url }}">Read More</a>
+            {% include "partials/inline-tags.html" %}
+        </div>
+    </div>
     <hr class="uk-article-divider">
 </article>
 

templates/partials/inline-tags.html

@@ -1,3 +1,3 @@
 {% set bullet = joiner(" • ") %}
-<div align="right" title="Tags">{% for tag in article.tags %}{{bullet()}}<a class="mg-tag" href="{{tag.url}}"><i class="uk-icon-tag"></i>&nbsp;{{tag.name}}</a>{% endfor %}</div>
+<div class="mg-tags" title="Tags">{% for tag in article.tags %}{{bullet()}}<a class="mg-tag" href="{{tag.url}}"><i class="uk-icon-tag"></i>&nbsp;{{tag.name}}</a>{% endfor %}</div>