Improve image loading by handling different storage paths

Add a custom Jinja filter `image_url` to `app.py` to correctly resolve image paths from object storage or local static files, and update all relevant templates (members, sponsors, competitions, contributors) to use this new filter instead of the `url_for('static', filename=...)` function, ensuring images are displayed correctly regardless of their storage location.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: cd9a7d26-a4e5-4215-975c-c59f4ed1f06d
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: a02b1418-2e19-496d-9921-3a4afe97ac0d
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/d0a1d46d-d203-4308-bc6a-312ac7c0243b/cd9a7d26-a4e5-4215-975c-c59f4ed1f06d/05bPjFc

app.py

@@ -32,6 +32,15 @@ def get_db_connection():
     conn = psycopg2.connect(os.environ['DATABASE_URL'])
     return conn
 
+@app.template_filter('image_url')
+def image_url_filter(path):
+    """Convert image path to proper URL - handles both storage and local paths"""
+    if not path:
+        return url_for('static', filename='images/default.jpg')
+    if path.startswith('/storage/'):
+        return path
+    return url_for('static', filename=path)
+
 def upload_file_to_storage(file, folder='uploads'):
     """
     Upload file to object storage if available, otherwise fall back to local storage

templates/admin/members.html

@@ -186,7 +186,7 @@
     <div class="members-grid">
         {% for mentor in mentors %}
         <div class="member-card-admin">
-            <img src="{{ url_for('static', filename=mentor.image_path) }}" class="member-image-admin" alt="{{ mentor.name }}">
+            <img src="{{ mentor.image_path|image_url }}" class="member-image-admin" alt="{{ mentor.name }}">
             <h3 class="member-name-admin">{{ mentor.name }}</h3>
             <p class="member-role-admin">{{ mentor.role }}</p>
             <button onclick="openEditModal('mentor', {{ mentor.id }}, '{{ mentor.name }}', '{{ mentor.role }}')" class="btn btn-edit">Edit</button>
@@ -205,7 +205,7 @@
     <div class="members-grid">
         {% for member in members %}
         <div class="member-card-admin">
-            <img src="{{ url_for('static', filename=member.image_path) }}" class="member-image-admin" alt="{{ member.name }}">
+            <img src="{{ member.image_path|image_url }}" class="member-image-admin" alt="{{ member.name }}">
             <h3 class="member-name-admin">{{ member.name }}</h3>
             <p class="member-role-admin">{{ member.role }}</p>
             <button onclick="openEditModal('member', {{ member.id }}, '{{ member.name }}', '{{ member.role }}')" class="btn btn-edit">Edit</button>

templates/admin/sponsors.html

@@ -146,7 +146,7 @@
         {% for sponsor in sponsors %}
         <div class="sponsor-card-admin">
             {% if sponsor.logo_path %}
-            <img src="{{ url_for('static', filename=sponsor.logo_path) }}" class="sponsor-logo-admin" alt="{{ sponsor.name }}">
+            <img src="{{ sponsor.logo_path|image_url }}" class="sponsor-logo-admin" alt="{{ sponsor.name }}">
             {% endif %}
             <h3 class="sponsor-name-admin">{{ sponsor.name }}</h3>
             {% if sponsor.website_url %}

templates/competitions.html

@@ -26,7 +26,7 @@
                 <div class="competition-card">
                     {% if comp.image_path %}
                     <div class="competition-card-img">
-                        <img src="{{ url_for('static', filename=comp.image_path) }}">
+                        <img src="{{ comp.image_path|image_url }}">
                     </div>
                     {% endif %}
                     <div class="competition-header">

templates/contributors.html

@@ -45,7 +45,7 @@
                     {% for mentor in mentors %}
                     <div class="member-card">
                         {% if mentor.image_path %}
-                        <img class="member-image" src="{{ url_for('static', filename=mentor.image_path) }}">
+                        <img class="member-image" src="{{ mentor.image_path|image_url }}">
                         {% endif %}
                         <h2 class="member-name">{{ mentor.name }}</h2>
                         <p class="member-role">{{ mentor.role }}</p>
@@ -63,7 +63,7 @@
                     {% for member in members %}
                     <div class="member-card">
                         {% if member.image_path %}
-                        <img class="member-image" src="{{ url_for('static', filename=member.image_path) }}">
+                        <img class="member-image" src="{{ member.image_path|image_url }}">
                         {% endif %}
                         <h2 class="member-name">{{ member.name }}</h2>
                         <p class="member-role">{{ member.role }}</p>

templates/sponsors.html

@@ -16,7 +16,7 @@
                 {% for sponsor in sponsors %}
                 <a href="{{ sponsor.website_url }}" target="_blank" class="card-sponsors">
                     <div class="card-content-sponsors">
-                        <img src="{{ url_for('static', filename=sponsor.logo_path) }}" alt="{{ sponsor.name }}">
+                        <img src="{{ sponsor.logo_path|image_url }}" alt="{{ sponsor.name }}">
                     </div>
                 </a>
                     {% endfor %}