remove empty div and parent - html

Hello I have a HTML that shows all the artworks based on their collections as bellow:now, the collection "No_COLLECTION" is empty but it shows it's collection name and an empty space. I tried to remove it but i couldn't. Please help me to remove all the collections that doesn't have artworks in them.
{% extends "base.html" %}
{% load static %}
{% block content %}
<div id="main" style='min-height:800px;'>
{% with 'No_COLLECTION woodtest Test-2 Culture KASHAN HUMAN mine' as list %}
{% for i in list.split %}
<script>
var level = 0;
</script>
<div class="row" style="position: relative;margin-bottom: 30px;">
<div>{{i}}</div>
<div class="workSeriesThumbnailStrip">
{% for obj in object_list %}
{% if obj.collection == i %}
<script>
var level = level+1;
</script>
<a href="{{ obj.get_absolute_url }}"><img src="{{ obj.image.url }}"
style="float:left;width:67px;height:87px;margin:10px;" ></a>
{% endif %}
{% endfor %}
</div>
<script>
document.write(level);
</script>
</div>
{% endfor %}
<script>
if ($('.workSeriesThumbnailStrip').is(':empty')) {
$('.row').remove();
}
</script>
{% endwith %}
</div>
<div class="clear"></div>
{% endblock content %}

Add if statement. If the list is not empty, put your div inside that if statement body. else just div an empty div.

Related

How to avoid "a lot of {%include%} gives a lot of <footer>"?

