planting_tpl.html

{% macro optional_link(url) %} {% if url %}
<a href="{{ url }}">{{ caller() }}</a>
{% else %}{{ caller() }}{% endif %} {% endmacro %}

<div class="planting">
  <div style="display: flex; flex-direction: column; gap: 0.5em">
    <div>
      <div style="margin-bottom: 0.5em;">{% call optional_link(planting.url) %}{{ planting.name }}{% endcall %}
      <em>Status: {{ planting.status | safe }}</em>
      {{ planting.description | safe }}</div> {% if planting.image %}{% call optional_link(planting.url)
			%}<img src="./{{ planting.image.path }}" />{% endcall %}{% endif %}
    </div>

    {% for planting in planting.sub %}
    <div class="sub-planting">
      <div>
        {% if planting.image %}{% call optional_link(planting.url) %}
        <img
          style="object-position: top left; object-fit: cover; width: 100%; height: 100%"
          src="{{ planting.image.path }}"
        />
        {% endcall %} {% endif %}
      </div>
      <div>
        {% call optional_link(planting.url) %}{{ planting.name }}{% endcall %}
        <em>Status: {{ planting.status | safe }}</em>
        {{ planting.description | safe }}
      </div>
    </div>
    {% endfor %}
  </div>
</div>