Homepage with multiple content areas

[bodhic]

Hello ProcessWire community. I'm new to PW and I'm diving in head first on my inaugural project. I have a lot of experience working with ModX and I'm excited to learn something new. I'm just struggling with some initial hurdles in structuring my project. PW is very cool, but also very different from what I'm used to.

Anyway, my question is this... I have a design for a homepage that will have multiple conent areas (8 to be exact) and I'm not sure what the best logic is for structuring my template. I see in the basic example site there's a main column with the body copy and another column for sidebar content. That seems reasonable for two content areas, but with 8 and the possibility of adding more in the future it seems like multiple text fields would be a less than elegant solution.

Thank you in advance for any insights.

[pwired]

PW is very cool, but also very different from what I'm used to.

Working with PW will make you a rapid ex modx'er, like happened more often here   PW has a total open potential that always adapts to your level of experience, wants and needs. Haven't seen any other cms capable of doing that so easily. Dive into it's api and templating and you will see.

I have a design for a homepage that will have multiple conent areas (8 to be exact) and I'm not sure what the best logic is for structuring my template.

Why not simply use a css framework and fill the homepage in any way with any area you want.

There are many of them out there, this is the one Im fond of http://simplegrid.info/

Have a look here and get really pw hooked:

http://processwire.com/talk/topic/4173-grouped-forum-posts-links-articles-tutorials-code-snippets/

[kongondo]

Hi bodhic. Welcome to PW and the forums! We seem to be attracting more and more people who are also familiar with MODX (me being one of them ).

As you've stated, there are various ways you can accomplish this. It all depends on how easy you want it to be, either for yourself or your client and maybe also, just a matter of preference.

One way to go is with those fields in one page, though, I don't think I would go for that. 8 or more content areas may just be too much on one page . Again, it depends on your needs/preferences.

Another approach is to have those "content areas" be child pages themselves. What I mean is this. Create what you want to go into content areas as pages. Using the rich PW API you can easily pull them all in in one template file to output them on your website to display their respective contents in your 8 or more content areas (maybe divs). I hope this makes sense. For other needs (probably not what you are after), there are special fields called Repeaters (like MODX MIGX). These are useful when you want to output content that repeats. 

If you haven't seen it, checkout this thread. It is an attempt to guide those with a MODX background meeting PW for the first time

Feel free to ask questions if any of this doesn't make sense.

Edit:

Just seen PWired's post also links to the above post. His link also has some other wonderful resources

Edited September 13, 2013 by kongondo

[pwired]

More here:

A MODX refugee: questions on features of ProcessWire
http://processwire.c...of-processwire/

Code comparison between modx and processwire.

http://processwire.c...ge-2#entry30349

[MatthewSchenker]

Greetngs bodhic,

What you are talking about sounds feasible and comes down to how you lay out your home page and how you pull content into it. You could, for example, create 8 content types with their own pages, then pull pages from those content types into sections of your home page. You could choose and sort content according to date, a particular kind of material in the content, or other criteria.

Tell us more about your ideas and we can follow up with specific code examples!

Thanks,

Matthew

[diogo]

I would go with the child pages strategy. the tree could be organized like this:

home
-home_content
---area1 (give meaningful names to these)
---area2
---area3
---...
-about
-whatever
-etc

"home_content" need a template, but not a template file. Not having the file will hide it and it's children from the website (see answer #17 below http://processwire.com/talk/topic/4487-homepage-with-multiple-content-areas/?p=47926). The "area" pages would have their own template files (no header, no footer, only their own markup):

<h2><?php echo $page->title?></h2>
<?php echo $page->body?>

Then you can build the homepage like this:

<body>
    <h1>Look at my nice areas of content!</h1>
    <section id="area1">
        <?php echo $pages->get("/home_content/area1/")->render()?>
    </section>
    <section id="area2">
        <?php echo $pages->get("/home_content/area3/")->render()?>
    </section>
    <section id="area3">
        <?php echo $pages->get("/home_content/area3/")->render()?>
    </section>
    <section id="area4">
        <?php echo $pages->get("/home_content/area4/")->render()?>
    </section>
</body>

edit: or, if you get easily tired of typing

<body>
<h1>Look at my nice areas of content!</h1>

