django-templates - 交替渲染屏幕左右两侧的图像
问题描述
我想在 django 模板中动态地在屏幕的左侧和右侧交替渲染图像。我不知道如何渲染它,比如如果它是循环计数器的第 0 个图像应该出现在屏幕的左侧,对于下一次迭代,图像应该在右侧渲染等等。
HTML下面的代码
{% block content %}
<!-- Banner -->
<div class="banner">
<div class="container-fluid banner-content">
<h3>{{page.banner_head}}</h3>
{{page.banner_desc|richtext}}
</div>
</div>
<section class="solution-section">
<div class="container-fluid">
{% for i in page.solutions.all %}
<div class="row pb-5">
<!-- Image -->
<div class="col-md-6">
<div class="solution-image">
<figure class="text-center">
<h6>{{ i.img_text }}</h6>
</figure>
{% image i.sol_img original as img %}
<img src="{{ img.url }}" class="img-fluid solution-index-image" alt="{{ img.alt }}">
</div>
</div>
<!-- Text -->
<div class="col-md-6 solution-desc">
<h5>{{i.sol_head}}</h5>
{{i.sol_desc|richtext}}
<a href="{{i.sol_link}}" class="btn btn-md solution-btn">learn more</a>
</div>
</div>
{% endfor %}
</div>
</section>
{% endblock %}
模型.py
class SolutionPage(Page):
banner_head = models.CharField('Banner Title', blank=True, max_length=255)
banner_desc = RichTextField('Banner Description', blank=True)
content_panels = Page.content_panels + [
MultiFieldPanel([
FieldPanel('banner_head'),
FieldPanel('banner_desc'),
], heading='Banner Section'),
InlinePanel('solutions', label='Solution Details'),
]
class Solution(Orderable):
sol_img = models.ForeignKey(
'wagtailimages.Image',
null = True,
blank = True,
on_delete = models.SET_NULL,
related_name = '+',
verbose_name = 'Solution Image',
)
img_text = models.CharField('Image Text', blank=True, max_length=255)
sol_head = models.CharField('Solution Heading', max_length=100, blank=True)
sol_desc = RichTextField('Solution Description', blank=True)
sol_link = models.CharField('Button Link', max_length=255, blank=True)
page = ParentalKey('SolutionPage', related_name='solutions')
panels = [
ImageChooserPanel('sol_img'),
FieldPanel('img_text'),
FieldPanel('sol_head'),
FieldPanel('sol_desc'),
FieldPanel('sol_link')
]
解决方案
使用 .检查模板中的奇数/偶数{% if forloop.counter|divisibleby:"2" %}
。
推荐阅读
- cakephp - 如何在 2 个不同的变量中创建拆分 URL
- atom-feed - Google 新闻提要媒体内容(如 dia show 或社交媒体嵌入)未正确显示
- r - 在 floor_date 之后添加缺失数据 / 检测并填补缺失的数据空白
- jmeter - JMeter循环索引在循环控制器中总是返回0
- java - 自定义 AbstractAppender 未拾取 log4j2-test.properties 文件模式布局
- substrate - 如何在基材墨水上定义自己的结构
- android - Android 10 及更高版本中的 Wi-Fi 断开和重新连接
- android - 包 com.mikepenz.community_material_typeface_library 不存在
- tableau-desktop - 连接到 Tableau 中的存储过程时出错
- ios - iOS:使网站只能嵌入到我的应用程序中