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!
Related
I'm creating a MongoDB web application using pymango, Flask and Jinja2.
In connect with the database and I have three collections, and I can insert new data in the collection but when I render in HTML using Jinja2 I get duplicated rows with same data twice basically. I'm new to python and Jinja.
enter code here
#app.route("/addcar", methods=["GET", "POST"])
def addcar():
if request.method == "POST":
cars = {
"car_image": request.form.get("car_image"),
"car_year": request.form.get("car_year"),
"car_name": request.form.get("car_name"),
"car_design": request.form.get("car_design"),
"car_driver1": request.form.get("car_driver1"),
"car_driver2": request.form.get("car_driver2")
}
specs = {
"spec_engine": request.form.get("spec_engine"),
"car_power": request.form.get("car_power"),
"trasmission": request.form.get("trasmission")
}
stats = {
"races": request.form.get("races"),
"wins": request.form.get("wins"),
"podiums": request.form.get("podiums"),
"poles": request.form.get("poles"),
"fast_laps": request.form.get("fast_laps"),
"constructor_champ": request.form.get("constructor_champ"),
"drivers_champ": request.form.get("drivers_champ"),
"description": request.form.get("description")
}
mongo.db.cars.insert_one(cars)
mongo.db.specs.insert_one(specs)
mongo.db.stats.insert_one(stats)
flash("Car Successfully Added")
return redirect(url_for("get_cars"))
return render_template("addcar.html")`
enter code here
enter code here
{% extends "base.html" %}
{% block content %}
<div class="row row justify-content-center mt-4">
{% for car in cars %}
<div class="card mb-3" style="max-width: 840px;">
<div class="row g-0">
<div class="col-md-4">
<img src="{{ car.car_image }}" class="imgCard" alt="ferrari image">
</div>
<div class="col-md-8">
<div class="card-body">
<ul class="list-group list-group-flush">
<li class="list-group-item"><strong>Year</strong>: {{ car.car_year }}</li>
<li class="list-group-item"><strong>Name</strong>: {{ car.car_name }}</li>
<li class="list-group-item"><strong>Designer</strong>: {{ car.car_design }}</li>
</ul>
{% for spec in specs %}
<ul class="list-group list-group-flush">
<li class="list-group-item"><strong>Engine</strong>: {{ spec.spec_engine }}</li>
<li class="list-group-item"><strong>Power</strong>: {{ spec.car_power }}</li>
<li class="list-group-item"><strong>Trasmission</strong>: {{ spec.trasmission }}</li>
</ul>
{% endfor %}
</div>
</div>
</div>
</div>
{% endfor %}
</div>
enter code here
{% endblock %}
If your html file looks something like this, it will not show replicated statements.
{% extends "base.html" %}
{% block content %}
<div class="row row justify-content-center mt-4">
<div class="card mb-3" style="max-width: 840px;">
<div class="row g-0">
<div class="col-md-4">
<img src="{{ car['car_image'] }}" class="imgCard" alt="ferrari image">
</div>
<div class="col-md-8">
<div class="card-body">
<ul class="list-group list-group-flush">
<li class="list-group-item"><strong>Year</strong>: {{ car['car_year' }}</li>
<li class="list-group-item"><strong>Name</strong>: {{ car['car_name'] }}</li>
<li class="list-group-item"><strong>Designer</strong>: {{ car['car_design'] }}</li>
</ul>
<ul class="list-group list-group-flush">
<li class="list-group-item"><strong>Engine</strong>: {{ spec['spec_engine'] }}</li>
<li class="list-group-item"><strong>Power</strong>: {{ spec['car_power'] }}</li>
<li class="list-group-item"><strong>Trasmission</strong>: {{ spec['trasmission'] }}</li>
</ul>
</div>
</div>
</div>
</div>
</div>
{% endblock %}
In your flask views, change the return statement to this,
return render_template("addcar.html", car=cars, spec=specs)
Assuming that the html written above is the
I made my macbook disk format.
After the format, I included my project.
However, photos are not displayed on the project page.
If I go to a specific product, (single page) this is a photo.
The logo is also visible.
Pictures are not displayed to me only collectively.
Safari didn't see 'css/mdb.min.css'
Maybe I don't have something installed?
Before, everything worked.
Here photo display
product.html
{% extends 'base.html' %}
{% load static %}
{% block title %} {{ product.name }} - PVB {% endblock %}
{% block content %}
<main class="mt-5 pt-4">
<div class="container dark-grey-text mt-5">
<!--Grid row-->
<div class="row wow fadeIn">
<!--Grid column-->
<div class="col-md-6 mb-4">
<img src="{{ product.photo.url }}" class="img-fluid" alt="">
</div>
<!--Grid column-->
<div class="col-md-6 mb-4">
<!--Content-->
<div class="p-4">
<div>
<h2>{{product.product_name}}</h2><hr>
<h5><p>Description</p></h5>
<p class="text-justify"><h6>{{product.description}}</h6></p>
<p class="text-justify"><h6>Weight: {{product.weight}}g</h6></p><hr>
</div>
</div>
</div>
</div>
<hr>
</div>
</main>
{% endblock %}
here no
products.html
{% extends 'base.html' %}
{% load static %}
{% block title %} Offer - PVB {% endblock %}
{% block content %}
<section id="marks">
<div class="container">
<header>
<h1>Our Offer</h1>
</header>
</div>
</section>
<!-- Offers -->
<section class="text-center mb-4 py-4">
<div class="container">
<div class="row">
{% if products %}
{% for product in products %}
<!--Grid column-->
<div class="col-lg-3 col-md-6 mb-4">
<div class="card">
<div class="view overlay">
<img src="{{ product.photo.url }}" class="card-img-top" alt="">
<a href="{% url 'product' product.id %}">
<div class="mask rgba-white-slight"></div>
</a>
</div>
<div class="card-body text-center">
<h6 class="grey-text">{{ product.category }}</h6>
<h5>
<strong>
{{ product.product_name }}
</strong>
</h5>
</div>
</div>
</div>
<!--Grid column-->
{% endfor %}
{% else %}
<div class="col-sm-12 sm-12">
<p>No Products Available</p>
</div>
{% endif %}
</div>
</div>
</section>
{% endblock %}
Check your media folder , May be its empty
I have the following code in one of my templates. As you can see, there is a lot of repetition going on. Hence, I am wondering if I can somehow use Django Template to consolidate this code while achieving the same (or closely comparable) result when it comes to HTML. Namely, I am interested if I can sort the todo entries into two different <ul> tags on the page, depending on the boolean value of todo.todo_completed.
{% block content %}
{% if todo_list %}
<ul class="list-group">
{% for todo in todo_list %}
{% if not todo.todo_completed %}
<li class="list-group-item">
<div class="row">
<div class="col-sm-5">
<a href="{% url 'list:todo-detail' todo.id %}" >{{ todo.todo_name }}</a>
</div>
<div class="col-sm-6">
</div>
<div class="col-sm-1">
{% bootstrap_icon "ok" %}
{% bootstrap_icon "remove-circle" %}
</div>
</div>
</li>
{% endif %}
{% endfor %}
</ul>
<ul class="list-group">
{% for todo in todo_list %}
{% if todo.todo_completed %}
<li class="list-group-item">
<div class="row">
<div class="col-sm-5">
{{ todo.todo_name }}
</div>
<div class="col-sm-6">
</div>
<div class="col-sm-1">
{% bootstrap_icon "ok" %}
{% bootstrap_icon "remove-circle" %}
</div>
</div>
</li>
{% endif %}
{% endfor %}
</ul>
I have a django for loop that is supposed to add items inside a form element. However, when the code executes, django just puts the first element inside the form and puts the following element outside the form html tag.
The code is:
<form action="." method="post" class="basket_summary" id="basket_formset">
{% csrf_token %}
{{ formset.management_form }}
{% for form in formset %}
{% with line=form.instance product=form.instance.product %}
{% purchase_info_for_line request line as session %}
<div class="row no-margin cart-item">
{{ form.id }}
<div class="col-xs-12 col-sm-2 no-margin">
{% with image=product.primary_image %}
{% thumbnail image.original "100x100" upscale=True as thumb %}
<a href="{{ product.get_absolute_url }}" class="thumb-holder">
<img class="lazy" alt="" src="{{ thumb.url }}" />
</a>
{% endthumbnail %}
{% endwith %}
</div> <!-- /.thumbnail holder -->
<div class="col-xs-12 col-sm-5 ">
<div class="title">
{{ line.description }}
</div>
{% trans "Update" %}
{% if user.is_authenticated %}
| {% trans "Save for later" %}
{% endif %}
<div style="display:none">
{{ form.save_for_later }}
{{ form.DELETE }}
</div>
{% for field_errors in form.errors.values %}
{% for error in field_errors %}
<span class="error-block"><i class="icon-exclamation-sign"></i> {{ error }}</span>
{% endfor %}
{% endfor %}
</div> <!-- /.Title holder -->
<div class="col-xs-12 col-sm-3 no-margin">
<div class="quantity">
<div class="le-quantity">
<form>
<a class="minus" href="#reduce"></a>
<input name="form-0-quantity" id="id_form-0-quantity" readonly="readonly" type="text" value="{{ form.quantity.value }}" />
<a class="plus" href="#add"></a>
</form>
</div>
</div>
</div><!-- /.Quantity Holder -->
<div class="col-xs-12 col-sm-2 no-margin">
<div class="price">
{% if line.is_tax_known %}
{{ line.unit_price_incl_tax|currency:line.price_currency }}
{% else %}
{{ line.unit_price_excl_tax|currency:line.price_currency }}
{% endif %}
</div>
</div> <!-- /.Price Holder -->
</div><!-- /.cart-item -->
{% endwith %}
{% endfor %}</form>
What I expect is that django should have multiple <div class="row no-margin cart-item"> items in the form tag but that isn't happening.
How do I fix this?
Looks like you are missing closing form tag </form> at the end.
EDIT: as others mentioned in comments it could be because you have forms inside form. This will result in unpredictable behavior.
This is what I currently has to check if the author has some photos in the related photo model:
{% if author.photo_set.count > 0 %}
<h2>...</h2>
<div style="clear: both;"></div>
<div class="author_pic">
{% for photo in author.photo_set.all %}
<img src="..." />
{% endfor %}
<div style="clear: both;"></div>
</div>
<div style="clear: both;"></div>
{% endif %}
Is this the right way or I can avoid having two queries somehow?
Thanks.
You can use the with tag to avoid multiple queries.
{% with author.photo_set.all as photos %}
{% if photos %}
<h2>...</h2>
<div style="clear: both;"></div>
<div class="author_pic">
{% for photo in photos %}
<img src="..." />
{% endfor %}
<div style="clear: both;"></div>
</div>
<div style="clear: both;"></div>
{% endif %}
{% endwith %}
There is also the empty tag that you can use within a for loop, but that probably doesn't apply to your example.
https://docs.djangoproject.com/en/dev/ref/templates/builtins/?from=olddocs#for-empty
<ul>
{% for athlete in athlete_list %}
<li>{{ athlete.name }}</li>
{% empty %}
<li>Sorry, no athlete in this list!</li>
{% endfor %}
<ul>
AS #pyrospade suggsted, you can look if the photos object exists. Or you could also check the length (check the length template tag) of the list of photo_set as follows:
{% if author.photo_set.all|length > 0 %}
<h2>...</h2>
<div style="clear: both;"></div>
<div class="author_pic">
{% for photo in author.photo_set.all %}
<img src="..." />
{% endfor %}
<div style="clear: both;"></div>
</div>
<div style="clear: both;"></div>
{% endif %}