Store details in JSON

data/projects.json

@@ -0,0 +1,10 @@
+{
+  "hipchat-emoticons-for-all": {
+    "title": "Hipchat Emoticons Plugin",
+    "image": "https://hipchat-magnolia-cdn.atlassian.com/assets/img/hipchat/hipchat_og_image.jpg"
+  },
+  "attack-on-blocks": {
+    "title": "Attack on Blocks Game",
+    "image": "https://image.freepik.com/free-vector/space-invaders-game_62147502273.jpg"
+  }
+}

project/pages/views/projects.py

@@ -1,18 +1,20 @@
-from collections import namedtuple
 from project.common.views import CustomTemplate, MarkdownView
+from json import load
+from django.conf import settings
+import os.path
 
 
-ProjectDetails = namedtuple('ProjectDetails', ['title', 'image'])
-
-PROJECT_DETAILS = {
-    'hipchat-emoticons-for-all': ProjectDetails('Hipchat Emoticons Plugin', 'https://hipchat-magnolia-cdn.atlassian.com/assets/img/hipchat/hipchat_og_image.jpg'),
-    'attack-on-blocks': ProjectDetails('Attack on Blocks Game', 'https://image.freepik.com/free-vector/space-invaders-game_62147502273.jpg')
-}
+PROJECT_DETAILS = load(open(os.path.join(settings.BASE_DIR, 'data/projects.json')))
 
 
 class AllView(CustomTemplate):
     template_name = 'projects/all.html'
 
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        context['projects'] = PROJECT_DETAILS
+        return context
+
 
 class ProjectView(MarkdownView):
     def get_context_data(self, **kwargs):

templates/projects/all.html

@@ -3,8 +3,14 @@
 {% block pageTitle %}All Projects{% endblock %}
 
 {% block content %}
-
-<div class="container">
-  <p>Stuff</p>
-</div>
+  <div class="row">
+    <div class="container all-projects">
+      {% for key, project in projects.items %}
+        <div class="">
+          <img src="{{ project.image }}">
+          <h5>{{ project.title }}
+        </div>
+      {% endfor %}
+    </div>
+  </div>
 {% endblock %}