Adding CSS class to individual page sectoins

[Jeremy Gatens]

Hey there.  I am new to Wagtail, and am trying to get it integrated into our Django environment.  So far the installation and setup are going well.  I am currently rendering the Wagtail content to the screen and am now looking to further my progress.  Specifically…

 

How do target individual sections of a page?  In our template I am using {{page.body}}, to render the content to the end-user.  Inside the Wagtail interface, the page has three sections.  So to wit, how would I add a CSS class to the second section? 

 

Any and all help will greatly be appreciated.  Please let me know if you need any additional information from me and I will respond accordingly.  Thanks for reading.  Take care and have a great day.  

Sincerely,

JG

[Matthew Westcott]

Hi Jeremy,

From your description, I'm going to make a couple of assumptions (so forgive me if I'm missing the mark here): your page.body field is a RichTextField, and the three sections of your page are paragraphs (possibly with headings) within that rich text field.

A RichTextField is a single, indivisible unit of content. If you want to enforce a structure on your pages beyond that (and you absolutely should - that's what makes it content management, rather than just A Slightly Rubbish Word Processor...) then you should build that into your page's data model, rather than putting all your content into a single field. Exactly how you do that depends on the structure you're aiming for. For example, if "three sections to a page, with the second section styled differently" is a standard setup for all your StoryPages, you could define your page model with three separate RichTextFields:

class StoryPage(Page):
prologue = RichTextField()
body = RichTextField()
epilogue = RichTextField()

Within your template, you can then add whatever markup you like around these three fields:

{% load wagtailcore_tags %}

<div class="prologue">
{{ page.prologue|richtext }}
</div>
<div class="story">
{{ page.story|richtext }}
</div>
<div class="epilogue">
{{ page.epilogue|richtext }}
</div>

If the number of sections varies from one page to another, but a section consists of a title and a block of body text, then that's a good candidate for an InlinePanel: see http://docs.wagtail.io/en/v1.9/getting_started/tutorial.html#images .

Finally, if your alternate-styled section is allowed to appear at any point in the text (for example, you have a specific styling for block quotes, and in this case the block quote is the second section, but on another page it might be the fourth), then look at StreamField: http://docs.wagtail.io/en/v1.9/topics/streamfield.html

Cheers,
- Matt