I'm using liquid to add content for two <p> inside the column-right <div>:
<div class="page-width">
{% capture image_layout %}
<div class="feature-row__item feature-row__image-wrapper">
{% if block.settings.image != blank %}
<div class="feature-row__image feature-row__image--{{ block.id }} lazyload" data-sizes="auto" data-bgset="{% render 'bgset', image: block.settings.image %}"></div>
<noscript>
<div class="feature-row__image feature-row__image--{{ block.id }}" style="background-image: {{ block.settings.image | img_url: 'master' }}"></div>
</noscript>
{% else %}
<div class="feature-row__image feature-row__image--{{ block.id }}">{{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}</div>
{% endif %}
<div class="column-right">
{%- if block.settings.text != blank -%}
<p class="column-right__text">{{- block.settings.text -}}</p>
{%- endif -%}
{%- if block.settings.smalltext != blank -%}
<p class="column-right__smalltex">{{- block.settings.smalltext -}}</p>
{%- endif -%}
</div>
</div>
{% endcapture %}
But, at the frontend, I get four <p>:
<div class="column-right">
<p class="column-right__text"></p>
<p>We are a bunch of passionate people</p>
<p></p>
<p class="column-right__smalltex"> you can focus on what really matters, potato chips</p>
</div>
Screenshot here
Anybody knows why this happened??
Finally I found out that it was an id problem. It seems that other block had the same id, so it would render one <p> for each block!
Related
Attached is the wagtail template I have written so far.
{% load wagtailimages_tags %}
<section class="container">
<h2 class="text-center">{{ self.title }}</h2>
<div class="general-alumnae-deck">
{% for member in self.general_member_cards %}
{% if member.photo %}
{% endif %}
{% endfor %}
</div>
</section>
Ultimately I want the code to look like:
<h2>Avatar Images</h2>
<ul>
<li><img src="img_avatar.png" alt="Avatar" class="avatar"> <h3> Bleu </h3></li>
<li><img src="img_avatar2.png" alt="Avatar" class="avatar"> <h3> Red </h3></li>
</ul>
</body>
</html>
with the image popping up next to the "h3" tag if there exists a photo of course the image will be {{}} double bracketed for dynamic template.
It's not clear whether the image is from Wagtail's image library, but if it is, you should use the {% image %} tag. See https://docs.wagtail.org/en/stable/topics/images.html#
{% with self.general_member_cards as cards %}
{% if cards %}
<ul>
{% for member in cards %}
<li>
{% if member.photo %}
{% image member.photo fill-80x80 %}
{% endif %}
<h3>{{ member.name }}</h3>
</li>
{% endfor %}
<ul>
{% endif %}
I have also used a {% with %} tag to cache self.general_member_cards in the template, in case this requires a database query. If it does not, you can skip that step.
You more or less have it already ...
<section class="container">
<h2 class="text-center">{{ self.title }}</h2>
<div class="general-alumnae-deck">
<ul>
{% for member in self.general_member_cards %}
<li>
{% if member.photo %}
{% image member.photo fill-50x50 as avatar %}
<img src="{{ avatar.url }} class='avatar">
{% endif %}
<h3 style="display:inline;">{{ member.name }}</h3>
</li>
{% endfor %}
</ul>
</div>
</section>
You said you wanted image next to the <h3>, so you need to override the display:block property of the h3 tag and make it inline as above (or create a css class for this).
EDIT: Updated to use wagtail's image template tag to get the rendition of the member photo
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.
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>
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.
I've got the following Jekyll index
---
layout: default
title: My favourite sandwiches
---
<section class="home">
{% for post in site.posts %}
<article class="column">
<img src="{{ post.image }}">
{{ post.title }}
</article>
{% endfor %}
</section>
My site will have 3 articles (blocks) next to each other, like tiles.
However, I would like to add a class on the first and third article tag so I can add different styling.
I wanted to know how to add this behaviour and if there is a way to index something eg. class="first" if index == 3/1
The html I wanted is to look something like this
<section class="home">
<article class="column first">
<img src="images/bigsandwich.jpg">
My big sandwich
</article>
<article class="column">
<img src="images/icecreamsandwich.jpg">
Icecream sandwich
</article>
<article class="column last">
<img src="images/sushisandwich.jpg">
Sushi sandwich
</article>
</section>
Thanks you for your patience and time.
Liquid's for loops have helper variables available, like forloop.first and forloop.last. See documentation here.
In your case, I would try:
---
layout: default
title: My favourite sandwiches
---
<section class="home">
{% for post in site.posts %}
{% if forloop.first %}
<article class="column first">
{% elsif forloop.last %}
<article class="column last">
{% else %}
<article class="column">
{% endif %}
<img src="{{ post.image }}">
{{ post.title }}
</article>
{% endfor %}
</section>