When I need to use a lot of {%include%} (content) in html templates - do unnecessary extensions appear for each content inclusion? Effects are also applied to each subsequent inclusion of content...
When I can add content inclusion to the first html template expander, everything is fine.
But when I use "pagination" I need to send "page=posts" to paginator.html. I can't find a way to send this variable to blog.html from layout.html...
And I think that in the future I will have the same problems, and therefore it should be solved.
layout.html
<div class="container body-content">
<div id="content">
{% block content %}
{% endblock %}
</div>
</div>
<div class="container body-content">
<footer>
<hr/>
<p>© {{ year }}. Сайт</p>
</footer>
</div>
blog.html
{% extends "app/layout.html" %}
<!--♕-->
{% block content %}
<h2>{{ title }}</h2><br>
{% for post in posts %}
<hr>
<div class="">
<h2> {{post.title}} </h2>
<p> {{post.posted}} </p>
</div>
<p>
{{ post.description }}
</p>
{% endfor %}
{% include "app/pagination.html" with page=posts %}
{% endblock %}
pagination.html
{% extends "app/blog.html" %}
<!--♕-->
{% block content %}
<div class="pagination">
<span class="step-links">
{% if page.has_previous %}
Предыдущая
{% endif %}
<span class="current">
Страница {{ page.number }} из {{ page.paginator.num_pages }}
</span>
{% if page.has_next %}
Следующая
{% endif %}
</span>
</div>
{% endblock %}
The pagination should be a file that only renders pagination content, not the template around this.
This thus means that you implement the pagination without the {% extends "app/layout.html" %}, so:
{# pagination.html, no extends or block #}
<div class="pagination">
<span class="step-links">
{% if page.has_previous %}
Предыдущая
{% endif %}
<span class="current">
Страница {{ page.number }} из {{ page.paginator.num_pages }}
</span>
{% if page.has_next %}
Следующая
{% endif %}
</span>
</div>
This will prevent the pagination.html to render headers, footers, and other content. You can then simply import the pagination as a utility template.

Why is my first post in my loop indented unexpectedly

When I display my posts using loops. My first post in my loop did gets indented unexpectedly. Below I will provide code and image of the indent.
code:
{% extends 'base.html' %}
{% block content %}
<br/>
<div class="container">
<h1>Posts</h1>
<ul>
<br/>
{% for post in object_list %}
{% if forloop.counter <= 15 %}
<li> {{post.title}}
- {{ post.author.first_name }} {{ post.author.last_name }} <br/> {{post.body}}</li>
<br/>
<style>
a {
text-transform: capitalize;
}
</style>
</ul>
{% endif %}
{% endfor %}
Back
{% endblock %}
I've notice there your <ul> tag is put outside of the loop. But your </ul> is put inside of the loop.
You should move your </ul> outside of the loop
Example

Hide the Iframe scrollbars but still can scroll

Actually, I know that this question has been a lot even just in stackoverflow, but still, the answers I found does not work for me - lots of them are asked long ago. But however, I'm trying to put an iframe inside a web page, and it's from the same origin. The problem is, every time I scroll, these annoying scrollbars came out. I've tried to make changes like adding overflow: hidden (which makes it worse - it disables scrolling!), scrolling="no" (same as overflow, disables scrolling), and more. Is there a simple way that I can remove the scrollbar on the iframe but still can scroll it? CSS are better, but if it can be done in JavaScript at someways, it's also OK. Thanks a lot!!
Update: My code:
the parent page: (things in {%%} and {{}} are jinja templates, I use them to render the template)
<!--
#Author: Sam Zhang
#Date: 2020-04-10 20:05:53
#Last Modified by: Sam Zhang
#Last Modified time: 2020-05-06 17:01:45
-->
{% extends 'base.html' %}
{% block title %}{{ keyword }}{% endblock %}
{% block top %}{% endblock %}
{% block content %}
<nav class="navbar navbar-dark bg-primary fixed-top">
<a class="navbar-brand" href="/">Guangdu <small class="text-light">Baidu</small></a>
<form method="post" class="container-fluid" style="max-width: 60%; margin-left: 0"
action="{{ url_for('baidu.index') }}">
<div class="input-group">
<input class="form-control" name="query" value="{{ keyword }}" id="search" autocomplete="off" type="search">
<button class="btn btn-success" type="submit">Guangdu</button>
</div>
</form>
<a onclick="changeTheme()" href="" class="text-white" title="Change theme"><i class="fa fa-adjust"></i></a>
</nav>
<br><br><br><br>
<div class="iframe-wrap">
<iframe id="iframe iframe-real" onload="$(this).fadeIn(500); show()" seamless="seamless" src="{{ url_for('baidu.search_s', q=keyword, page=cur) }}" class="iframe"></iframe>
</div>
<div class="d-flex justify-content-center" id="load-container">
<div class="spinner-grow text-primary" role="status" id="load">
<span class="sr-only" id="load-sr">Loading</span>
</div>
</div>
</div>
<script>
function hide() {
$("#iframe").hide();
$("#load-container").fadeIn(500);
$("#load").fadeIn(500);
$("#load-sr").fadeIn(500);
}
function show() {
$("#load-container").fadeOut(500);
$("#load").fadeOut(500);
$("#load-sr").fadeOut(500);
}
window.onload = hide();
</script>
{% endblock %}
And my web page in the iframe:
<!--
#Author: Sam Zhang
#Date: 2020-04-10 20:05:53
#Last Modified by: Sam Zhang
#Last Modified time: 2020-05-06 17:26:20
-->
{% extends 'base.html' %}
{% block title %}{{ keyword }}{% endblock %}
{% block top %}{% endblock %}
{% block body %}id="body" style="overflow:auto;height:100%" onload="document.getElementById('body').style.width=document.body.offsetWidth+20+'px'"{% endblock %}
{% block content %}
<style>
</style>
<script>
function change(pn) {
this.parent.location.href = "{{ url_for('baidu.search') }}?q={{ keyword }}&page=" + pn;
}
</script>
{% if results %}
{% for result in results %}
{% if result.title and result.link %}
<div class="container">
{% if result.domain %}
<p class="text-success">
{{ result.domain }}
{% if result.path %}
›
{% for loc in result.path %}
{% if loop.index != result.path | length %}
{{ loc }}
›
{% else %}
{{ loc }}
{% endif %}
{% endfor %}
{% endif %}
</p>
{% endif %}
<h5 id="{{ loop.index }}h5">{{ result.title }}</h5>
{% if result.time %}<p class="d-inline text-muted">{{ result.time }} · </p>{% endif %}<p class="d-inline text-secondary text-wrap" id="{{ loop.index }}">{% if result.des %}{{ result.des }}{% else %}No description{% endif %}</p>
<hr>
</div>
{% endif %}
{% endfor %}
{% else %}
<div class="container">
<p>Keyword {{ keyword }} has np search results</p>
</div>
{% endif %}
<div class="container">
<nav>
<ul class="pagination justify-content-center">
{% if cur != 0 and cur != 10 %}
{% set url = "javascript:change(pn='" + (cur - 1) | string + "')" %}
{% else %}
{% set url = '#' %}
{% endif %}
<li class="page-item{% if cur == 0 %} disabled{% endif %}">
<a class="page-link" href="{{ url }}" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
{% if pages | length <= 10 %}
{% for i in pages %}
<li class="page-item{% if i == cur %} active{% endif %}"><a class="page-link" href="javascript:change(pn='{{ i }}')">{{ i + 1 }}</a></li>
{% endfor %}
{% endif %}
{% if cur < pages | length %}
{% set url = "javascript:change(pn='" + (cur + 1) | string + "')" %}
{% else %}
{% set url = '#' %}
{% endif %}
<li class="page-item{% if cur == pages | length - 1 or cur == 9 %} disabled{% endif %}"{% if cur == 9 %} data-toggle="tooltip" data-placement="top"{% endif %}>
<a class="page-link" href="{{ url }}" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
</div>
{% endblock %}
Kind of a hacky solution, but this will hide the scrollbars by making the frame bigger than the container.
.outer {
width: 500px;
height: 150px;
overflow: hidden;
}
.outer iframe {
width: 520px;
height: 170px;
overflow: auto;
}
<div class="outer">
<iframe src="/"></iframe>
</div>

Changing the background color of the title block of an extended twig template

I have a twig template used for Bootstrap popovers. The code is:
span class="popover-wrapper {% block wrapper_class %}{% endblock %}">
<button
type="button"
class="btn-link popover-link {% block link_class %}{% endblock %}"
tabindex="0"
role="button"
data-toggle="popover"
data-placement="bottom"
data-title="{% block title %}{% endblock %}"
>{% block link_text %}{% endblock %}</button>
<div class="popover-inner-content {% block content_class %}{% endblock %}">
{% block content %}{% endblock %}
</div>
</span>
when extending this template into another html.twig view,
{% embed 'fragments/popover.html.twig' %}
{% block link_class %}more-sections{% endblock %}
{% block link_text %}
<span class="fa fa-info-circle"></span>
{% endblock %}
{% block title %}<div>Contact Info</div>{% endblock %}
{% block content %} .......
When adding style="background-color: blue;" to the title div, it disables the popover appear/disappear functionality. How can I alter the backgrond color of the popover Title section>
You are breaking the HTML by using double quotes inside your title tag.
<button data-title="<div style="background-color: blue;">Contact Info</div>">...</button>
You could solve this by using single quotes
{% block title %}<div style='background-color: blue;'>Contact Info</div>{% endblock %}

django template inheritance: how to NOT display block from parent?

Working on my first Django project. New to templates and inheritance.
I'm using Bootstrap and want a splashy homepage. So I don't want sidebars, just Jumbotron.
But, my index.html inherits from base.html and displays my sidebars which I do want in every other page but my home page. I want everything else, nav, footer, etc. to inherit.
My base.html:
{% block right_panel %}
blah blah blah
{% endblock %}
Is there a way to not inherit this block in my index.html?
Or do I make a standalone index.html template with all of the block from base.html minus those I don't want to display?
What's best practice?
EDIT
Here's the offending piece in base.html:
<div class="col-md-3 right">
{% nevercache %}
{% include "includes/user_panel.html" %}
{% endnevercache %}
<div class="panel panel-default">
<div class="panel-body">
{% block right_panel %}
{% ifinstalled mezzanine.twitter %}
{% include "twitter/tweets.html" %}
{% endifinstalled %}
{% endblock %}
</div>
</div>
</div>
The CSS is rendering: <div class="panel-body">
My page.html:
{% extends "base.html" %}
<!-- no right-panel content-->
{% block right_panel %}{% endblock %}
{% load mezzanine_tags keyword_tags %}
{% block meta_title %}{{ page.meta_title }}{% endblock %}
{% block meta_keywords %}{% metablock %}
{% keywords_for page as keywords %}
{% for keyword in keywords %}
{% if not forloop.first %}, {% endif %}
{{ keyword }}
{% endfor %}
{% endmetablock %}{% endblock %}
{% block meta_description %}{% metablock %}
{{ page.description }}
{% endmetablock %}{% endblock %}
{% block title %}
{% editable page.title %}{{ page.title }}{% endeditable %}
{% endblock %}
{% block main %}
{% endblock %}
When I add:
`{% block right_panel %}{% endblock %}
to the top of page.html, the content doesn't render.
What's the best approach? Should I make a new block and wrap it around the that is being styled and then leave it empty in other templates? Or should I move the offending chunk from base.html to another template file and include it on pages where I want it rendered.
Also, another thing. If I remove {% block right_panel %}{% endblock %} from page.html and put it in gallery.html which inherits from page.html, the content still renders.
Just declare the block as an empty block in your index.html to 'mute' the content from the base.html:
ie, in index.html:
...
{% block right_panel %}{% endblock %}
...
For clarity, if you block some code in base.html:
{% block right_panel %}
<div class="footerlinks">
<ul>
<li>about us</li>
<li>contact us</li>
<li>help</li>
</ul>
</div>
{% endblock %}
It will show up in all templates that extend base.html, unless the block is overridden, thereby replacing the block.
Thus,
{% block right_panel %}{% endblock %}
Will effectively mute the section. It's up to you to then build a replacement into your template that will keep everything in one place.
If your efforts are moving things around on your page, it may be wise to only block the visible parts of the section:
<div class="footerlinks">
{% block right_panel %}
<ul>
<li>about us</li>
<li>contact us</li>
<li>help</li>
</ul>
{% endblock %}
</div>