Onepager –– render content from subpages

[neophron]

Hi guys,

I'm struggling with my basic knowledge. I want to build a one- or single page website, with different sections. These regions have partially a different background color.

I have, lets say four sections: section_one … till section_four. I created four templates, with some a few fields. Then I created four subpages, and each subpage has its own template.  

The simplest way, to render all subpages is with:

<?php foreach($page->children() as $p){
   echo $p->render(); // will render the above
}
?>

But this will render everything, without any control about the markup.

Then I tried this:

<?php
	$section_one = $pages->get("/home/section_one/");
	echo $section_one->section_body;
?>

But it gives me an error. 

[Tom.]

Hi @neophron

You control the markup yourself: 

<?php foreach($page->children as $section): ?>
	<h1><?=$section->title?></h1>
<?php endforeach; ?>

 

[flydev]

@neophron if you want a cool example of a onepage site with section as subpage, install and take a look at this profile :

 

 

[neophron]

1 hour ago, Tom. said:

Hi @neophron

You control the markup yourself: 

<?php foreach($page->children as $section): ?>
	<h1><?=$section->title?></h1>
<?php endforeach; ?>

 

Thanks Tom,

in your solution I have to create for every section a <h2>textfield</h2> and also for the body.

My first intent was, to use only one field (f.e. for the h2). 

[neophron]

1 hour ago, flydev said:

@neophron if you want a cool example of a onepage site with section as subpage, install and take a look at this profile :

 

 

Ok, this could be my backup ?

I'll have a look at this.

[psy]

@neophron If I read your original post correctly, you want to target each subpage individually for CSS styling, eg background colour, after it's rendered on the home page. If so, then I would add a class of the page name and/or template name and/or page id to the subpage template, eg:

// Sub page template
<div id="p<?=$page->id?>" class="<?=$page->name?> <?=$page->template?>">
  // Your field output stuff here...
</div>

This ensures each home page section has unique style classes and ids to target. Then use your first method to render the subpages on the home page, ie:

<?php foreach($page->children() as $p){
   echo $p->render(); // will render the above
}
?>

Your CSS would then look something like:

.subpage-1 {background-color: blue;}
.subpage-2 {background-color: red;}
.subpage-3 {background-color: green;}

 

[neophron]

19 hours ago, psy said:

@neophron If I read your original post correctly, you want to target each subpage individually for CSS styling, eg background colour, after it's rendered on the home page. If so, then I would add a class of the page name and/or template name and/or page id to the subpage template, eg:

// Sub page template
<div id="p<?=$page->id?>" class="<?=$page->name?> <?=$page->template?>">
  // Your field output stuff here...
</div>

This ensures each home page section has unique style classes and ids to target. Then use your first method to render the subpages on the home page, ie:

<?php foreach($page->children() as $p){
   echo $p->render(); // will render the above
}
?>

Your CSS would then look something like:

.subpage-1 {background-color: blue;}
.subpage-2 {background-color: red;}
.subpage-3 {background-color: green;}

 

Hi, thanks for this idea.

Due to time pressure, I installed the »Sublime PW« profile and started to adapt it.

This single page concept is build upon a Page Reference Field. In every page(= sections) you can throw your html structures.