Using Django to Edit Images on Upload
With our first app release coming up we have been working hard on our website! We have implemented a great way to handle our various social media accounts on the site and we are going to share it with you here. In this article we will break down the design and engineering behind it all!
The Design
It can’t be stated how important it is to have connections from your website to your social media accounts. When designing our site we quickly knew that we wanted our social media to have a strong presence but not be overbearing. We hate going to a site and getting pummeled with constant prods to hit their socials. Instead, we wanted to subtly nod in a few key places to make our links. Let’s focus on one of those sections; The footer.
Here you can see a mockup of our footer in Figma. On the right, we have our connect section. With new social media services popping up every day our list of accounts is ever-growing. To thwack a dozen links in front of a user is bordering on cruel and unusual punishment so we pared it down to just four. Each will have a white logo for the platform on top of the background.
During our engineering sessions, a problem became evident; These social platforms are going to change. We don’t want our engineers to have to push code changes every time a social profile changes. We also want to make sure that editing is as easy as possible. No special logo specs. No crafting new logos each time we need to add a new account. What if we could just have Django do all of it for us? We can! Let’s take a look at how we pulled it off!
The Engineering
Our backend is written in Django using Python. It uses model classes to generate the database tables for you which is *chef’s kiss*.
Here you can see the base class for our Socialmodel. It’s pretty simple at just three properties with a nameto match the social media site, a urlfor the location of the account on that site, and an icon that is the platform’s logo. You’ll note that we override the model’s save method to call a custom method _make_thumbnail .
When someone on our team adds or modifies a Social instance from the Django admin panel the image they uploaded gets passed down to _make_thumbnail . This method does some sanitizing to make sure we can operate on the image safely, resizes it to the selected size (100 x 100 by default to make a thumbnail), and then passes it off to _recolor .
The magic happens inside _recolor . This method creates a new blank image the same dimensions as the source image being passed in and then fills it with white. It then grabs the alpha layer of the source image and pastes that into the newly created white image. This new image then gets passed back to Django and gets saved on the Social model.
Let’s go through a brief example. Here you can see a search online for the Twitter logo and nearly none of them fit with what we want. i.e. They aren’t white. We could have the design team modify the image but they are far too busy reading books on Helvetica and can’t be bothered.
Here is the Django admin panel for adding a new Social instance. We gave it a name, the link for you to follow us on Twitter, and a logo. Note that the logo is blue and has transparency. Django saves the instance, resizes the image, recolors it, and attaches it to the instance.
In this method we render the HTML template. We grab four random social instances and pass them along.
The new image we just created shows up immediately on the page with the correct dimensions and color! No image editors were harmed!
Thank you for taking the time to see what we have been up to. We want to hear about what you are working on. Head over to Twitter and tell us all about your projects. Follow us for more content like this as we build our business in public!
Ordinary Industries