<?php
foreach($pages->get("/home_content/")->children as $c) {
    echo "<section id='{$c->name}'>";
    $c->render();
    echo "</section>";
}
?>
</body> 

[bodhic]

Thanks everyone for your replies. You all are great!  pwired, I am definitely Link 3 under "Newbies First Starting Questions". lol!

I guess I could have been a little more detailed with my question, but I was pretty tired when I wrote it. First. I am definitely using css to layout the page, I'm using Foundation/SASS for the layout which has already been prototyped. The design is a "modular grid" that will feature excerpts about my client's different product offerings. I've attached a "down and dirty" Balsamiq mockup that will give you a rough idea of what I'm trying to do.

I need a little more time to go through everyone's responses, but it's looking like either pulling the data from child resources or setting up a repeater (a la migx) might be the best approach.

Thank you all again for your replies. This seems like a great community and it could be just the thing to turn me into an "ex-modxer".

[MatthewSchenker]

Greetings bodhic,

Thanks for sharing a mockup (looks better than my hand-drawn ones).

You got some good ideas from diogo, and there are a lot of possibilities (almost endless actually).

In this post, I offer some ideas of how you could handle each content area on your home page.  Along the way, I try to show various ways to use ProcessWire search and display options.

1. The "Featured Service" Carousel

There are lots of great JQuery carousels out there.  For this example, I use bxSlider.  Let's say you have a content type called "service," and that content type has a field called "intro_image," where you also enter a description.  Let's also say that you have a checkbox field called "featured_service" (when that checkbox is checked, the service is featured).  In the code below, we locate all service pages where you checked the "featured_service" checkbox (meaning it has a value of 1), then we sort the results randomly, and display each "service_image" as a 600px x 450px image.  Each image links to a full "service" page:

<div class="featured_service_block">
	<ul class="featured_service_slider">
		<?php
		$services = $pages->find("template=service, featured_service=1, sort=random");
		foreach ($services as $service)
		{ ?>
			<li><a href="<?php echo $service->url ?>"><img src="<?php echo $service->intro_image->size(600, 450)->url ?>"  alt="" title="<?php echo $intro_image->description ?>" /></a></li>
		<?php
		} ?>
	</ul>
</div>

<script> // Slider script for the "featured services" slideshow
	$('.featured_service_slider').bxSlider({
	captions: true,
	pager: false,
	});
</script>

2. Promo Offers

Next, let's cycle through your "promo offers."  You would create a content type called "promo," and give each page an appropriate title.  Here, we display the titles of 4 "promo offers," sorted by date (newest first), with a link to the full "promo" page:

<div class="promo_offers">
	<$php
	$promos = $pages->find("template=promo, limit=4, sort=-date");
	foreach($promos as $promo)
	{ ?>
		<a href="<?php echo $promo->url ?>"><?php echo $promo->title ?></a>
	<?php
	} ?> 
</div>

3. Additional Services

Now let's set up your summaries and links to "additional_services."  For this, you could have a content type called "additional_service," with fields for "photo," "intro_text," and "intro_image" (which you can see is a common field shared with "service").  By using CSS to style the list items to have 50% width, you could get the layout in your mockup, with a small 100px x 75px photo floated to the left of the "intro text."  The example below shows one way to cycle through 6 "additional services," sorted randomly:

<div id="additional_services_block">
	<ul>
		<?php
		$additional_list = $pages->find("template=additional_service, limit=6, sort=random");
		foreach($additional_services as $additional_service)
		{ ?>
			<li class="additonal_service_box">
				<h4><a href="<?php echo $additional_service->url ?>"><?php echo $additional_service->title;?></a></h4>
				<div class="additional_service_photo">
					<a href="<?php echo $additional_service->url ?>"><img src="<?php echo $additional_service->intro_image->size(100, 75)->url ?>"  alt="" /></a>
				</div>
				<p><?php echo $additional_service->intro_text; ?></p>
			</li>
		<?php
		} ?>
	</ul>
</div>

I have not explored the styling for these elements, but if you need help with that just ask!

Thanks,

Matthew

[onjegolders]

Welcome to the community! I would definitley go with Diogo's approach here.

I often set up what I call "Home Blocks" and then pull them into my home template using a foreach loop.

You could either use pages with a template of Home Blocks like

Home

About

