One of the things that has bugged me is that my images are not responsive. Since I've been working on rotating the images, it seemed like the perfect time to make the images responsive.

I decided to go simple. Instead of saving the location of the of the responsive images in the DB I decided to simply add images to the media folder. There are two steps to the process. First you have to add images then you have to get the list of images. Adding the images was simple enough, very similar to rotating them. The second step was a little more difficult.

Initially I added a get_srcset function to the observation model. The function assumed that the images would be named a certain way image.jpg image_1000.jpg, image_500.jpg, image_100.jpg. This way almost worked but I ran into issues in the html. If I didn't give width information with the images then the browser just picked the smallest image. When I added width information it was based on the assumption that image_1000.jpg had a width of 1000. But in cases where the image was taller than wide that wouldn't be correct.

I think I could have gotten width information when I ran the get_srcset function, but it seemed like repeated queries of the filesystem was a waste. So I added another field to the Db (source_set) intending to fill it when I built the images. This ran into its own problem. I had to save the observation after giving it the source set information. But I was running the function that created the responsive images in a post_save signal. If I added Observation.save() to the signal it just ran the function over and over. This required learning about disconnecting and reconnecting the django signaling system. It's a simple fix, and it seems to be working.

I'm about to move this to the live server. I'll have to monitor it to make sure it works correctly.