Django Delights Restaurant Website Carousel Implementation

Using Django Templates & Frontend
1

Okay I am working on my first website django project that is not a tutorial and I am thinking a carosuel would be a really great opening feature for my website home page.

So, I have bootstrap and I went to the website and I managed to get the code for inputting bootstrap into my project and the code for the carousel itself. The carousel needs images to rotate in and out.

Per Django for beginners I made a project level static folder and a css folder and than I made an images folder and placed my images in there. Like so:

static/css/images_folder and at the same level base.css.

I placed my three photos in the images folder.

Than I went to my base.html and input the load static tag just as it was in Django for beginners.

I also went to my django_project/settings.py and updated the values there to the following.

django_project/settings.py

# django_project/settings.py
STATIC_URL = "static/"
STATICFILES_DIRS = [BASE_DIR / "static"] # new

I went back to the carousel and in home.html filled in the image src with he following but it doesn’t work. I am thinking that either my path is wrong or my django is overriding it.

home.html

{% extends 'inventory/base.html' %} 
{% load static %}
{% block content %}
{% block head %}
    <link rel="stylesheet" href="{% static 'inventory/style.css' %}">
{% endblock %}

<head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
    rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
    crossorigin="anonymous">
</head>

<h1>Welcome to the Home page!</h1>
<body>
    <div id="carouselExampleAutoplaying" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="/static/css/images" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="/static/css/images" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="/static/css/images" class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleAutoplaying" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleAutoplaying" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>
</body>
<script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</script>
{% endblock %}

My folder structure is

djangodelights/inventory/templates/inventory/base.html etc all my templates

djangodelights/static/css//image1 and so on.

djangodelights/djangodelights/static/css/images/picture1,2,3 and so on

djangodelights/djangodelights/static/css/base.css

2

That appears to be a directory name and not the name of the image. The src attribute must be a reference to the file.

3

home.html


This paste expires on 2023-11-19 18:59:54.054760. Remove now. Repaste, or download this paste. Toggle word wrap. Pasted through web.

{% extends 'inventory/base.html' %} {% load static %} {% block content %}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Bootstrap demo</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
      crossorigin="anonymous"
    />

    <div id="carouselExample" class="carousel slide">
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img src="Cappuccino.png" class="d-block w-100" alt="..." />
        </div>
        <div class="carousel-item">
          <img src="Espresso.png" class="d-block w-100" alt="..." />
        </div>
        <div class="carousel-item">
          <img src="Mocha.png" class="d-block w-100" alt="..." />
        </div>
      </div>
      <button
        class="carousel-control-prev"
        type="button"
        data-bs-target="#carouselExample"
        data-bs-slide="prev"
      >
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
      </button>
      <button
        class="carousel-control-next"
        type="button"
        data-bs-target="#carouselExample"
        data-bs-slide="next"
      >
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
      </button>
    </div>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
      crossorigin="anonymous"
    ></script>
  </body>
</html>
{% endblock %}
4

I have managed to apply bootstrap to the navbar and I have managed to move my django url links in base.html to their respective spots on the bootstrap navbar hyperlinks.

Django_Delights
Django_Delights1425×638 113 KB

the carousel works on an auto basis but the next buttons are not working which I am going to try to fix. And I need to get that image to contain the top center of the page…

But my issue that I am facing is that when I click on the navbar links it reverts to hyperlinks.

navbar_links
navbar_links1501×674 81.4 KB

menu_links
menu_links863×659 41.7 KB

I am thinking that this is an issue of the bootstrap code not being extended. Which I thought base.html was doing.

Am I on the correct track?

base.html

{% load static %}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="{% static 'css/base.css'%}">
  </head>
  <body>
    <nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="{% url 'home' %}">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="{% url 'ingredients' %}">Ingredients</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="{% url 'menu' %}">Menu</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="{% url 'finance' %}">Finance</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="{% url 'purchases' %}">Purchases</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="{% url 'menuadd' %}">Add Menu</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="{% url 'ingredientadd' %}">Add Ingredient</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="{% url 'recipeadd' %}">Add Receipe</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="{% url 'purchaseadd' %}">Add Purchase</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" aria-disabled="true">Disabled</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

    </div>
      
    {% block content %} {% endblock %}
  </body>
</html>

home.html

{% extends 'inventory/base.html' %} 
{% load static %} 
{% block content %}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Bootstrap demo</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
      crossorigin="anonymous"
    />
    <link href='static/css/base.css' rel='stylesheet'>
    
  </head>

</div>

  <body>
    <h1>Welcome to Django Delights!</h1>

      <!-- beginning of carousel-->
<div class="container">
  <div class="row">
    <div class="col-md-8">
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
  <ol class="carousel-indicators">
    <li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active"></li>
    <li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"></li>
    <li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="static/css/images/Cappuccino.png" alt="First slide" style="width:250px;height:250px;">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="static/css/images/Espresso.png" alt="Second slide" style="width:250px;height:250px;">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="static/css/images/Mocha.png" alt="Second slide" style="width:250px;height:250px;">
      <img class="d-block w-100" src="" alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
      crossorigin="anonymous"
    ></script>
  </body>
</html>
{% endblock %}