Gallery

Contact

Home Blocks

- Home Block

- Another Home block

- Another one

and then pull in all pages with that template or you could use repeaters and let the user add as many on the home page as they like.

[bodhic]

Cool. Thanks a lot everyone. You've all given me a lot to consider. The hardest part of transitioning from Modx to PW is getting used to the "openess" of PW templates. Without there being one "best" way to set things up, it's initially a little overwhelming. I'm will give Diogo's approach a try and see what I'm able to do with it. MatthwShenker thank you for the detailed response.

Again, this appears to be a really great community and that's encouraging.

[nfil]

Hi! I was looking for some answer to render a carousel, but this one is a bit different from what I've done before. update: Solved.

<div class="featured_service_block">
	<ul class="featured_service_slider">
		<?php
		$services = $pages->find("template=service, featured_service=1, sort=random");
		foreach ($services as $service)
		{ ?>
			<li><a href="<?php echo $service->url ?>"><img src="<?php echo $service->intro_image->size(600, 450)->url ?>"  alt="" title="<?php echo $intro_image->description ?>" /></a></li>
		<?php
		} ?>
	</ul>
</div>

<script> // Slider script for the "featured services" slideshow
	$('.featured_service_slider').bxSlider({
	captions: true,
	pager: false,
	});
</script>

[bodhic]

<?php
   foreach($page->schedule_item as $schedule_item) {
        echo "<article>
            <div><h2>{$schedule_item->title}</h2>";   
    echo "{$schedule_item->body}</div>
          </article>";

    }  
    ?>

Hello again... I'm posting this question here as it's related to my original question.

If I'm using a repeater and I want to have to assign a different class to say... every third item, how would I go about setting that up?

Thanks...

[Martijn Geerts]

Something like this:

foreach($page->schedule_item as $key => $schedule_item) {
	$class = ((($key + 1) % 3) == 0) ? 'third' : 'other';
	echo "<article class='{$class}'>";
	echo $schedule_item->body;
	echo "</article>";
}

Didn't test it, so could be some bug in there.

[bodhic]

Thank you Martijn. That works. Would similar logic apply if I wanted to add a new div after every third i.e. something like <div class="row">?

[Martijn Geerts]

// maybe this works:

$schedules = $page->schedule_item;

$count = $count($schedules);

echo "<div class='row'>";

foreach($schedules as $key => $schedule_item) {

$class = ((($key + 1) % 3) == 0) ? 'third' : 'other';

echo "<article class='{$class} col'>";

echo $schedule_item->body;

echo "</article>";

if($class == 'third' && ($key - 1) < $count) {

echo "</div><div class='row'>";

}

}

echo "</div>";

[dazzyweb]

Hi

Regarding diogo solution.

I tried this and it works fine but I have one issue, the child pages don't seem to be hidden from the site.

So for example if i go to www.mysite.com/home-content/area1 then this section appears as a page on the front end.

Is there some way to prevent this? If I understood right what diogo said this shouldn't show.

My home_content page uses a template that doesn't have a template file as diogo suggested.

[diogo]

It's true, the pages still show, sorry for the wrong info. You can Hide them by setting the permissions to the template of the "home-content" page (untick "view pages" from the guest role).

[dazzyweb]

Thanks diogo

That did the trick

[RyanJ]

I thought I would add my addition to this for a reference as I was just working on a similar situation yesterday.  In my case, I am getting the child of the parent and then the children of the child. 

$menu = "<section class='group'>";
//wrap everything up
      $cats = $pages->get("/parent-page/")->children;
//get the parent children
       foreach ($cats as $cat) {
//list each child of parent in a div container.
        $menu .= "<div>";
        $menu .= "<h2 class='myclass'>$cat->title</h2>";
         if($cat->children) {
// check if child has children?
           $menu .= "<ul>";
            foreach($cat->child->children("limit=1") as $subchild) {
//get children of child in a ul and limit them to 3
           $menu .= "<li><a href='{$subchild->url}'>$subchild->title</a></li>";
         }
         $menu .= "</ul>";
        }
        $menu .= "<span><a href='{$cat->url}'>See More</a></span>";
// get the child link
        $menu .= "</div>";
       }
      $menu .= "</section>";
      echo $menu;

Edited November 14, 2013 by RJay