Switched to thumbnail images in post list view

mhackspace/base/migrations/0006_added_excerpt.py

@@ -0,0 +1,23 @@
+# -*- coding: utf-8 -*-
+# Generated by Django 1.10.6 on 2017-03-29 18:04
+from __future__ import unicode_literals
+
+from django.db import migrations
+import stdimage.models
+import stdimage.utils
+import stdimage.validators
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('base', '0005_auto_20170228_2210'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='bannerimage',
+            name='image',
+            field=stdimage.models.StdImageField(upload_to=stdimage.utils.UploadToAutoSlugClassNameDir('title'), validators=[stdimage.validators.MinSizeValidator(2400, 600)]),
+        ),
+    ]

mhackspace/blog/migrations/0005_added_excerpt.py

@@ -0,0 +1,32 @@
+# -*- coding: utf-8 -*-
+# Generated by Django 1.10.6 on 2017-03-29 18:04
+from __future__ import unicode_literals
+
+from django.db import migrations, models
+import stdimage.models
+import stdimage.utils
+import stdimage.validators
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('blog', '0004_auto_20170228_2210'),
+    ]
+
+    operations = [
+        migrations.AlterModelOptions(
+            name='post',
+            options={'ordering': ('-published_date',)},
+        ),
+        migrations.AddField(
+            model_name='post',
+            name='excerpt',
+            field=models.TextField(blank=True, null=True),
+        ),
+        migrations.AlterField(
+            model_name='post',
+            name='image',
+            field=stdimage.models.StdImageField(blank=True, null=True, upload_to=stdimage.utils.UploadToAutoSlugClassNameDir('title'), validators=[stdimage.validators.MinSizeValidator(730, 410)]),
+        ),
+    ]

mhackspace/blog/models.py

@@ -1,12 +1,14 @@
 from django.db import models
 from django.utils import timezone
 from django.urls import reverse
-from draceditor.models import DraceditorField
 
-from mhackspace.users.models import User
+from draceditor.models import DraceditorField
+from stdimage.validators import MinSizeValidator
 from stdimage.models import StdImageField
 from stdimage.utils import UploadToAutoSlugClassNameDir
 
+from mhackspace.users.models import User
+
 
 class Category(models.Model):
     name = models.CharField(max_length=100)
@@ -33,9 +35,24 @@ class Post(models.Model):
             'home': {
                 "width": 530,
                 "height": 220,
-                "crop": True}})
+                "crop": True},
+            'mobilethumb': {
+                "width": 580,
+                "height": 150,
+                "crop": True},
+            'thumbnail': {
+                "width": 250,
+                "height": 150,
+                "crop": True},
+            'full': {
+                "width": 730,
+                "height": 410,
+                "crop": True}},
+        validators=[
+            MinSizeValidator(730, 410)])
 
     description = DraceditorField()
+    excerpt = models.TextField(blank=True, null=True)
     published_date = models.DateTimeField(default=timezone.now)
     updated_date = models.DateTimeField(default=timezone.now)
     active = models.BooleanField(default=True)

mhackspace/templates/base.html

@@ -8,7 +8,7 @@
   <meta http-equiv="x-ua-compatible" content="ie=edge">
   <title>{% block title %}Maidstone Hackspace{% endblock title %}</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta name="description" content="Maidstone Hackspace is a shared space where artists, designers, makers, hackers, programmers, tinkerers, professionals and hobbyists can work on their projects, share knowledge and collaborate">
+  <meta name="description" content="Maidstone Hackspace is a space where makers, hackers, programmers, tinkerers, professionals and hobbyists can share knowledge and collaborate">
   <meta name="author" content="">
 
   <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->

mhackspace/templates/blog/post_date.html

@@ -1,7 +1,7 @@
 <div class="text-muted">
   Published:
   <span itemprop="datePublished" content="{{ post.published_date|date:"c" }}">
