How to render the content in the wagtail page especially listblock content

this my model file in which i define cards to the wagtail admin from wagtail.models import Page

from wagtail.fields import StreamField

from wagtail.admin.panels import FieldPanel

from strems import Blocks

class TestPage(Page):

"""Page for testing card block rendering."""

template = "strems/test.html"

cards = StreamField(

[("cards", Blocks.cardblocks())],

blank=True,

null=True,

)

content_panels = Page.content_panels + [

FieldPanel("cards"),

]

class Meta:

verbose_name = "Test Page"

verbose_name_plural = "Test Pages"

this is my block.py in which i specify my list block in the strems app

class cardblocks(StructBlock):

title =CharBlock(required=True,help_text="Add text here")

cards=ListBlock(

StructBlock(

[

("image", ImageChooserBlock(require=True)),

("title",CharBlock(required=True,max_length=23)),

("text",TextBlock(required=True,max_length=50)),

("button_page",PageChooserBlock(required=False)),

("button_url",URLBlock(required=False)),

],

)

)

template = "strems/card_block.html"

class Meta:

icon = "placeholder"

label = "blockcards"

ad also this is my html template for render the content {% extends "base.html" %}

{% load wagtailcore_tags %}

{% load wagtailimages_tags%}

{% block content %}

<div class="container">

<div class="container">

<h1>{{ self.title }}</h1>

<div class="row">

{% for card in self.cards %}

<div class="card col-md-4" style="width: 18rem; margin: 10px;">

{% if card.image %}

<img src="{{ card.image.url }}" class="card-img-top">

{% endif %}

<div class="card-body">

<h5 class="card-title">{{ card.title }}</h5>

<p class="card-text">{{ card.text }}</p>

{% if card.button_page %}

<a href="{{ card.button_page.url }}" class="btn btn-primary">Go to {{ card.button_page.title }}</a>

{% elif card.button_url %}

<a href="{{ card.button_url }}" class="btn btn-primary">Visit Link</a>

{% endif %}

</div>

</div>

{% endfor %}

</div>

</div>

{% endblock %}

but my problem is that i can not render the structblock content in the user page view my output look like this enter image description here and i want to be look like this enter image description here in order to display the cards and its content

i try to change my template code but nothing happening

StreamField structure requires accessing block.value when working with custom blocks like StructBlock. Instead of directly looping over self.cards, you need to iterate through the blocks first and then access the List Block content.

{% for block in self.cards %}
    {% if block.block_type == 'cards' %}
        {% for card in block.value.cards %}
            <div class="card col-md-4" style="width: 18rem; margin: 10px;">
                {% if card.image %}
                    <img src="{{ card.image.url }}" class="card-img-top">
                {% endif %}
                <div class="card-body">
                    <h5 class="card-title">{{ card.title }}</h5>
                    <p class="card-text">{{ card.text }}</p>
                    {% if card.button_page %}
                        <a href="{{ card.button_page.url }}" class="btn btn-primary">Go to {{ card.button_page.title }}</a>
                    {% elif card.button_url %}
                        <a href="{{ card.button_url }}" class="btn btn-primary">Visit Link</a>
                    {% endif %}
                </div>
            </div>
        {% endfor %}
    {% endif %}
{% endfor %}
Вернуться на верх