Back to Blog

Getting images to work

Jochen

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.