change homepage to work on firefox using div images

routes/homepage.py

@@ -15,7 +15,5 @@ def home():
     print(f'Featured species: {species1}, {species2}, {species3}')
     return render_template(
         "home/home.jinja",
-        species1=species1,
-        species2=species2,
-        species3=species3,
+        species_list=list(dict(config['homepage']).values())
         )

static/styles.css

@@ -659,7 +659,9 @@ input:focus {
   margin-bottom: 1rem;
 }
 
-.container-lite img {
+.container-lite .div-image {
+  background-size: cover;
+  background-position: center;
   max-width: 80%;
   max-height: 80%;
   aspect-ratio: 1/1;

templates/home/home.jinja

@@ -6,7 +6,7 @@
 {% from 'button.jinja' import button %}
 <!-- Banner section -->
 <section id="hero" style="padding: 0px 20px 0px 20px; text-align: center;">
-    <img src="/images/image.png" class="komodo_crop half-width" alt="I stole this photo from the internet"> 
+    <img src="/images/image.png" class="komodo_crop half-width" alt="I stole this photo from the internet">
     <h1>Protecting Indonesia's Endangered Species Together</h1>
     <p>Komodo Hub is dedicated to safeguarding the incredible biodiversity of Indonesia. Join us in our mission to
         conserve and protect these precious creatures for future generations.</p>
@@ -20,7 +20,8 @@
 <!-- About section -->
 <section id="about" style="padding: 50px 20px; text-align: center;">
     <h2>What is Komodo Hub?</h2>
-    <p style="max-width: 800px; margin: 1rem auto;">Komodo Hub is a digital platform designed to support conservation and
+    <p style="max-width: 800px; margin: 1rem auto;">Komodo Hub is a digital platform designed to support conservation
+        and
         species protection efforts across Indonesia. We connect passionate individuals, educators, and organizations to
         make a tangible difference.
     </p>
@@ -28,35 +29,32 @@
 </section>
 <!-- Featured Species -->
 {# If you want to change the featured species please do so in config.ini - CS #}
-<section id="featured-species" style="padding: 10px 20px; background-color: #047f02; text-align: center;" class="container-full-bright">
+<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">
+    <div
+        style="display: flex; flex-wrap: wrap; gap: 20px; margin-top: 30px; text-decoration: none; justify-content: space-evenly">
+        {%for species in species_list%}
+        <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>
     <a href="/species"
         style="display: inline-block; margin-top: 40px; background-color: #555; color: white; padding: 10px 20px; text-decoration: none; border-radius: 5px;">View
         All Species</a>
 </section>
 <!-- Schools & communities section -->
-<section id="schools-communities" style="padding: 10px 20px; text-align: center; background-color: #094d21;" class="container-full">
+<section id="schools-communities" style="padding: 10px 20px; text-align: center; background-color: #094d21;"
+    class="container-full">
     <h2>Schools & Communities</h2>
     <p style="max-width: 800px; margin: 0 auto;">
-    Schools and communities play a vital role in conservation. Discover how
-    your group can get involved through educational programs, fundraising, and awareness campaigns.
+        Schools and communities play a vital role in conservation. Discover how
+        your group can get involved through educational programs, fundraising, and awareness campaigns.
     </p>
     <div class="homepage-buttons">
         {{ button(url='/register-school', button_text='Register Your School', extra_classes='homepage-btn') }}