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 class="swiper-wrapper" 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 class="block-Courses"></div>
#<div class="block-Courses"></div>
#<div class="block-Courses"></div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
/blocks/course_block.html
<div class="{{ classname }}">
<div class="item-courses swiper-slide">
<p class="item-courses__data">{{ self.start_date }}</p>
<div class="item-courses__title">
<h3 class="title3">{{ self.course_name }}</h3>
</div>
<div class="item-courses__text">
<p class="text2">{{ self.course_description }}</p>
</div>
<div class="item-courses__more">
<div class="item-courses__price">
<h4 class="title4">{{ self.course_price }} ₫</h4>
</div>
<a href="#" class="item-courses__link link-hover">More</a>
</div>
<div class="item-courses__image">
<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 class="swiper-wrapper" id="swiper-wrapper-b225a982a905e0c8" aria-live="polite" style="transform: translate3d(0px, 0px, 0px);">
<div class="block-Courses">
<div class=""></div>
</div>
<div class="block-Courses">
<div class=""></div>
</div>
<div class="block-Courses">
<div class=""></div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></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
The <div class="block-Courses"></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 class="whatever-you-like">
{{ course }}
</div>
{% endfor %}
See https://docs.wagtail.org/en/stable/topics/streamfield.html#template-rendering for more ways to render a StreamField value.