With the django framework I use a loop in my templates to display the image inside my database, I also use the Bootstrap grid to make it clean, but it not working correctly. As you can see the image on at the bottom are not align correctly.
hmtl
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-3 col-lg-2">
<div class="card-filter" style="width: 10rem;">
<div class="card-header">
Pattern Type
</div>
<ul class="list-group list-group-flush">
{% for pattern in categories %}
<li class="list-group-item">{{pattern.name}}</li>
{% endfor %}
</ul>
</div>
</div>
{% for photo in photos %}
<div class="col-sm-12 col-md-5 col-ld-5">
<div class="card" style="width: 25rem;">
<img class="card-img-top" src="{{photo.image.url}}" alt="Card image cap">
<div class="card-body">
<p class="card-text">Symbol: GBPUSD<br>Pattern: ButterFly Bullish</p>
View Pattern
</div>
</div>
</div>
{% endfor %}
</div>
</div>
views.py
def home(request):
categories = Category.objects.all()
photos = Photo.objects.all()
context = {'categories': categories,
'photos': photos}
return render(request, "main/home.html", context)
You better put all the images in a parent that takes rest of the width after the list on the left, so it should be like this:
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-3 col-lg-2">
<div class="card-filter" style="width: 10rem;">
<div class="card-header">
Pattern Type
</div>
<ul class="list-group list-group-flush">
{% for pattern in categories %}
<li class="list-group-item">{{pattern.name}}</li>
{% endfor %}
</ul>
</div>
</div>
<div class="col-sm-12 col-md-9 col-lg-10">
{% for photo in photos %}
<div class="col-sm-12 col-md-6">
<div class="card" style="width: 25rem;">
<img
class="card-img-top"
src="{{photo.image.url}}"
alt="Card image cap"
/>
<div class="card-body">
<p class="card-text">
Symbol: GBPUSD<br />Pattern: ButterFly Bullish
</p>
<a href="{% url 'photo' photo.id %}" class="btn btn-dark"
>View Pattern</a
>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
Related
Given this field {% bootstrap_field form.photo %} which is a forms.ImageField and the form after, I need to associate the field with the form in a way that when the form is submitted, I get the value in form.photo.
<div class="row container h-100">
<div class="col-xl-4">
<div class="card mb-4 mb-xl-0">
<div class="card-body text-center">
<img style="max-width: 50%" alt="Avatar" class="img-account-profile rounded-circle mb-2"
src={{ request.user.profile.photo.url }}>
{% bootstrap_field form.photo %}
</div>
</div>
</div>
<div class="col h-100">
<div class="card shadow-lg">
<div class="card-body p-5">
<form enctype="multipart/form-data" method="post">
{% csrf_token %}
<div class="row">
<span class="col">
{% bootstrap_field form.first_name %}
</span>
<span class="col">
{% bootstrap_field form.last_name %}
</span>
<button class="btn btn-success col">Update</button>
</div>
</form>
</div>
</div>
</div>
</div>
Currently if a photo is uploaded, it won't show up in the form response because it's not included within <form></form>. I need it to be outside the form because the locations of the form fields and the photo are different.
One way to do so is to wrap both cards inside the form tags. Is this the best way to do it or is there a simpler way like specifying {% bootstrap_field my_field form=my_form %}
I'm trying to create a social media news feed, with the posts, but I dont want to show the comments just if the user presses the button Show Comments. The problem is that when I press the button of one post, all the post will extend comments. I don't really know how to solve this...
{% for post in posts %}
<div class="container">
<div class="row">
<div class="[ col-xs-12 col-sm-offset-1 col-sm-5 ]">
<div class="[ panel panel-default ] panel-google-plus">
<div class="panel-heading">
<img class="[ img-circle pull-left ]" width="50" height="50" src="{{post.author.profile.image.url}}" alt="Mouse0270" />
<h3 class="author">{{post.author}}</h3>
<h5><span>Shared publicly</span> - <span> {{post.date_posted}} </span> </h5><br>
</div>
<div class="panel-body">
{% if user == post.author %}
<a class="text-right" href="{% url 'post-update' post.id %}"><p>Update</a>
<a class="text-danger text-right" href="{% url 'post-delete' post.id %}">Delete post</a>
{% endif %}
<p>{{post.content}}</p>
{% if post.image %}
<img src ="{{post.image.url}}" width="300" height="300" border="0" class="img-thumbnail">
{% endif %}
{% if post.video %}
<video width="250" controls >
<source src="{{post.video.url}}" type="video/mp4" >
</video>
{% endif %}
</div>
<br/>
<div class="container" >
<button class="btn btn-primary">Add comment</button>
</div>
<br>
<button type="button" class="btn btn-danger btn-block" data-toggle="collapse" data-target="#demo">See comments</button>
<div id="demo" class="collapse">
{% for comment in post.comments.all %}
<div class="container">
<div class="row">
<div class="col-sm-5">
<div class="panel panel-default">
<div class="panel-heading">
<strong>{{comment.author}}</strong> <span class="text-muted">commented at {{comment.created_on|date:"d M g:i a"}}</span>
</div>
<div class="panel-body">
<img class=" img-circle" width="30" height="30" src="{{comment.author.profile.image.url}}">
{{comment.body}}
</div><!-- /panel-body -->
</div><!-- /panel panel-default -->
</div><!-- /col-sm-5 -->
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
The problem is with the collapsable button above {% for comment in post.comments.all %}, but I dont know how to make it unique for every post.
I am trying to render the data from the database one by one by it does not work.
index.html
{% for i in edus %}
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">{{i[0].title}}
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<div class="row">
<div class="col-md-12">
<p>{{i[0].descripiton}} </p>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
If you want to render specific index, you should change:
{{i[0].title}} into {{ i.0.title }}
{{i[0].descripiton }} into {{ i.0.description }}
I'm trying to make it like the following: https://getbootstrap.com/docs/4.3/examples/pricing/
it shows the screen divided into three section
so it should be like this I think...
<div class="row mb-2">
<div class="col-4 bg-danger">
.col-4
</div>
<div class="col-4 bg-warning">
.col-4
</div>
<div class="col-4 bg-success">
.col-4
</div>
</div>
But the problem is I am using django jinja template and for loop. so it groups the whole content.
This is my code but it won't do what's like in the link
<div class="row">
<div class="col-6 col-md-4">
<div class="card">
{% for all_episode in episode %}
<img class="card-img-top" src='{{all_episode.image.url}}'>
<div class="card-body">
<h5 class="card-title">
{{ all_episode.title }}
</h5>
<p class="card-text">{{ all_episode.story |slice:":100" }}...</p>
</div>
<div class="card-footer">
<small class="text-muted">
<span class="h5">
{{ all_episode.series }}
</span> /
<span class="h6">{{ all_episode.season }}</span></small>
</div>
{% endfor %}
</div>
</div>
I have created a blog with Django that I originally looped through each post with:
<div class="container">
<h2 class="latest-posts">Latest Posts</h2>
<hr />
{% for post in posts.all %}
<h4>{{ post.title }}</h4>
<i class="fa fa-calendar" aria-hidden="true"></i> {{ post.pub_date_pretty }}
<img src="{{ post.image.url }}" class="img-responsive center-sm-block" style='width:75%; text-align:center;' />
<br/>
<p>{{ post.summary }}</p>
<br/>
<br/>
{% endfor %}
</div>
Which worked great! But I didn't just want to have a linear list of post and wanted to display each unique post in a bootstrap card which I attempted with this solution:
<div class="container">
<h2 class="latest-posts">Latest Posts</h2>
<hr />
{% for post in posts.all %}
<div class="row">
<div class="col-12 col-md-6">
<!-- Card -->
<article class="card animated fadeInRight">
<div class="card-block">
<h4 class="card-title">{{ post.title }}</h4>
<h6 class="text-muted">Antoine de Saint-Exupéry</h6>
<p class="card-text">{{ post.summary }}</p>
</div>
<div class="card-block text-center">
<div class="btn-group hidden-sm-down hidden-md-down" role="group" aria-label="Card buttons">
Read more
</div>
</div>
<img class="card-img-bottom img-responsive" style='width:100%; text-align:center;' src="{{ post.image.url }}" alt="White sand" />
</article><!-- .end Card -->
</div>
<div class="col-12 col-md-6">
<!-- Card -->
<article class="card animated fadeInRight">
<div class="card-block">
<h4 class="card-title">{{ post.title }}</h4>
<h6 class="text-muted">Antoine de Saint-Exupéry</h6>
<p class="card-text">{{ post.summary }}</p>
</div>
<div class="card-block text-center">
<div class="btn-group hidden-sm-down hidden-md-down" role="group" aria-label="Card buttons">
Read more
</div>
</div>
<img class="card-img-bottom img-responsive" style='width:100%; text-align:center;' src="{{ post.image.url }}" alt="White sand" />
</article><!-- .end Card -->
</div>
</div>
{% endfor %}
</div><!-- End container -->
However each unique post now displays twice in a card:
First row of posts
Second row of posts
Any help would be greatly appreciated! This is my first Django project and I have gotten pretty far already. However this is tripping me up quite badly.
Edit: Just to clarify I need to have a second post in that card is what I'm asking. I want two cards displayed side by side, each with a unique post
<div class="container">
<h2 class="latest-posts">Latest Posts</h2>
<hr />
{% for post in posts.all %}
{% if forloop.counter0|divisibleby:2 %}
<div class="row">
{% endif %}
<div class="col-12 col-md-6">
<!-- Card -->
<article class="card animated fadeInRight">
<div class="card-block">
<h4 class="card-title">{{ post.title }}</h4>
<h6 class="text-muted">Antoine de Saint-Exupéry</h6>
<p class="card-text">{{ post.summary }}</p>
</div>
<div class="card-block text-center">
<div class="btn-group hidden-sm-down hidden-md-down" role="group" aria-label="Card buttons">
Read more
</div>
</div>
<img class="card-img-bottom img-responsive" style='width:100%; text-align:center;' src="{{ post.image.url }}" alt="White sand" />
</article><!-- .end Card -->
</div>
</div>
{% if forloop.counter|divisibleby:2 == False %}
</div>
{% endif %}
{% endfor %}
// When lenght of posts is even the <div> is not close. Close it!</div>
{% if posts.all|length|divisibleby:2 == False %}
</div>
{% endif %}
</div><!-- End container -->