fixed recipe table image

cookbook/tables.py

@@ -5,22 +5,12 @@ from django_tables2.utils import A  # alias for Accessor
 
 from .models import *
 
-from django.utils.safestring import mark_safe
-from django.templatetags.static import static
 
-class ImageUrlColumn(tables.LinkColumn):
+class ImageUrlColumn(tables.Column):
     def render(self, value):
         if value.url:
-            src = value.url
+            return value.url
-            _class = ''
+        return None
-            style = 'object-fit: cover;'
-        
-        else:
-            src = static("recipe_no_image.svg")
-            _class = 'd-none d-lg-block'
-            style = 'object-fit: inherit;'
-            
-        return mark_safe(f'<img src="{src}" alt="{_("Recipe Image")}" class="card-img {_class}" style="{style} height:130px">')
 
 
 class RecipeTableSmall(tables.Table):
@@ -40,7 +30,7 @@ class RecipeTable(tables.Table):
     name = tables.LinkColumn('view_recipe', args=[A('id')])
     all_tags = tables.Column(
         attrs={'td': {'class': 'd-none d-lg-table-cell'}, 'th': {'class': 'd-none d-lg-table-cell'}})
-    image = ImageUrlColumn('view_recipe', args=[A('id')])
+    image = ImageUrlColumn()
 
     class Meta:
         model = Recipe

cookbook/templates/recipes_table.html

@@ -14,7 +14,18 @@
                             <div class="card" style="margin-top: 2px;">
                                 <div class="row no-gutters">
                                     <div class="col-md-4">
-                                        {{ row.cells.image }}
+                                        <a href="{% url 'view_recipe' row.cells.id %}">
+                                            {% if row.cells.image|length > 1 %}
+                                                <img src=" {{ row.cells.image }}" alt="{% trans 'Recipe Image' %}"
+                                                     class="card-img" style="object-fit: cover;height: 130px">
+                                            {% else %}
+                                                <img src="{% static 'recipe_no_image.svg' %}"
+                                                     alt="{% trans 'Recipe Image' %}"
+                                                     class="card-img d-none d-lg-block"
+                                                     style="object-fit: inherit; height: 130px">
+
+                                            {% endif %}
+                                        </a>
                                     </div>
                                     <div class="col-md-8">
                                         <div class="card-body">