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