使用Jinja2模板翻译元素并添加枚举ID？

Question

I am creating pages that display slides from a slideshow (which are stored as images called slide001.png, slide002.png, etc.) along with transcripts of the voiceover. The templates look like this:

<div class="transcript">
<p>Hello, and welcome to the first slide.</p>
<p>This is the second slide.</p>
<p>/...and so on...</p>
</div>

I want this translated into:

<div class="transcript">
<div class="slide">
<img src="slide001.png"/>
<p>Hello, and welcome to the first slide.</p>
</div>
...and so on for each slide...
</div>

ie, each paragraph is wrapped in a div, and an img element is inserted with a consecutively-numbered image reference. I'm doing this with JavaScript right now, but since I'm using Jinja2 to do other things (insert consistent headers and footers, creating forward/back links, etc.), I was hoping I could do the wrap-and-enumerate in Jinja2 as well. Is it possible without heroic hackery?

Answer 1

If you can get the data into the following format in your page then it can be rendered quite nicely.

transcript = [{'image': 'filepath', 'text':'welcome...'},
              {'image': 'filepath2', 'text':'slide2'},
              {'image': 'filepath3', 'text':'slide3'}]

The Jinja can placed inline or moved to a macro but this will do the trick either way:

<div class="transcript">
  {% for slide in transcript %}
  <div class="slide">
    <img src="{{ slide.image }}"/>
    <p>{{ slide.text }}</p>
  </div>
  {% endfor %}
</div>