Add image field in recipe detail template to show recipe image

README.md

@@ -116,6 +116,7 @@ Registration form
 ## Bugs
 
 ### Known bugs
+- Last updated not working in recipe detail.
 - Prep time and cooking time is showing seconds and not minutes
 - Default profile pic is not showing. Tried both to add a direct link to cloudinary and to store it locally. 
 - Default recipe pic is not showing.
@@ -124,9 +125,13 @@ Registration form
 ### Solved bugs
 - Update user profle form is not working. Keep getting the error message: Type Error at /profile/. Exception Value: 'UserUpdateForm' object is not iterable. 
   - Solved: Forgot to put inherit forms.ModelForm in the class UserUpdateForm. 
+
 - Cancel in delete view not working. Asking for a success url. 
   - Had to switch from <button> to <a>
 
+- Recipe images are not showing. Trying to re-direct to default. 
+  - Had to add image field in the detail template. 
+
 
 ## Credits
 

cookbook/models.py

@@ -8,7 +8,7 @@
 
 class Recipe(models.Model):
 
-    placeholder = 'static/cookbook/images/placeholder.placeholder.jpg'
+    placeholder = 'static/cookbook/images/placeholder.jpg'
 
     title = models.CharField(max_length=200)
     author = models.ForeignKey(User, on_delete=models.CASCADE)

cookbook/templates/cookbook/base.html

@@ -109,27 +109,6 @@
     </div>
   </section>
 
-  <!-- SIDEBAR from https://github.com/CoreyMSchafer
-    <main role="main" class="container">
-        <div class="row">
-          <div class="col-md-8">
-
-          </div>
-          <div class="col-md-4">
-            <div class="content-section">
-              <h3>Sidebar</h3>
-              <p class='text-muted'>Short text will come.
-                <ul class="list-group">
-                  <li class="list-group-item list-group-item-light">Latest Recipes</li>
-                  <li class="list-group-item list-group-item-light">...</li>
-                  <li class="list-group-item list-group-item-light">...</li>
-                  <li class="list-group-item list-group-item-light">etc</li>
-                </ul>
-              </p>
-            </div>
-          </div>
-        </div>
-      </main> -->
 
   <!-- Bootstrap JavaScript-->
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"

cookbook/templates/cookbook/home.html

@@ -8,7 +8,7 @@ <h1>the Collective Cookbook</h1><br><hr>
     {% for recipe in recipes %}
     <div class="col">
         <div class="card h-100">
-            <img src="{{ recipe.featured_image.url }}" class="card-img-top" alt="Skyscrapers" />
+            <img src="{{ recipe.featured_image.url }}" class="card-img-top" alt="Image of {{ recipe.title }}" />
             <div class="card-body">
                 <h5 class="card-title"><a href="{% url 'recipe-detail' recipe.id %}"> {{ recipe.title }} </a></h5>
                 <small class="author">by <a href="#">{{ recipe.author }}</a> on {{ recipe.date_posted }}</small><br>

cookbook/templates/cookbook/recipe_form.html

@@ -3,11 +3,12 @@
 {% block content %}
 
 <div class="content-section">
-    <form method="POST" action="#">
+    <form method="POST" action="#" enctype="multipart/form-data">
         {% csrf_token %}
         <fieldset class="form-group">
             <legend class="border-bottom mb-4">Recipe</legend>
             {{ form|crispy }}
+            {{ form.media }}
         </fieldset>
         <div class="form-group">
             <button type="submit" class="btn btn-custom-primary">Save</button>