Ephes Blog

Thought it would be nice to have multiple images in an entry. But then they should not all be shown in full size. So I misused the modal component of bootstrap for that. Still have to figure out how to make landscape images wider and portrait pictures smaller, but it's a start.

Here are three images from the pyddf meeting of last week:

Implementing pagination was also quite easy. Since I'm using class based views, I only had to add the attribute paginated_by = 5 to my view class and this snippet to my blogpost_list.html template:

<nav aria-label="pagination">
  <ul class="pagination">
    {% if page_obj.has_previous %}
      <li class="page-item"><a class="page-link" href="?page={{ page_obj.previous_page_number }}">previous</a><li>
    {% endif %}
    {% if page_obj.has_next %}
      <li class="page-item"><a class="page-link" href="?page={{ page_obj.next_page_number }}">next</a></li>
    {% endif %}
  </ul>
</nav>

Now I added very basic video support:

Added rss feeds for blogs. This was a lot easier than expected since django has a syndication framework already built in. This is the complete code I had to add:

from django.shortcuts import get_object_or_404

from django.core.urlresolvers import reverse
from django.contrib.syndication.views import Feed

class LatestEntriesFeed(Feed):
    def get_object(self, request, *args, **kwargs):
        self.object = get_object_or_404(Blog, slug=kwargs['slug'])

    def title(self):
        return self.object.title

    def description(self):
        return self.object.description

    def link(self):
        return reverse('blogs:blogpost-feed', kwargs={'slug': self.object.slug})

    def items(self):
        queryset = BlogPost.objects.filter(blog=self.object).order_by('-created')
        return queryset[:5]

    def item_title(self, item):
        return item.title

    def item_description(self, item):
        return item.description


    url(
        regex=r'^(?P<slug>[^/]+)/feed.xml$',
        view=views.LatestEntriesFeed(),
        name='blogpost-feed'
    ),


<a href="{% url "blogs:blogpost-feed" slug=blog.slug %}"><img src='/static/images/Feed-icon.svg'></img></a>

Images are a lot harder than I expected. Naively I assumed, I could just add an img-tag with the original image  and bootstrap would take care of the rest. But it turned out it wouldn't. And how would it be able to do this? We have a wide variety of viewport sizes nowadays and downloading the same image for all of them would be a huge waste of bandwith. After reading the chapter on responsive images of  Smashing Book 5 — Real-Life RWD I took a deep breath and tried to do it properly. It turns out there is almost no tooling for that, at least in the django world, so I rolled my own image resizing, transposing and compressing solution. I just use pillow with quality set to 65 atm, but l'm planning to replace it with mozjpeg as soon as I find out how to get it to work in the application server docker container.

Anyway, I have a rough first version of responsive images working and now I'm able to just upload an image from my phone and it gets rotated, shrinked and saved in the appropriate sizes automatically. And here's an example of a responsive image of a sweet potato dish I prepared a few days ago: