Question

我想在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 %}

models.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')
]

Answer 1

使用{% if forloop.counter|divisibleby:"2" %}检查模板中的奇/偶。

交替渲染屏幕左侧和右侧的图像

1 个答案: