Ephes Blog

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:

Usually I use nginx for static files, ssl termination and as a reverse proxy before my application servers. The django cookiecutter template came with a new webserver named caddy. It's written in go and https per default. Usually you have to fiddle around with certificates and a more or less complicated nginx config, but with caddy it was surprisingly easy. The certificate came from letsencrypt and it got installed automatically. After that my site got an A on the ssllabs ssl test page without any further tweaking. Caddy might be a bit slower than nginx, but it's probably fast enough for most people and solves an annoying problem. This is really cool.

Images do work now \o/. But it wasn't that easy. For the project scaffolding I used cookiecutter-django which saved me a lot of work. And while the local media storage worked perfectly on the local docker deployment, it didn't on the production deployment. So I had to use s3, which also didn't work right away. The reason was that I used Frankfurt as my s3 region and now the image urls have to start with s3.eu-central-1.amazonaws instead of just s3.amazonaws. It was possible to fix this with just two additional settings, but to find them required some serious googling:

• AWS_S3_REGION_NAME = 'eu-central-1'
• AWS_S3_SIGNATURE_VERSION = 's3v4'

To edit posts I decided to use CKEditor which was also quite easy use on the development server, but not so much on production. The reason was that the CKEditor javascript couldn't find it's own static assets due to the use of ManifestStaticFilesStorage. The solution was to set the path using "window.CKEDITOR_BASEPATH = '/static/ckeditor/ckeditor/';" somewhere in a script-tag. But this didn't work in the django admin frontend since it comes with it's own templates. Luckily it's possible to tell the admin frontend about additional javascript files that should be loaded like this:

class BlogPostModelAdmin(admin.ModelAdmin):
    list_display = ('title', 'author', 'blog')

    class Media:
        js = ('js/ckeditor_fix.js',)

admin.site.register(BlogPost, BlogPostModelAdmin)

Another obstacle was how to make the images behave responsive. For now I'm just using 'class="img-fluid"'in the img tag to tell bootstrap to apply some responsiveness magic. But that's merely a hack - what will happen if I want to switch to foundation as a frontend framework? Do I have to change the content of all articles? But I'm not a frontend guy and have no clue how to do this properly.