Correct structure for optimal cms functionality

I’m not sure how to structure my project.

On the homepage I need to display 4 sections, each section has the same html structure but different css on the html elements.

<section>
    <div>
        <div>
            <img src="">
            <h3></h3>
            <div></div>
        </div>
        <div>
            <p></p>
            <a href="#"></a>
        </div>
    </div>
</section>

This is the html structure I need 4 times but I can’t render the fields in a for loop because I need to add different styling on every container and its child elements.

First I put all the content in the home.txt file and then rendered the fields in default.php, within manual created html containers for each section.

This works and if I create a yml file for the home i’m able to change the content of all the fields in the cms.

But that way I am not able to change the section status in the cms. (if customer wants to hide certain sections) Therefore I created 4 seperate folders with files in /content/home

content/home/section_1/section_1.txt 
content/home/section_2/section_2.txt
content/home/section_3/section_3.txt
content/home/section_4/section_4.txt

And this way I can render the sections in the cms and am able to change status, but when I do the site breaks.

A shortened example of my code in default.php to render the data:

$sections = $page->children()
$first_section = $sections->nth(0)
$second_section = $sections->nth(1)

<section>
   <h3><?= $first_section->title() ?></h3>
    <p><?= $first_section->intro() ?></p>
</section>

<section>
   <h3><?= $second_section->title() ?></h3>
    <p><?= $second_section->intro() ?></p>
</section>

And so on …

What is the best approach for my problem, I can’t find an immediate solution.

Thanks

Hi @Brunelli,

why do you use different text file names when obviously the sections all have the same fields?

What are these different styles you need and where do you want to put them? After all, you could just give those sections a class name with the id of the subpage and style them from there. Or attach this information to each subpage.

Apart from that, you could still go through the subpages in a loop and in that loop, call a snippet per subpage if there is no other way to go about it stylewise.

After all, you could just give those sections a class name with the id of the subpage and style them from there.

This was indeed what I needed, styling worked.

I used this structure

content/home/
      home_section_1/home_section.txt
      home_section_2/home_section.txt
      home_section_3/home_section.txt
      home_section_4/home_section.txt

site/snippets/
      home_section.php

Could you tell me the easiest way to simply get the index number from each section (subpage)?

I tried all kinds of things nothing returns a simple int.

Thanks again!

$subpages = $page->children()->listed();
foreach ($subpages as $subpage) {
  $index = $subpages->indexOf($subpage) + 1; // adding +1 to start at one instead of 0
}