Assigning pages to a Subnavigation, featuring those pages on homepage

[Alex]

Hi,

I am working on a portfolio website, my first Processwire site.

I have made a 'portfolio-page' template to display multiple images, they appear here in my top navigation as 'Work One & 'Work Two'

http://www.alexcreedy.com/cog/

I would like to create subnavigation in my sidebar for these 'portfolio-page' template pages, and so they do not appear in the top navigation.

Also would like to feature these pages on the homepage as a Thumnail image with Title and description, i have attached an image which roughly shows what I mean.

Also here is my 'portfolio-page' template if any help:

<?php
/**
* Page template
*
*/
include("./head.inc");
echo $page->body;

//Display images if available
if ($page->portfolio_images) {
foreach($page->portfolio_images as $image) {
$thumbnail = $image->size(550,0);
echo "<div class='workWrap'><a class='workImg' href='{$image->url}'><img class='photo' src='{$thumbnail->url}' alt='{$image->description}' /></a>";
echo "<div class='workDescript'>{$image->description}</div></div>";
		}
}
include("./foot.inc");

Any pointers or links to examples much appreciated,

cheers,

Alex

[ryan]

I would like to create subnavigation in my sidebar for these 'portfolio-page' template pages, and so they do not appear in the top navigation.

Most commonly you would use your top-level of pages (those that have 'home' as the parent, in the tree) for your top navigation. Typically you wouldn't use those pages for stuff that would be intended for subnavigation. Assuming subnavigation consists of the children of a top-level page, you can retrieve that top-level page no matter where you are in the structure by referring to the rootParent property of $page. Assuming you have a URL like /a/b/c/ then the pages represented by a, b and c will all refer to 'a' as the rootParent. Very often, I use this for subnavigation:

<div id='topnav'><?php echo $pages->get('/')->children()->render(); ?></div>

<?php if($page->url != '/'): ?>
<div id='subnav'><?php echo $page->rootParent->children()->render(); ?></div>
<?php endif; ?>

Also would like to feature these pages on the homepage as a Thumnail image with Title and description, i have attached an image which roughly shows what I mean.

You'll want to do something like this from your homepage template:

<?php
echo "<ul id='portfolio_list'>";

$items = $pages->get('/portfolio/')->children("limit=6");
foreach($items as $item) {
$thumb = $item->image->size(150, 200);
echo "<li><a href='{$item->url}'><img src='{$thumb->url}' alt='{$thumb->description}'>";
echo "{$item->title}<br />{$thumb->description}</a></li>";
}

echo "</ul>";

[Alex]

Hi Ryan,

Thanks for that, I have got the subnavigation working so it shows the children of the page you are on.

http://www.alexcreedy.com/cog/

What I would like to do is display the children of the portfolio page all the time in the sidebar.

Also I don't really want the parent portfolio page visible in the top navigation, as that particular page won't be displaying any content. Is it possible to 'hide' that page but still call on its children?

thanks

Alex

[apeisa]

Yes, you can set your portfolio page hidden and it shouldn't be visible on top navigation anymore.

Regarding sidebar: did you tried the code example Ryan posted? It does exactly what you are looking for (I added few comments):

<?php
echo "<ul id='portfolio_list'>";
$items = $pages->get('/portfolio/')->children("limit=6"); // Here we take children of portfolio page (limit=6)
foreach($items as $item) { //Loop through them
    $thumb = $item->image->size(150, 200); // Small image from each, optional. Assuming that template that your portfolio children pages use have a field called "image"
    echo "<li><a href='{$item->url}'><img src='{$thumb->url}' alt='{$thumb->description}'>"; // If you don't use image there, then remove img tag here
    echo "{$item->title}<br />{$thumb->description}</a></li>";
}
echo "</ul>";

[Alex]

Thanks for adding the comments to that code, I want it to display the thumbnails, title & description on my Homepage Template, I'm getting an error: http://www.alexcreedy.com/cog/

Call to a member function size() on a non-object (line 15 of /home/alexcree/public_html/cog/site/templates/home.php)

Here is my Home Template:

<?php
/**
* Home template
*
*/
include("./head.inc");
echo $page->body;
echo "<ul id='portfolio_list'>";
$items = $pages->get('/portfolio/')->children("limit=6"); // Here we take children of portfolio page (limit=6)
foreach($items as $item) { //Loop through them
		$thumb = $item->image->size(150, 200); // Small image from each, optional. Assuming that template that your portfolio children pages use have a field called "image"
		echo "<li><a href='{$item->url}'><img src='{$thumb->url}' alt='{$thumb->description}'>"; // If you don't use image there, then remove img tag here
		echo "{$item->title}<br />{$thumb->description}</a></li>";
}
echo "</ul>";
include("./foot.inc");

Regarding the Sidebar, I was hoping to display a list of links to the children of the portfolio page. At the moment it displays a list of links specific to the page you are on, so it changes.

This is the code used to display the links in the sidebar right now:

<div id='topnav'><?php echo $pages->get('/')->children()->render(); ?></div>
   <?php if($page->url != '/'): ?>
   <div id='subnav'><?php echo $page->rootParent->children()->render(); ?></div>
   <?php endif; ?>
		    </div>

I would like it to always remain showing the portfolio children links.

Thanks,

Alex

[ryan]

I'm guessing that you are getting that error because $item->image has no file attached. Also, we're assuming your field is named 'image'. But since it's possible items may not have images, you'd want to put this as the first thing in your foreach($items as $item):

