I'm attempting to display a list of movies on a website using Jinja2 (a template engine for Python) and Bootstrap (a front-end framework). However, I'm having difficulty getting the movie cards to display correctly.When trying to display the movie cards using Jinja2 and Bootstrap, the cards aren't being displayed as expected. I'm facing difficulties in correctly displaying the background image of the card, as well as ensuring that the movie information is displayed clearly and organized.
<!--{% extends 'base.html' %}
{% block conteudo %}
<h2 style="text-align: center;">Teste de filmes</h2>
<hr>
<ul class="list-group">
{% for filme in filmes %}
<li>{{filme.title}}</li>
<p>{{ filme.overview }}</p>
<p>Release Date: {{ filme.release_date }}</p>
<p>Vote Average: {{ filme.vote_average }}</p>
<p>Vote Count: {{ filme.vote_count }}</p>
<hr>
{% endfor %}
</ul>
{% endblock conteudo %}-->
{% extends 'base.html' %}
{% block conteudo %}
<h2 style="text-align:center;">Lista de Filmes</h2>
<hr>
<div class="row">
{% for filme in filmes %}
<div class="col-md-4">
<div class="card" style="width: 18rem;">
<img src="http://image.tmdb.org/t/p/w500{{filme.backdrop_path}}" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">{{filme.title}}</h5>
<p class="card-text">{{filme.overview}}</p>
<hr>
<h4>Nota média<span class="badge bg-secondary">{{filme.vote_average}}</span></h4>
</div>
</div>
</div>
{% if loop.index % 3 == 0 %}
</div><div class="row">
{% endif %}
{% endfor %}
</div>
{% endblock %}
Checking if the URL of the movie's background image is correct and accessible. Ensuring that all Bootstrap classes are being applied correctly. Verifying that the movies variable is being passed correctly to the template. Any help or suggestions would be greatly appreciated! Thank you!
this more files of the project:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AppPython</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">AppPython</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="{{url_for('principal')}}">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{url_for('filmes')}}">Filmes</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{url_for('sobre')}}">Sobre</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
{% block conteudo %}
{% endblock conteudo %}
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>
</html>
sobre.html:
{% extends 'base.html' %}
{% block conteudo %}
<h2 style="text-align: center;">Diário do Professor</h2>
<hr>
{% for registro in registros %}
<!-- <details>
<summary>{{registro.aluno}}</summary>
<p>{{registro.nota}}</p>
</details> -->
<p>
<a class="btn btn-secondary" data-bs-toggle="collapse" href="#collapse_{{ registro.aluno }}" role="button" aria-expanded="false" aria-controls="collapse_{{ registro.aluno }}">
{{registro.aluno}}
</a>
</p>
<div class="collapse" id="collapse_{{ registro.aluno }}">
<div class="card card-body">
{{registro.nota}}
</div>
</div>
{% endfor %}
<form action="{{url_for('sobre')}}" method="POST">
<div class="form-group">
<label>Aluno</label>
<input type="text" name="aluno" class="form-control" placeholder="Digite o nome do aluno" required>
</div>
<div class="form-group">
<label>Nota</label>
<input type="text" class="form-control" name="nota" placeholder="Digite uma nota" required>
</div>
<button class="btn btn-success">Adicionar</button>
</form>
{% endblock conteudo %}
idex.html:
{% extends 'base.html' %}
{% block conteudo %}
<h2 style="text-align: center;">Lista de Frutas</h2>
<hr>
<ul class="list-group">
{% for fruta in frutas %}
<li class="list-group-item">{{fruta}}</li>
{% endfor %}
<form action="{{url_for('principal')}}" method="POST">
<div class="form-group">
<label for="exemploFruta">Fruta</label>
<input class="form-control" id="exemploFruta" type="text" name="fruta" placeholder="Digita uma fruta:">
</div>
<button class="btn btn-success">Adicionar</button>
</form>
</ul>
{% endblock conteudo %}