Jump to content

Onepager –– render content from subpages


neophron
 Share

Recommended Posts

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. 

Link to comment
Share on other sites

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). 

Link to comment
Share on other sites

@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;}

 

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

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.  

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...