I am part editor and part developer and not utterly advanced at either career. But I am carrying out only a small-scale project. I'm thinking that in the blog that I recently added to my Django site (as yet only on the development server), with Wagtail and Puput, I might want to upload, say, two ~50KB images per week for five years, after which I'll be doing something else. There will never be a huge number of readers or a need for vast storage. Those being the circumstances, I specifically want to know if what I'm doing to overcome the problems that I encountered with uploaded images not resizing to small screens in the Puput blog, non-responsive design, looks feasible. Or, did I make some stupid mistake and, say, just use the Puput/Wagtail editor incorrectly?
When you click into the "body" textbox in the Puput editor to insert an image, it's quite simple. You just browse for your file, give the image a name, and select whether you want full-width or aligned on the left or right. And upon doing that your image will be uploaded into your previously established "media" folder and the database will simply be updated to contain the location of your image in the "media" folder. The <img> tag in your text body will be given an ID attribute which is a link to the database entry.
Two troubling things then happen: (1) when you go into the browser's Responsive Design Mode the image is bigger than the small screen, no responsiveness; and, you actually don't now have an image stored in your media folder, you have three--- the original is in a subdirectory called "original_images" and there are two images in an "images" subdirectory. The two additional images may not have exactly the same pixel dimensions as the original, depending on your choice of full-width or not, the aspect ratio of the images perhaps, etc.
So this is rather intolerable, unless of course you can tell me what mistake I may have made. Otherwise, here's what I have done to get past this, and again, my question is would this work out in practice or do you have a better idea. I found this post on github, and in particular the comment by jerel concerning an insert_editor_js and wagtail_hooks.py hook. This overcomes the richtext limitations of standard hallo and permits opening a second editor window in which you can see and enter HTML.
But Wagtail has this Whitelister class that only permits certain attributes to be used with certain HTML tags. So the Wagtail people also have a hook for changing that, which is explained here. Here's my version of the wagtail_hooks.py file:
from wagtail.wagtailcore import hooks
from wagtail.wagtailcore.whitelist import attribute_rule, check_url, allow_without_attributes
from django.utils.html import format_html
# This one is from the esteemable jerel.
@hooks.register('insert_editor_js')
def enable_source():
return format_html(
"""
<script>
registerHalloPlugin('hallohtml');
</script>
"""
)
# This is modified from the Wagtail docs example.
@hooks.register('construct_whitelister_element_rules')
def whitelister_element_rules():
return {
'blockquote': allow_without_attributes,
'a': attribute_rule({'href': check_url, 'target': True}),
'img': attribute_rule({'src': True, 'width': True, 'height': True, 'alt': True, 'style': True}),
'p': attribute_rule({'style': True, 'class': True}),
}
Note especially that for the img tag I have put 'src': True in place of 'src': check_url, which is the default (check_url is a function that would reject a data URI, as I discuss below). Other changes important to me are the inclusion of 'target': True for the a tag and also the 'style': True additions.
Puput natively uses Bootstrap3 which is "mobile first", or some such rallying cry. So to bring about responsiveness for images with Bootstap3 in Puput I had to do what I have had to do before, which is, in the img tag, to either set the attribute width="100%" or to do it with style="width:100%;" (which I could do thanks only to the hallohtml plugin).
So now, here comes the problem: I found that that only works if you remove the extra attributes that Puput or Wagtail gives to the img tag (otherwise your changes will be deleted). Here's what the img tag looks like straight from the Puput editor: <img data-embedtype="image" data-id="9" data-format="fullwidth" data-alt="junk" class="richtext-image full-width" src="/home/mike/myproject/public_html/djangoprojectdir/public/media/images/imagename.width-800.png" alt="junk" height="1115" width="596">.
So if I throw away height and change width to 100% that doesn't work unless I also remove data-format, etc. If I do all of that, I have responsive design... but, the database is no longer involved. I have thereby instead just manually linked the image file to the img tag.
So my solution to bring about responsive-design behavior kills the database linkage between pages and image files. I must say, I don't miss the absurd presence of three images in the media folder for every one that I upload. And I don't much like having to guard and backup without failure, for years, not only a database but also a folder of many images.
So the second thing that I tried--- it too seems to work--- is the use of data URIs with Base64, which I read about here. It seems feasible because I won't be using many dense images. I made use of the hallohtml editor to cut and paste the Base64 encoding of the image to src in the img tag. It's not utterly unwieldy.
So again, the question is, do I have to do something like this (and is what I propose reasonable)... or, am I somehow just in the dark concerning how I should upload images or configure Puput and Wagtail for responsive design (I followed all of their instructions and everything else works)?
