trjhtr

In order to display the appropriate image for a set of responsive breakpoints, I have put built a Context Processor that simply passes some Dicts with breakpoint and image resolution information. I then loop through these Dicts in order to generate responsive thumbnails as well as build the relevant CSS media queries.

This solution works well for me now, but as I repeat this code on all template pages that need responsive imagery it becomes less and less DRY, yet I am not quite sure how I would abstract this functionality further.

How can I make this thumbnail/responsive breakpoint-generating functionality more DRY?

context_processors.py

def thumbsizes(request):
thumbsizes = 
 'screensizes': [
 'xs': '',
 'sm': '796px',
 'md': '1024px',
 'lg': '1216px',
 'xl': '1408px',
 ],
 'hero': [
 'xs': '600x827',
 'sm': '900x400',
 'md': '1200x400',
 'lg': '1800x400',
 'xl': '2400x400',
 ],
 'main': [
 ...
 ],
 ...

return "thumbsizes": thumbsizes

_hero.html

% with object.image as image %
 % with class_name=".c-hero" %
 <style type="text/css">
 % for size in thumbsizes.hero %
 % for key, value in size.items %
 # Build thumbnail with value from size Dict #
 % thumbnail image value crop upscale subject_location=image.subject_location as thumb %

 # Do not apply media query for extra-small devices #
 % if key == 'xs' %
 class_name % if child_class % child_class % endif % 
 background-image: url( thumb.url);
 
 % else %
 % for screensize in thumbsizes.screensizes %
 % for skey, svalue in screensize.items %
 % if skey != 'xs' and key == skey %
 @media screen and (min-width: svalue ) 
 class_name % if child_class % child_class % endif % 
 background-image: url( thumb.url);
 
 
 % endif %
 % endfor %
 % endfor %
 % endif %
 % endfor %
 % endfor %
 </style>
 % endwith %
% endwith %

<div class="c-hero"></div>