fix for the stupid specifies page

routes/species/species.py

@@ -27,7 +27,5 @@ def all_species():
     return render_template(
         "species/species.jinja",
         species=species_list,
-        species1=species1,
-        species2=species2,
-        species3=species3,
+        featured_species=list(dict(config['homepage']).values())
         )

templates/species/species.jinja

@@ -10,21 +10,15 @@ Species Database
 <section id="featured-species" style="padding: 10px 20px; background-color: #047f02; text-align: center;" class="container-full-bright">
     <h2>Featured Species</h2>
     <div style="display: flex; flex-wrap: wrap; gap: 20px; margin-top: 30px; text-decoration: none; justify-content: space-evenly">
-        <a href="/species/{{species1}}" class="container-lite">
-            <h3 class="plain-white-text">{{species1}}</h3>
-            <img src="images/species_database/{{species1}}.jpg">
+        {%for species in featured_species%}
+        <a href="/species/{{species}}" class="container-lite">
+            <h3 class="plain-white-text">{{species}}</h3>
+            <div
+                style="background-image: url('images/species_database/{{species}}.jpg');" class="div-image">
+            </div>
             <p style="color: var(--text)">Main category: Reptile</p>
         </a>
-        <a href="/species/{{species2}}" class="container-lite">
-            <h3 class="plain-white-text">{{species2}}</h3>
-            <img src="images/species_database/{{species2}}.jpg">
-            <p style="color: var(--text)">Main category: Mammal</p>
-        </a>
-        <a href="/species/{{species3}}" class="container-lite">
-            <h3 class="plain-white-text">{{species3}}</h3>
-            <img src="images/species_database/{{species3}}.jpg">
-            <p style="color: var(--text)">This is deliberately broken I wanted to see what happened</p>
-        </a>
+        {%endfor%}
     </div>
 </section>
 <h2 style="text-align: center; margin-top: 30px;">All Species</h2>
@@ -33,7 +27,9 @@ Species Database
     <div class="container-lite">
         <a href="/species/{{ sp['species_english'] }}">
             <h3 class="plain-white-text">{{ sp['species_english'] }}</h3>
-            <img src="{{ url_for('static', filename='images/species_database/' ~ sp['species_english'] ~ '.jpg') }}">
+            <div
+                style="background-image: url('{{ url_for('static', filename='images/species_database/' ~ sp['species_english'] ~ '.jpg') }}');" class="div-image">
+            </div>
             <p>Main category: {{ sp['category'] }}</p>
         </a>
     </div>