-    ({{ post.published_date }})
+    {{ post.published_date }}
   </span>
   {% if post.updated_date != post.published_date %}
     Updated:

mhackspace/templates/blog/post_detail.html

@@ -8,14 +8,12 @@
       <article itemscope itemtype="http://schema.org/Article">
         <a href="{{ post.get_absolute_url }}"><h1 itemprop="name">{{ post.title }}</h1></a>
         {% include "blog/post_date.html" %}
-        {% if post.image %}
+        <div itemprop="image" itemscope itemtype="https://schema.org/ImageObject">
-          <div itemprop="image" itemscope itemtype="https://schema.org/ImageObject">
+          <img src="{{ post.image.url }}" class="img-fluid"/>
-            <img src="{{ post.image.url }}" class="img-fluid"/>
+          <meta itemprop="url" content="{{ post.image.url }}">
-            <meta itemprop="url" content="{{ post.image.url }}">
+          <meta itemprop="width" content="{{ post.image.width }}">
-            <meta itemprop="width" content="{{ post.image.width }}">
+          <meta itemprop="height" content="{{ post.image.height }}">
-            <meta itemprop="height" content="{{ post.image.height }}">
+        </div>
-          </div>
-        {% endif %}
         <span itemprop="articleBody">{{ post.description|safe_markdown }}</span>
       </article>
     </div>

mhackspace/templates/blog/post_list.html

@@ -3,21 +3,34 @@
 {% block title %}Blog Posts{% endblock %}
 
 {% block content %}
+  <style>
+  .thumbnail {
+    margin-bottom: 15px;
+  }
+  .title {
+    margin-bottom: 0;
+  }
+  </style>
   <div class="row">
-    <div class="col-sm-8">
+    <div class="col-md-9">
       {% for post in posts %}
-        <article itemscope itemtype="http://schema.org/Article">
+        <article class="row post" itemscope itemtype="http://schema.org/Article">
-          <a href="{{ post.get_absolute_url }}"><h3 itemprop="name">{{ post.title }}</h3></a>
+          <div class="col-md-4 thumbnail" itemprop="image" itemscope itemtype="https://schema.org/ImageObject">
-          {% include "blog/post_date.html" %}
+            <picture>
-          {% if post.image %}
+              <source class="img-fluid" srcset="{{ post.image.mobilethumb.url }}" media="(max-width: 780px)" />
-            <div itemprop="image" itemscope itemtype="https://schema.org/ImageObject">
+              <source class="img-fluid" srcset="{{ post.image.thumbnail.url }}" />
-              <img src="{{ post.image.url }}" class="img-fluid"/>
+              <img class="img-fluid" src="{{ post.image.thumbnail.url }}" alt="{{ banner.title }}">
-              <meta itemprop="url" content="{{ post.image.url }}">
+            </picture>
-              <meta itemprop="width" content="{{ post.image.width }}">
+          </div>
-              <meta itemprop="height" content="{{ post.image.height }}">
+          <div class="col-md-8">
-            </div>
+            <a href="{{ post.get_absolute_url }}"><h3 itemprop="name" class="title">{{ post.title }}</h3></a>
-          {% endif %}
+            {% include "blog/post_date.html" %}
-          <span itemprop="articleBody">{{ post.description|safe_markdown|striptags|truncatewords:30 }}</span>
+            {% if post.excerpt %}
+              <span itemprop="articleBody">{{ post.excerpt|striptags|truncatewords:45 }}</span>
+            {% else %}
+              <span itemprop="articleBody">{{ post.description|safe_markdown|striptags|truncatewords:45 }}</span>
+            {% endif %}
+          </div>
         </article>
       {% endfor %}
 

mhackspace/templates/blog/sidebar.html

@@ -1,4 +1,4 @@
-<div class="col-sm-3 offset-sm-1">
+<div class="col-md-3">
   <h2>Categories</h2>
   <ul class="list-group">
   <a href="{% url "blog" %}" class="list-group-item list-group-item-action">All Articles</a>