working, images broken

plugins/plant/models.py

@@ -101,14 +101,14 @@ class Plant(db.Model):
     media_items = db.relationship(
         'plugins.media.models.Media',
         back_populates='plant',
-        lazy='dynamic',
+        lazy='select',  # ← this is the fix
         cascade='all, delete-orphan',
         foreign_keys='plugins.media.models.Media.plant_id'
     )
 
     @property
     def media(self):
-        return self.media_items.all()
+        return self.media_items  # already a list when lazy='select'
 
     # the one you see on the detail page
     featured_media = db.relationship(

plugins/plant/routes.py

@@ -1,5 +1,7 @@
 from uuid import uuid4
 import os
+from sqlalchemy.orm import joinedload
+
 from flask import (
     Blueprint,
     render_template,
@@ -10,6 +12,7 @@ from flask import (
     current_app,
 )
 from flask_login import login_required, current_user
+
 from app import db
 from .models import Plant, PlantCommonName, PlantScientificName
 from .forms import PlantForm
@@ -37,7 +40,9 @@ def inject_image_helper():
 @login_required
 def index():
     plants = (
-        Plant.query.filter_by(owner_id=current_user.id)
+        Plant.query
+        .options(joinedload(Plant.media_items))
+        .filter_by(owner_id=current_user.id)
         .order_by(Plant.id.desc())
         .all()
     )

plugins/plant/templates/plant/index.html

@@ -154,10 +154,16 @@
           {% endif %}
 
           <a href="{{ url_for('plant.detail', uuid_val=plant.uuid) }}">
-            <img src="{{ generate_image_url(featured) }}"
-                 class="card-img-top"
-                 style="height:200px;object-fit:cover;"
-                 alt="Image for {{ plant.common_name.name }}">
+            {# pick featured → first media if no explicit featured #}
+            {% set featured = plant.featured_media %}
+            {% if not featured and plant.media %}
+              {% set featured = plant.media[0] %}
+            {% endif %}
+            <img
+              src="{{ generate_image_url(featured) }}"
+              class="card-img-top"
+              style="height:200px;object-fit:cover;"
+              alt="Image for {{ plant.common_name.name }}">
           </a>
 
           <div class="card-body d-flex flex-column">