Wagtail: how to change css class in auto-generated block?-CodePudding

I have a StructBlock inside StreamFied:

courses = StreamField([
        ('Courses', StructBlock([
            ('Start_date', CharBlock()),
            ('Name', CharBlock()),
            ('Description', TextBlock()),
            ('Image', ImageChooserBlock()),
            ('Price', CharBlock()),

        ], icon = 'plus', template = 'blocks/course_block.html'))
    ], True)

content_panels = Page.content_panels   [FieldPanel('courses')]

In html i have following structure: /index.html

<div  id="swiper-wrapper-dfa89409b3fe2577" aria-live="polite" style="transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;">
    {{ page.courses }}
    # Html have this structure after rendering
    #<div ></div>
    #<div ></div>
    #<div ></div>
</div>
<div ></div>
<div ></div>

/blocks/course_block.html

<div >
    <div >
        <p >{{ self.start_date }}</p>
        <div >
            <h3 >{{ self.course_name }}</h3>
        </div>
        <div >
            <p >{{ self.course_description }}</p>
        </div>
        <div >
            <div >
                <h4 >{{ self.course_price }} ₫</h4>
            </div>
            <a href="#" >More</a>
        </div>
        <div >
            <img src="{{ image_course.url }}" alt="chocolate-basics">
        </div>
    </div>
</div>

And i want to change class name for course-Block in index page

I was try add form_classname inside the StructBlock

courses = StreamField([
        ('Courses', StructBlock([
            ('Start_date', CharBlock()),
            ('Name', CharBlock()),
            ('Description', TextBlock()),
            ('Image', ImageChooserBlock()),
            ('Price', CharBlock()),

        ], form_classname = 'swiper-wrap' icon = 'plus', template = 'blocks/course_block.html'))
    ], True)

content_panels = Page.content_panels   [FieldPanel('courses')]

But that didn't help me Its create a new div inside course-Block without class attribute like this:

<div  id="swiper-wrapper-b225a982a905e0c8" aria-live="polite" style="transform: translate3d(0px, 0px, 0px);">
<div >
    <div ></div>
</div>
<div >
    <div ></div>
</div>
<div >
    <div ></div>
</div>

<div ></div>
<div ></div>

There was an idea to add a css class through the admin panel, but this idea is not very successful, since the end user does not need fields that will interfere. But still it did not replace the class for the course block

CodePudding user response：

The <div ></div> wrapper is just the standard rendering you get if you render the whole StreamField in one go with {{ page.courses }}. If you want something different, you can loop over page.courses and write the HTML yourself:

{% for course in page.courses %}
    <div >
        {{ course }}
    </div>
{% endfor %}

See https://docs.wagtail.org/en/stable/topics/streamfield.html#template-rendering for more ways to render a StreamField value.