Hello guys, welcome back to my blog this week. This week’s blog is inspired by the issue with the task that I am working on. The task is pretty simple and straight forward. I am responsible for building an extension of my school’s official website, and the site needs a text editor where professors could write new announcements for students of their courses. The text editor includes a toolbar lies above the text box that would help professors modify the text easily. Currently, all the icons’ images of the toolbar is loaded from the school’s server. My manager required me to make those icons “server-less”.

After discussed with my manager about the task, I decided to create a JSON file contains all the images of the icons inside the local project itself, not from any external servers. Here is the simple instruction how to create a proper JSON file, read the data from the file, and access it on a Django template:

File structure of the project:


  • images.json
  • app.py
  • images/
  • icons.html

JSON file:
{"title":"Title 1","file":"images/Title1.jpg"},
{"title":"Title 2","file":"images/Title2.jpg"}

import json
with open('images.json') as image_file:
images = json.load(image_file)
icons = images["icons']

In order to access the fields of the JSON file in app.py:

icons.html (it is a Django template, so you will see some Django template tags):
{% for icon in icons %}
{% endfor %}