I'm working on a simple Django project with bootstrap. I have a set of cards being displayed on a page, and the cards are showing just fine (Don't mind the place holder images).
I've been reading the bootstrap docs about cards, but since I have less knowledge of CSS than I'd like, I can't figure out how to simply change the size of the cards so they are larger and stacked in rows instead of one column.
This is my HTML template for this page. It just uses a for-loop to go through my projects and make a card for each. You can see I have the title and text worked out, and the URL to 'See Details'.
{% extends "base.html" %}
{% load static %}
{% block page_content %}
<h1>Projects</h1>
<div class="row">
{% for project in projects %}
<div class="col-md-4">
<div class="card mb-2">
<img class="card-img-top" src="{% static project.image %}">
<div class="card-body">
<h5 class="card-title">{{ project.title }}</h5>
<p class="card-text">{{ project.description }}</p>
<a href="{% url 'project_detail' project.pk %}"
class="btn btn-primary">
See Details
</a>
</div>
</div>
</div>
{% endfor %}
</div>
{% endblock %}
The Base.html is just linking to the bootstrap and all the html for the top of the page. Hopefully the fix is a really simple addition to the template, but I haven't had much luck finding info.
You can use row to create grid row for each card object, and remove the col div.
{% extends "base.html" %}
{% load static %}
{% block page_content %}
<h1>Projects</h1>
{% for project in projects %}
<div class="row">
<div class="card mb-2">
<img class="card-img-top" src="{% static project.image %}">
<div class="card-body">
<h5 class="card-title">{{ project.title }}</h5>
<p class="card-text">{{ project.description }}</p>
<a href="{% url 'project_detail' project.pk %}"
class="btn btn-primary">
See Details
</a>
</div>
</div>
</div>
{% endfor %}
{% endblock %}
Related
I want to pass in an Expression into another expression in a flask jinja2 for Loop to Load an image page
{% for item in items %}
{% include 'includes/items_modals.html' %}
<div class="card-deck" style="width:250px; height:350px">
<div class="card bg-dark" style="width: 18rem; margin-top:20px">
<img src="{{url_for('static', filename='images/{{item.img_path}}')}}" class="card-img-top" alt="...">
<div class="card-body">
<h4 class="card-title" >{{item.name}}</h4>
<p class="card-text" style="color:green; font-weight:bold">₦{{item.price}}</p>
Add to Cart
</div>
</div>
</div>
{% endfor %}
I'm trying to write a small online store on Django and I have a small problem:
I want to display the listveiw immediately after the page loads, but Django does not allow it
I tried to make a display by pressing a button, and it worked, but I would like to make a display as soon as the page loads
urlpatterns = [
path('', views.index, name = 'INDEX'),
path ('prod/', ListView.as_view(queryset=Product.objects.all(), template_name="mainPage/homePage.html"))
]
Can you help me?
my homePage.html:
{% extends "mainPage/wrapper.html" %}
{% load static %}
{% block content %}
<div class="container" style="margin-top: 5%">
{% for val in object_list %}
<div class="card" style="width: 18rem;">
<img src="{{ val.Image_path }}" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">{{ val.Name }}</h5>
{{ val.Category }}
<p class="card-text">{{ val.Description }}</p>
Buy
</div>
</div>
{% endfor %}
</div>
{% endblock %}`
Am creating a website where user will be posting information in the site, but when I post in the site, all post appear in a single card while I want each post to appear in a separate card, How would I do this?? would I have to use Javascript in the front end or python in the back end to accomplish this, and how?
Am using python 3.6.8, and django 2.1.8, I have written a code but all post appear in single materialize card
views
def homepage(request):
return render(request=request,
template_name="main/home.html",
context={"documents":Documents.objects.all}
models
class Documents(models.Model):
docs_name = models.CharField(max_length=200)
police_station = models.CharField(max_length=200)
docs_details = models.TextField()
docs_pic = models.ImageField()
def __str__(self):
return self.docs_name
Home template
{% extends 'main/base.html' %}
{% block content %}
<a class="waves-effect waves-light btn" href="">button</a>
<div class="row">
<div class="col s12 m9" >
<div class="card">
<div class="card-image">
{% for Doc in documents %}
<p>{{Doc.docs_name}}</p>
<p>{{Doc.police_station}}</p>
<p>{{Doc.docs_details}}</p>
<p>{{Doc.docs_pic}}</p>
{% endfor %}
</div>
</div>
</div>
</div>
{% endblock %}
Try:
{% extends 'main/base.html' %}
{% block content %}
<a class="waves-effect waves-light btn" href="">button</a>
<div class="row">
<div class="col s12 m9" >
{% for Doc in documents %}
<div class="card">
<div class="card-image">
<p>{{Doc.docs_name}}</p>
<p>{{Doc.police_station}}</p>
<p>{{Doc.docs_details}}</p>
<p>{{Doc.docs_pic}}</p>
</div>
</div>
{% endfor %}
</div>
</div>
{% endblock %}
You can achieve what you desire by simply adding the looping construct outside the <div class="card"> like this :
{% extends 'main/base.html' %}
{% block content %}
<a class="waves-effect waves-light btn" href="">button</a>
<div class="row">
<div class="col s12 m9" >
{% for Doc in documents %}
<div class="card">
<div class="card-image">
<p>{{Doc.docs_name}}</p>
<p>{{Doc.police_station}}</p>
<p>{{Doc.docs_details}}</p>
<p>{{Doc.docs_pic}}</p>
</div>
</div>
{% endfor %}
</div>
</div>
{% endblock %}
This way your card section alone repeats multiple times.
Earlier since the loop was within the card you got all the items within the same card.
so i have an issue where everything works as it should in chrome but in safari some things are just not displayed as if they weren't there.
in my nav it should have products, about, contact and blog in chrome it displays as such, but in safari the contact link is missing. when i checked the inspector its not even hidden its just not in the code.
and one of my filters on the product page again works fine in chrome but in safari the indiviudals tab just doesn't display any content and the medical schools tab is missing one of its items.
product page
<section class="resource-list-block content-block">
<div class="product-overview col-sm-offset-1 col-sm-10 col-xl-offset-1 col-xl-10 resource-list-block__list">
{% for product_page in product_pages %}
{% if product_page.get_content_model.public %}
<div class="col-sm-6 col-md-4 col-xl-4 cover resource-list-block__list__item resource-list-block__list__item--important filterable product-list-block__list__item filtered-cat filtered-filt" data-category="{{ product_page.get_content_model.specialties.all|specialties }}" data-filter="{{ product_page.get_content_model.tags.all|tags }}">
<a href="{{product_page.get_absolute_url}}">
{% include "includes/product-cover.html" with product=product_page.get_content_model.product %}
</a>
</div>
{% endif %}
{% endfor %}
</div>
product-item section
{% load staticfiles compress %}<div class="sans-serif cover-page">
<figure class="figure-cover" style="background-color:#{{product.theme_color}} !important;">
<div class="cover-img center-block"><img src="{{product.element_icon.url}}" class="img-responsive center-block" alt="{{product.title}} Image"></div>
<div class="product-count">
<div class="text-center"><i class="fa fa-calendar"></i><span class="small-text"> {{ product.updates_per_year }} updates per year</span></div>
</div>
<div class="clearfix"></div>
<div class="text-center type-name">
<h3 class="sans-serif">{{ product_page.get_content_model.product_type | upper }}</h3>
<h4 class="sans-serif hidden-md hidden-sm hidden-xs">{{ product_page.get_content_model.editor_text }} <br> {{ product_page.get_content_model.editor_title_text }}</h4>
<h4 class="sans-serif">ISSN {{ product.issn }}</h4>
</div>
</figure>
<figure class="product-content" {% if product.theme_color = 'AF1F24' %} style="background-color:#f2e4e5 !important" {% endif%}>
<div class="cover-img center-block"><img src="{{product.element_icon_alt.url}}" class="img-responsive center-block" alt="{{product.title}} Image"></div>
<div class="clearfix"></div>
<h2 class="text-center type-name">{{ product.title | upper }}</h2>
<figcaption>
<p>{{ product_page.get_content_model.intro }}</p>
</figcaption>
</figure>
and the nav code
{% load pages_tags i18n future %}{% spaceless %}<ul class="decker-menu generic-nav-list generic-nav-list--horizontal theme" id="hero-nav">
{% for child_page in page_branch %}
{% if child_page.in_menu %}
<li class="decker-menu__item">
<a {% if child_page == page or child_page in page.get_ascendants %} class="active important" {% endif %} href="{% if child_page.slug|slice:":4" == 'http' %}{{ child_page.slug }}{% else %} {{ child_page.get_absolute_url }}{% endif %}" >{{ child_page.title }}</a>
</li>
{% endif %}
{% endfor %}<li class="decker-menu__item login-btn"><a href="#">Menu</li></ul>{% endspaceless %}
had to go into mezzanine on safari then remove the content save and refresh the page then go back and re-add it to fix the issue. then repeated that step to fix the issue in firefox.... so weird
thanks!
I am trying to display the content in my portfolio.html file but nothing is showing up.
portfolio section in home.html:
<!-- portfolio -->
<section id="portfolio">
<div class="container">
<div class="row">
<div class="title">
Some of our work
</div>
<div class="caption">
Costco sample
</div>
{% block portfolio %} {% endblock %}
</div>
</div>
</section>
portfolio.html:
{% extends "home/home.html" %}
{% block portfolio %}
<div class="col-md-4 col-sm-6 portfolio-item">
<a href="#" class="portfolio-link">
<div class="portfolio-hover">
</div>
<img src="../static/images/roundicons.png">
</a>
</div>
<div class="col-md-4 col-sm-6 portfolio-item">
</div>
<div class="col-md-4 col-sm-6 portfolio-item">
</div>
<div class="col-md-4 col-sm-6 portfolio-item">
</div>
<div class="col-md-4 col-sm-6 portfolio-item">
</div>
<div class="col-md-4 col-sm-6 portfolio-item">
</div>
{% endblock %}
template format:
#####index.html
{% load staticfiles %}
{% block content %}{% endblock %}
#############
#####home.html
{% extends "index/index.html" %}
{% load staticfiles %}
{% block content %}
{% block portfolio %}{% endblock %}
{% endblock %}
#############
#####portfolio.html
{% extends "home/home.html" %}
{% block portfolio %}
CONTENT
{% endblock%}
{% endblock %}
#############
Missing content in the inspector:
Since your view is rendering home.html, then you don't want portfolio.html to extend it. Rather, you want home.html to include portfolio.html. Instead of using {% block portfolio %}, use {% include "portfolio.html" %}
However, if your view was going to render portfolio.html, then it would extend home.html.
You are trying to render content from portfolio.html in home.html...try the opposite.
You normally render the child templates
Read https://docs.djangoproject.com/en/1.7/topics/templates/ ...slowly :P. Bassically you create a basic generic template (parent - home.html in your case) that contains some blocks and then extend it and override the blocks on the children (portfolio.html)