if(!$item->image) continue; // skip because there is no image

Regarding the Sidebar, I was hoping to display a list of links to the children of the portfolio page. At the moment it displays a list of links specific to the page you are on, so it changes.

In that case, replace $page->rootParent->children()->render() with $pages->get("/portfolio/")->children()->render();

[Alex]

You're right, I was using an 'images' field instead of an 'image' field, so I have corrected that on my portfolio template in the admin area. I'm getting new errors on my page now:

http://www.alexcreedy.com/cog/

Exception: Method Pageimages::size does not exist or is not callable in this context (in /home/alexcree/public_html/cog/wire/core/Wire.php line 231)

#0 /home/alexcree/public_html/cog/site/templates/home.php(15): Wire->__call('size', Array)

#1 /home/alexcree/public_html/cog/site/templates/home.php(15): Pageimages->size(150, 200)

#2 /home/alexcree/public_html/cog/wire/core/TemplateFile.php(88): require('/home/alexcree/...')

#3 /home/alexcree/public_html/cog/wire/core/Wire.php(267): TemplateFile->___render()

#4 /home/alexcree/public_html/cog/wire/core/Wire.php(229): Wire->runHooks(Array, Array)

#5 /home/alexcree/public_html/cog/wire/modules/PageRender.module(236): Wire->__call('render', Array)

#6 /home/alexcree/public_html/cog/wire/modules/PageRender.module(236): TemplateFile->render('render', Array)

#7 /home/alexcree/public_html/cog/wire/core/Wire.php(267): PageRender->___renderPage()

#8 /home/alexcree/public_html/cog/wire/core/Wire.php(229): Wire->runHooks(Object(HookEvent))

#9 /home/alexcree/public_html/cog/

I'll include my Home Template and Portfolio Template here,

(Although I have now added the image field to my Portfolio template in the Admin area, I am not currently displaying that image field on my Portfolio template file, incase that is the problem)

Home Template:

<?php
/**
* Home template
*
*/
include("./head.inc");
echo $page->body;
echo "<ul id='portfolio_list'>";
$items = $pages->get('/portfolio/')->children("limit=6"); // Here we take children of portfolio page (limit=6)
foreach($items as $item) { //Loop through them
		$thumb = $item->image->size(150, 200); // Small image from each, optional. Assuming that template that your portfolio children pages use have a field called "image"
		echo "<li><a href='{$item->url}'><img src='{$thumb->url}' alt='{$thumb->description}'>"; // If you don't use image there, then remove img tag here
		echo "{$item->title}<br />{$thumb->description}</a></li>";
}
echo "</ul>";
include("./foot.inc");

Portfolio Template:

<?php
/**
* portfolio-page template
*
*/
include("./head.inc");
echo $page->body;

//Display images if available
if ($page->portfolio_images) {
foreach($page->portfolio_images as $image) {
$thumbnail = $image->size(550,0);
echo "<div class='workWrap'><a class='workImg' href='{$image->url}'><img class='photo' src='{$thumbnail->url}' alt='{$image->description}' /></a>";
echo "<div class='workDescript'>{$image->description}</div></div>";
		}
}
include("./foot.inc");

Regarding the sidebar list of links, it is working now. I had tried something similar to what was suggested which is encouraging. Thanks for the help to get it working.

Thanks,

Alex

[ryan]

Exception: Method Pageimages::size does not exist or is not callable in this context (in /home/alexcree/public_html/cog/wire/core/Wire.php line 231)

This is the error you will get if you try to call size() on an array of images (i.e. a multi image field as opposed to a single image field). You mentioned that you changed it to a single image field, but you might need to double check that. Of course, if you need a mult image field, then keep it. But just grab the first image off it before calling size(), i.e.

$image = $page->images->first();
$thumb = $image->size(100,100); 

[Alex]

I'm not quite there yet, sorry this has been dragging on.

I'm still getting an error on my home page where I am trying to display a thumbnail, title & description from my portfolio template:

Call to a member function size() on a non-object (line 16 of /home/alexcree/public_html/cog/site/templates/home.php)

It would be ideal to grab the first image from the images field which is on my portfolio template (attached screen grab)

This is now my home template where i have tried using Ryans code for grabbing the first image from the images field... obviously i don't have it right yet:

<?php
/**
* Home template
*
*/
include("./head.inc");
echo $page->body;
echo "<ul id='portfolio_list'>";
$items = $pages->get('/portfolio/')->children("limit=6"); // Here we take children of portfolio page (limit=6)
foreach($items as $item) { //Loop through them
	    $image = $page->images->first();
  $thumb = $image->size(100,100);
	    echo "<li><a href='{$item->url}'><img src='{$thumb->url}' alt='{$thumb->description}'>";
	    echo "{$item->title}<br />{$thumb->description}</a></li>";
}
echo "</ul>";
include("./foot.inc");

Is it because my template code above is trying to call on an image field instead of an images field?

Thanks

Alex

[Pete]

What you've done is grabbed the pages into an array called $items, so $page isn't relevant further down (easy mistake to make).

Try changing this:

$image = $page->images->first(); 

to this:

$image = $item->images->first();

[Alex]

Thanks for all the help, all working well now.

One more question before I stop this thread:

Can I use the image thumbnail module on the thumbnails I have been displaying on my home page template, given they are coming from an 'images' field,

or does it have to be an 'image' field to use that module?

Alex

[apeisa]

It works on multiple images too.