How can I fix this problem without removing the bootstrap template tags?
Context:
I have the following template schema:
layout.html is my base template
And I have another templates which inherit from layout.html
I am using third party package application django-bootstrap3
My layout.html is:
(The divs amount of navbar and django variables templates does not matter - are just for demonstration)
{% load staticfiles %}
{% load bootstrap3 %}
{% bootstrap_css %}
{% bootstrap_javascript %}
<html lang="es">
{% block head %}
<head>
<title>{% block title_tag %}My APP{% endblock %}</title>
<link rel="stylesheet" href="{% static 'css/main.css' %}">
</head>
{% endblock %}
<body>
<div class="wrapper">
<!-- Nav menu -->
<header>
{% if request.user.is_authenticated %}
{% if userprofile %}
<div class="profile-options">
{% comment %} Begin settings drowdown {% endcomment %}
<div class="name-options-cont">
<div class="name">
<p>{{ userprofile.user.email }} - {{ userprofile.user.enterprise_name }}</p>
</div>
<div class="options">
<div class="drop-down">
<ul>
<li><a href="{% url 'some-url' %}" >Some option</a></li>
<li><a href="{% url 'some-url2' %}" >Some option2</a></li>
<li>Exit</li>
</ul>
</div>
</div>
</div>
</div>
{% endif %}
{% else %}
<div class="registration">
RegistrarseIniciar sesión
</div>
{% endif %}
</header>
<div class="container">
{% if messages %}
{% for message in messages %}
<div class='alert {% if "success" in message.tags %}alert-success{% elif "warning" in message.tags%}alert-
warning{% elif "error" in message.tags %}alert-danger{% endif %} alert-dismissible' role='alert'>
<!-- Boton para cerrar el alert-->
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<!--End Boton para cerrar el alert
Haciendo uso del Django messages framework-->
{% if "safe" in message.tags %}{{ message|safe }}{%else%}{{ message }}{% endif %}
</div>
{% endfor %}
{% endif %}
</div>
{% block body_content %}
{% endblock body_content %}
</div>
<footer>
</footer>
</body>
</html>
My article_detail.html template inherits from layout.html.
In this template I am retrieving an object information in Django, and rendering the specific information of an article post.
In the layout.html the divs amount and django variables templates does not matter - are just for demonstration
{% extends "layout.html" %}
{% load bootstrap3 %}
{% load staticfiles %}
{% block body_content %}
<!-- Right column -->
<div class="search-column">
<div class="post-column">
<div class="info">
<div class="icon">
<img src="{% static 'img/icons/info.svg' %}" alt="">
<span>Información</span>
</div>
<div class="autor">
<p class="title">Autor</p>
<div class="profile">
<div class="img-cont">
<a href="#">
{% if instance.author.avatar%}
<img src="{{ instance.author.avatar.url }}" alt="">
{% else %}
<img src="{% static 'img/default_profile_pic.png' %}" class="img-responsive">
{% endif %}
</a>
</div>
<div class="name-review-cont">
{% comment %} A quien corresponda {% endcomment %}
<a href="#">
{% if instance.author.get_long_name %}
<span>{{ instance.author.get_long_name }}</span>
{% endif %}
{% if instance.author.get_enterprise_name %}
<span>{{ instance.author.get_enterprise_name }} (#{{ instance.author.email }})</span>
{% endif %}
</a>
<p><div class="fb-like" data-href="{{ request.build_absolute_uri }" data-layout="standard"
data-action="like" data-size="small" data-show-faces="true" data-share="true"></div>
</p>
<hr/>
{% comment %}
<img src="{% static 'img/stars.svg' %}" alt="">
<div class="average">
<span>546</span>
<span>valoraciones</span>
</div>
{% endcomment %}
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End right column-->
<!-- Main content -->
<main>
<div class="blog-body">
{% if instance.image %}
<img src="{{ instance.image.url }}" class="img-responsive">
{% endif %}
<div class="title-cont">
<h1>{{ title }} <small>{% if instance.draft %}<span style='color: red'> Borrador</span> {% endif %}{{ instance.publish }}</small> </h1>
{% comment %}
{% if instance.author.has_perm %}
{{ instance.author.has_perm }}
{% endif %}
{% endcomment %}
{% comment %} <h1>{{ title }} <small>{{ instance.timestamp|timesince }}</small> </h1>{% endcomment %}
</div>
<div class="main-text">
{{ instance.content|linebreaks }}<br/>
</div>
</div>
</main>
<!-- End main content -->
{% endblock %}
When I go to the article detail view via browser, I found at design level of following:
I have been checking in Inspect elements and I think (I don't know if I am in right) that there is a <div class="container"> .. </div> element which override this visual space in blank:
I think this in relation that if will does not this <div class="container"> .. </div> element my blue section code, would be located properly and not so far down the page.
This <div class="container"> .. </div> element is brought by django-bootstrap3 which I am using, such as follow in the following picture:
If I go to my layout.html template mentioned previously above, and I remove the following template tags bootstrap related:
{% load bootstrap3 %}
{% bootstrap_css %}
{% bootstrap_javascript %}
and refresh my article_detail.html in the browser, the visual space blank is fixed
Related
Please help me to resolve this issue:
my_image class in custom.css is not reflecting in the product.html file. I'm unable to resolve this issue. class="my_image" in product.html is not taking the alteration that I have provided in the custom.css
custom.css
.my_image{
width:100%;
height:auto;
padding:10px;
}
base.html
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="discription" content="{% block metadiscription %} {% endblock %}">
<link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
<link rel="stylesheet" href="{% static 'css/custom.css' %}">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{% block title %} {% endblock %}</title>
</head>
<body>
<div class="container">
{% include 'header.html' %}
{% include 'navbar.html' %}
{% block content %}
{% endblock %}
{% include 'footer.html' %}
<script src="{% static 'js/popper.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
</div>
</body>
</html>
catagory.html
{% extends 'base.html' %}
{% load static %}
{% block metadiscription %}
{% if catagory %}
{{catagory.description|truncatewords:155 }}
{% else %}
welcome
{% endif %}
{% endblock %}
{% block title %}
{% if catagory %}
{{catagory.name}}--ABC store
{% else %}
see our new collection
{% endif %}
{% endblock %}
{% block content %}
{% if catagory %}
<div>
<div class="row my_row_class">
<div class="mx_auto">
OUR PRODUCT COLLECTION
</div>
</div>
</div>
{% endif %}
<div>
{% if catagory %}
<img class="center" src="{{catagory.image.url}}" alt="{{catagory.name}}" height="200px">
</div>
<div>
<h1 class="text-center my_title">
{{catagory.name}}
</h1>
<p class="text-center text-justify">
{{catagory.description}}
</p>
</div>
{% else %}
<div>
<img class="my_image_padding" src="{% static 'img/banner.png' %}" height="300px" width="1300px">
</div>
<br>
<div>
<h1 class="text-center">OUR PRODUCT COLLECTION</h1>
<p class="text-justify"></p>
</div>
{% endif %}
<div class="container">
<div class="row mx_auto">
{% for product in products.object_list %}
<div class="my_bottom_margin col-12 col-sm-12 col-md-12 col-lg-4">
<div class="card text-center mb-3 shadow" style="min-width:18rem;">
<img class="card-img-top my_image" src="{{product.image.url}}"alt="image not found" height="100px">
<div class="card-body">
<h4>{{product.name}}</h4>
<p>{{product.price}}</p>
</div>
</div>
</div>
{% endfor %}
</div>
<div class="mx_auto">
{% if products.paginator.num_pages > 1 %}
<hr>
<div class="text-center">
{% for pg in products.paginator.page_range %}
{{pg}}
{% endfor %}
</div>
{% endif %}
</div>
<br>
</div>
{% endblock %}
product.html
{% extends 'base.html' %}
{% load static %}
{% block metadiscription %}
{{product.description|truncatewords:155 }}
{% endblock %}
{% block title %}
{{product.name}}--ABC store
{% endblock %}
{% block content %}
<div class="row my_product_row_class">
<div class="mx_auto">
<p> Home | {{product.catagory}}|{{product.name}}</p>
</div>
</div>
<br>
<div class="container">
<div class="row">
<div class="col-md-6 text-center">
<div>
<img class="my_image" src="{{product.image.url}}" alt="{{product.name}}">
</div>
</div>
<div class="col-md-6">
<div >
<h1 class="my_prod_title">{{product.name}}</h1>
<p>Rs {{product.price}}</p>
<p>Product description</p>
<p class="text-justify my_prod_text">{{product.description}}</p>
{% if product.stock <= 0 %}
<p class="text-justify my_prod_text"><b>OUT OF STOCK</b></p>
{% else %}
<a class="btn btn-secondary" href="">ADD TO CART</a>
{% endif %}
</div>
</div>
</div>
</div>
{% endblock %}
The problem is that you have other styles the override your custom style. Try adding the style directly in your HTML file above the element you want to affect and add the CSS !important rule to the properties.
Example
<style>
.my_image{
width:100%!important;
height:auto!important;
padding:10px!important;
}
</style>
<div class="my_image"></div>
This could be a specificity issue with your CSS, in that you may have other styles with a higher specificity overriding your custom styling.
Using the inspector tools in the browser would help you see if this is the issue - https://courses.cs.washington.edu/courses/cse154/19su/resources/assets/debugging/chrome-inspector.html
If this is the case, try making the "my_image" class more specific than the styles you are trying to overwrite:
HTML:
<div class="col-md-6 text-center my_image-wrapper">
<div>
<img class="my_image" src="{{product.image.url}}" alt="{{product.name}}">
</div>
</div>
CSS:
<style>
.my_image-wrapper .my_image{
width:100%!important;
height:auto!important;
padding:10px!important;
}
</style>
I am using django to create a blog where all posts are shown on the home page as well as on pages depending on their subject. While the basics as shown work, I am having difficulty with the following:
This part of base.html is repeated on each page:
<h1>DR SMART.INFO</h1>
<p>the web site for the analytical rugby fan</p>
However this part only shows on index.html and not on other pages eg subject.html or post_detail.html
<p>
<ul>
{% for subject in subjects %}
<li>{{ subject }}</li>
{% endfor %}
</ul>
</p>
I would like it to show on the top of each page.
Thanks for assistance with this.
Roderic
base.html
{% load static %}
<html>
<head>
<title>drsmart.info</title>
<link rel="stylesheet" href="{% static 'css/blog.css' %}">
</head>
<body>
<h1>DR SMART.INFO</h1>
<p>the web site for the analytical rugby fan</p>
<p>
<ul>
{% for subject in subjects %}
<li>{{ subject }}</li>
{% endfor %}
</ul>
</p>
{% block content %}
{% endblock %}
</body>
</html>
index.html
{% extends 'blog/base.html' %}
{% block content %}
{% for post in posts %}
<div>
<h2>{{ post.title }}</h2>
<p>author: {{post.author}}, published: {{post.date_added }}</p>
<p>{{ post.content|linebreaksbr }}</p>
</div>
{% endfor %}
{% endblock %}
subject.html
{% extends 'blog/base.html' %}
{% block content %}
<h2>{{ subject }}</h2>
{% for post in posts %}
{% if post.subject == subject %}
<div>
<h2>{{ post.title }}</h2>
<p>author: {{post.author}}, published: {{post.date_added }}</p>
<p>{{ post.content|linebreaksbr }}</p>
</div>
{% endif %}
{% endfor %}
{% endblock %}
post_detail.html
{% extends 'blog/base.html' %}
{% block content %}
<div class="post">
{% if post.date_added %}
<div class="date">
{{ post.date_added }}
</div>
{% endif %}
<h2>{{ post.title }}</h2>
<p>{{ post.content|linebreaksbr }}</p>
</div>
<div class="comments_section">
{{ comments.count }} comments
{% for comment in comments %}
<div class="comments">
{{ comment.name }}
{{ comment.made_on }}
{{ comment.body | linebreaks }}
</div>
{% endfor %}
</div>
<div class="comments_section">
{% if new_comment %}
<div class="alert alert-success" role="alert">
Your comment is awaiting moderation
</div>
{% else %}
Your views? All fields are required. Your email address will not be published.
<form method="post">
{{ comment_form.as_p }}
{% csrf_token %}
<button type="submit" class="btn btn-primary btn-lg">Submit</button>
{% endif %}
</div>
{% endblock %}
The lightgallery is working but with one big issue with it. it is not shown the image where it shows that in the thumbnail but the main window it is black.
The lightgallery is working but with one big issue with it. it is not shown the image where it shows that in the thumbnail but the main window it is black.
enter image description here
$(document).ready(function() {
$('#lightgallery').lightGallery({
mode: 'slide',
download: false,
});
});
{% extends "keeraapp/base.html" %}
{% load static %}
{% block title %}{{ object.topic }}{% endblock %}
{% block content %}
<script src="{% static 'keeraapp/javascript/jquery.min.js' %}"></script>
<script src="{% static 'keeraapp/javascript/gallery.js' %}"></script>
<script src="{% static 'keeraapp/javascript/lightgallery.min.js' %}"></script>
<script src="{% static 'keeraapp/javascript/picturefill.min.js' %}"></script>
<script src="{% static 'keeraapp/javascript/lg-thumbnail.min.js' %}"></script>
<script src="{% static 'keeraapp/javascript/lg-fullscreen.min.js' %}"></script>
<script src="{% static 'keeraapp/javascript/DeletingConfirmation.js' %}"></script>
<link rel="stylesheet" href="{% static 'keeraapp/css/lightgallery.min.css' %}" type="text/css">
<link rel="stylesheet" href="{% static 'keeraapp/css/one-topic.css' %}" type="text/css">
<input class="declare_checkbox" name="declare_checkbox" id="declare_checkbox" type="checkbox" value= "agree">
<label for="declare_checkbox">
<a class="declare-label">أتعهد بدفع قيمة خدمة هذا الموقع في حال تم التأجير وتقدر بـ 1% من السعر</a></label>
<div class="inner-body" id="inner-body">
<P><center><b><h2>{{ object.topic }}</h2></b></center></P>
<P><center><h5>{{ object.date }}</h5></center></P>
<center><div class="warper-flex">
<div class="country">{{ object.country }}</div>
<div class="city">{{ object.city }}</div>
<div class="neighborhood">{{ object.neighborhood }}</div></br>
<div class="category">{{ object.category }}</div>
<div class="sub_category">{{ object.sub_category }}</div>
<div class="sub_sub_category">{{ object.sub_sub_category }}</div>
</br>
</div></center></br>
<center><div id="lightgallery">
{% for image in images %}
<a href="{{image.image.url}}">
<img src="{{ image.image.url }}" alt="image" width="250px" height="150px">
</a>
{% endfor %}
</div></center>
<center><div class="price-detail">قيمة الإيجار هي <span>{{ object.price| stringformat:'d'}}</span> ويسترد التأمين ومقداره <span>{{ object.insurance|stringformat:'d'}}</span> اذا تم الإرجاع بحالة جيدة</div></center>
<P class="description">{{ object.description}}</P>
<form class= 'new-comment-form'
method='post'>
{% csrf_token %}
<input id="topic_id" name="topic_id" type="hidden" value="{{topic.id}}">
{{comment_form.non_field_errors}}
<p>{{ comment_form.comment }}</p>
{% if request.user is authenticated %}
<p>{{ comment_form.comment }}</p>
{% endif %}
<div class="warp">
<button class="button" id="submit">أرسل</button>
</div>
</form>
<div>
<p>{{ comments.count }} تعليقات</p>
{% for comment in comments %}
<div class="comment-section"><p>{{ comment.comment }} </p></div>
<small><p>بواسطة {{ comment.owner|capfirst }} | منذ {{comment.date|timesince}}</p></small>
{% if request.user == comment.owner %}
<div class="delete" id="delete">
حذف
</div>
{% endif %}
{% endfor %}
</div>
</div>
{%endblock content %}
I've been able to add images to my post with ckeditor which is great but I can't seem to get the images to shrink and be responsive like the rest of the content/text in my post. I've tried a few tutorials and played around with things but nothing seems to work. Thanks.
Here is my BASE.HTML
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="{% static 'portfolio_app/main.css' %}">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Davi Silveira DoP</title>
</head>
<body>
<main role="main">
{% if messages %}
{% for message in messages %}
<div class="alert alert-{{ message.tags }}">
{{ message }}
</div>
{% endfor %}
{% endif %}
{% block content %}{% endblock %}
</main>
<footer class="text-muted">
<div class="container">
<p class="float-right">
Back to top
</p>
<p class="text-muted">Davi Silveira © 2020</p>
<p>Associated with Silveira Brothers Films</p>
</div>
</footer>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
BLOG.HTML
{% extends "portfolio_app/base.html" %}
{% block content %}
<div class="container">
<div class="row">
<div class="jumbotron content-section">
<small class="text-muted">
"Look at the natural light, when it's right and when it's beautiful. Don't mock with it, just use it as it is. If you must make any change, make it deliberately, make it delicately." -Douglas Kirkland
</small>
</div>
</div>
</div>
{% for post in posts %}
<div class="container">
<div class="col-md-12">
<article class="content-section">
<img class="rounded-square article-img" src="{{ post.author.profile.image.url }}">
<div class="body">
<div class="article-metadata">
<a class="mr-2" href="{% url 'user-posts' post.author.username %}">{{ post.author }}</a>
<small class="text-muted">{{ post.date_posted|date:'F d, Y' }}</small>
</div>
<h2><a class="article-title" href="{% url 'post-detail' post.id %}">{{ post.title|safe }}</a></h2>
<p class="article-content">{{ post.content|safe|truncatewords:30 }}</p>
</div>
</article>
</div>
</div>
{% endfor %}
<div class="container">
{% if is_paginated %}
{% if page_obj.has_previous %}
<a class="btn btn-outline-info mb-4" href="?page=1">First</a>
<a class="btn btn-outline-info mb-4" href="?page={{ page_obj.previous_page_number }}">Previous</a>
{% endif %}
{% for num in page_obj.paginator.page_range %}
{% if page_obj.number == num %}
<a class="btn btn-info mb-4" href="?page={{ num }}">{{ num }}</a>
{% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
<a class="btn btn-outline-info mb-4" href="?page={{ num }}">{{ num }}</a>
{% endif %}
{% endfor %}
{% if page_obj.has_next %}
<a class="btn btn-outline-info mb-4" href="?page={{ page_obj.next_page_number }}">Next</a>
<a class="btn btn-outline-info mb-4" href="?page={{ page_obj.paginator.num_pages }}">Last</a>
{% endif %}
{% endif %}
</div>
{% endblock content %}
POST_DETAIL.HTML
{% extends "portfolio_app/base.html" %}
{% block content %}
<div class="py-5 bg-light">
<div class="container">
<div class="row">
<div class="col-md-12">
<article class="content-section">
<img class="rounded-circle article-img" src="{{ object.author.profile.image.url }}">
<div class="body">
<div class="article-metadata">
<a class="mr-2" href="{% url 'user-posts' object.author.username %}">{{ object.author }}</a>
<small class="text-muted">{{ object.date_posted|date:'F d, Y' }}</small>
{% if object.author == user %}
<div>
<a class="btn btn-secondary btn-sm mt-1 mb-1" href="{% url 'post-update' object.id %}">Update Post</a>
<a class="btn btn-danger btn-sm mt-1 mb-1" href="{% url 'post-delete' object.id %}">Delete Post</a>
</div>
{% endif %}
</div>
<h2 class="article-title">{{ object.title }}</h2>
<p class="article-content">{{ object.content }}</p>
</div>
</article>
</div>
</div>
</div>
</div>
{% endblock content %}
POST_FORM.HTML
{% extends "portfolio_app/base.html" %}
{% load crispy_forms_tags %}
{% block content %}
<div class="container col-md-6">
<div class="content-section">
<div class="content-section">
<form method="POST">
{% csrf_token %}
<fieldset class="form-group">
<legend class="border-bottom md-4">Blog Post</legend>
{{ form.media }}
{{ form|crispy }}
</fieldset>
<div class="form-group">
<button class="btn btn-outline-info" type="submit">Post!</button>
</div>
</form>
</div>
</div>
</div>
{% endblock content %}
What am I missing..? Thank you again for your help.
I want to get the last 3 posts by category on a page, except for the current page in this filter.
My code is not working:
{% for cat in page.categories[0] %}
{% for post in site.categories[cat] limit: 3 %}
{% if post.title == page.title %}
{% break %}
{% endif %}
<div class="item">
<a href="{{ post.url | relative_url }}">
<div class="image" style="background-image: url({{ post.image }});"></div>
<div class="item-text main">
<h1>{{ post.title }}</h1>
</div>
</a>
</div>
{% endfor %}
{% endfor %}
You can replace
{% if post.title == page.title %}
{% break %}
{% endif %}
with
{% unless post.url == page.url %}
Full Code
{% for cat in page.categories[0] %}
{% for post in site.categories[cat] limit: 3 %}
{% unless post.url == page.url %}
<div class="item">
<a href="{{ post.url | relative_url }}">
<div class="image" style="background-image: url({{ post.image }});">
</div>
<div class="item-text main">
<h1>{{ post.title }}</h1>
</div>
</a>
</div>
{% endunless %}
{% endfor %}
{% endfor %}