how to wrap the quantity check in TYPO3 Fluid templates in a loop?

Question

I need to show the image as many times as the amount variable. Now I separately check whether it is equal to 1, or 2, or 3.

How to wrap the quantity check in TYPO3 Fluid templates in a loop?

as a type for ( i=1; if {amount}<i ; i++)

code below works,

<f:if condition="{data.order.dinner.0.amount}===1">
    <f:image src="{component.componentImages}"></f:image>
</f:if>
<f:if condition="{data.order.dinner.0.amount}===2">
    <f:image src="{component.componentImages}"></f:image>
    <f:image src="{component.componentImages}"></f:image>
</f:if>
<f:if condition="{data.order.dinner.0.amount}===3">
    <f:image src="{component.componentImages}"></f:image>
    <f:image src="{component.componentImages}"></f:image>
    <f:image src="{component.componentImages}"></f:image>
</f:if>

but I would like to optimize the code for the case of any amount, something like

<f:for each="{data.order.dinner.0.amount}" as="amount" iteration="iterator">
    <f:if condition="{iterator.index} <= {data.order.dinner.0.amount}">
          <f:image src="{component.componentImages}"></f:image>
    </f:if>
</f:for>

how to will correct first line? Thanks for any ideas!

Answer 1

There is no explicit counting loop in FLUID.

but you may could use a helper array if you know a maximum value:

<f:for each="{0:1, 1:2, 2:3, 3:4, 4:5, 5:6}" as="myIndex" iteration="iterator">
  <f:if condition="{myIndex} <= {data.order.dinner.0.amount}">
    <f:image src="{component.componentImages}" />
  </f:if>
</f:for>

you also may use {iterator.index} or {iterator.cycle} for other kind of arrays.

---

ADDon:

Another option for showing multiple iteration of an image would be a repeating background image, where the size/width of the container is calculated by the number of repeats.
Often this is done by ratings which may include fractions as result from a average calculation. In this way for example you can show 3.14 stars (from 5 stars).
methods to show ratings