CODEWITHSUNDEEP
htmldjangowagtail
msafiri mchomvu
msafiri mchomvu

Reputation: 13

Wagtail page rendering issues - ListBlock content

This is 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"

And this is my HTML template for rendering 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 %}

My problem is that I cannot render the structblock content in the user page view.

My output looks like this:

current output and I want it to look like:

desired output

in order to display the cards and its content.

I have tried modifying my template code but could not resolve this issue.

Upvotes: 0

Views: 44

Answers (1)

Dmitry543
Dmitry543

Reputation: 412

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 %}

Upvotes: 1

Related Questions