How do I add the value in card.set to src="{% static 'images/Magic/4th Edition/Armageddon.full.jpg' %}" in place of 4th Edition?
{% for card in sets %}
<div class="one-third column portfolio-item">
<div class="content">
<div class="border">
<img class="scale-with-grid" src="{% static 'images/Magic/4th Edition/Armageddon.full.jpg' %}" />
</div>
<center><h5 class="noline">{{card.set}}</h5></center>
</div>
<div class="shadow"></div>
</div>
{% endfor %}
Try this:
<img class="scale-with-grid" src="{% static 'images/Magic/{{ card.set }}/Armageddon.full.jpg' %}" />
EDIT:
Based on your comments, you could try this:
{% with 'images/Magic/'|add:card.set|add:'/Armageddon.full.jpg' as image_path %}
<img class="scale-with-grid" src="{% static image_path %}" />
{% endwith %}
Whit the help of Gocht I got it to work with
{% with card.set|slugify as image_path %}
{% with 'images/Magic/'|add:image_path|add:'/Armageddon.full.jpg' as image_path %}
<img class="scale-with-grid" src="{% static image_path %}" />
{% endwith %}
{% endwith %}
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>
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 %}
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