Show image childrens children

[Troost]

Hiya,

I'm working on a simple portfolio theme but I've got stuck. Here's the thing...

I have:

Site root 
   Projects
       Category 1 
            Project 1
            Project 2
       Category 2 
            Project 1
            Project 2
       Category 3
            Project 1
            Project 2
   Contact

Each projectpage has an imagefield (head_image) which has to be shown on the main page. But the page 'Projects' only shows the project images of the first category 'Category 1' (So only the first child page of projects). I want them to show all projects from all the category's. How can I fix this?

I'm using this code now
 

<?php include("./header.inc"); ?> 

		<div id="container" data-isotope='{ "itemSelector": ".grid-item", "layoutMode": "fitRows" }'>
				<div class="grid-sizer"></div>
						<?php if($page->numChildren) {
							echo "<ul class='project'>";
							foreach($page->children->child as $child) {
									
								if ($child->head_image) {
								    $image = $child->head_image;  

									echo "<li class='item' ><img src='{$image->url}' class='image'></li>"; 
									}}	

							echo "</ul>";}
						?>

		</div> <!-- END CONTAINER -->

</body>
<?php include("./footer.inc"); ?>

 

Thanks in advance!

[blynx]

Hi Troost,

try something like this:

foreach($page->children as $cat) {
  // maybe echo category stuff here?
  foreach ($cat->children as $project) {
    if ($project->head_image) {
      // echo project image stuff here
    }
  }
}

This loops through the categories first, and for each category looping through the projects. So it will loop through all projects one category after another.
Also you could then echo some category stuff inbetween if you want ...

cheers!
Steffen

[Troost]

Hi Steffen,

Thanks for your comment and help. I've copied your code in, but still won't echo all the projects from the different categories.

 

Got it like this now, or is this to easy thinking?

<?php include("./header.inc"); ?> 

		<div id="container" data-isotope='{ "itemSelector": ".grid-item", "layoutMode": "fitRows" }'>
				<div class="grid-sizer"></div>
						<?php if($page->numChildren) {
							echo "<ul class='project'>";
								foreach($page->children as $cat) {
									
								 foreach ($cat->children as $project) {
    								if ($project->head_image) { 

									echo "<li class='item' ><img src='{$project->url}' class='image'></li>"; 
									}}	

							echo "</ul>";}
						?>

		</div> <!-- END CONTAINER -->

</body>
<?php include("./footer.inc"); ?>

 

[blynx]

Hej,

you forgot to select the head_image in your image tag:

<img src='{$project->head_image->url}' class='head-image'>

This should work?

Also it is better to use more specific classnames which describe the element in more detail - for example you would see at once in your css what kind of image that is - and other reasons ... 

[Troost]

Nope, still won't work :(.

(Thanks for your time) It's just an image feed which is shown on the website so a specific class isn't necessary I think?!

 

<?php if($page->numChildren) {
							echo "<ul class='project'>";
								foreach($page->children as $cat) {

								 foreach ($cat->children as $project) {
    								if ($project->head_image) { 

									echo "<li class='item'><img src='{$project->head_image->url}' class='image'></li>"; 
									}}	

							echo "</ul>";}
						?>

 

[blynx]

Ah well - as long as it is not a complex page. But then if you have different kind of images on one page it will make more sense to think about other names. But I guess you will see that then  

And to the images, uhm hmmm ... uhm ... are you sure every category has a head_image? There are 5 categories (one is empty) in your database but 6 images displayed?
I am pretty sure the code should work but I will have a try on one of my sites which has a similar setup now -

Your code is from the projects template, right?

[Troost]

Yea, I have sorted the templates. The projects under Photography are with the photography.php, same for graphic etc etc. I will sort it out later with. If clicked on photography, the rest of the images wil disappear, and same for other categories.

The category doenst have a head image, its just the projects underneath. The category just just a 'empty' template with only the title displayed.

The code ill posted above is from the category template, the template structure is build up like this

root -> Projects (category template) -> Photography, Graphic etc (category template) -> project (project template)

 

This is the category page

 

This is the projectpage

(The image description and images are for an eventualy further page)

---------------

 

Now I get an syntax error with this

<?php if($page->numChildren) {
	echo "<ul class='project'>";
		foreach($page->children as $cat) {

		foreach ($cat->children as $project) {
    		if ($project->head_image) { 

			echo "<li class='item'><img src='{$project->head_image->url}' class='image'></li>"; 
			}}	

		echo "</ul>";}
?>

But the syntax error gives an error at the end of the document...
When I put the other lines of code back to how it was, the error is gone.

 

 

Thanks for your time, I hope im not confusing with the long sloppy posts

[blynx]

Ok tested the approach here, works fine ... 

Ah, I meant the projects - has every project page an actual image inside head_image? (Well, might be a silly question but who know ^^)
 

[Troost]

Ohhww, why wouldnt it work here?

Ehm yes, i checked it, each projectpage has an actual image inside head_image.

[blynx]

Hej,
just sent you a DM,
maybe send me your site and I can have a look - maybe the error is somewhere else hidden!?!?

[horst]

Hi,

I haven't followed to the end here, but saw something above what I want to mention: using

<?php if($page->numChildren) {

counts hidden / unpublished / protected pages too, per default. This is implemented in $page to give a quick "overview" of totals, but unrelated to their states. This is useful and was implemented for cases where you have lots (thousands!) of children, to give an raw overview. But in your case, with only a few or NO children, you want to query the exact visible / accessible children for guests. You need to use

<?php if($page->numChildren(true)) {

see: http://cheatsheet.processwire.com/page/built-in-methods-reference/page-numchildren-bool/

TLDR

Before Ryan introduced numChildren(false|true), only $page->children()->count() was available, what needed to read / open all childpages and results into much memory and cpu usage and execution time. With numChildren(false|true) we have a much faster alternative. I think the fasted case is with the param set to false, the default. (Thats why it is the default . But this is only my guessing.)

[blynx]

Meanwhile we fixed it, there was some "}" missing somewhere,
thanks for the addition @horst! 

[Troost]

Thanks @Horst for your comment. I'd replaced it!

And @Blynx helped me trough PM. (Thanks!!)
With the following line of code
 

$projects = $pages->get("name=projects");
foreach ($projects->children as $cat) {
  foreach ($cat->children as $proj) {
    if ($proj->head_image) {
      echo $proj->head_image->url."<br>";
    }
  }
}

 

[Robin S]

9 hours ago, horst said:

Before Ryan introduced numChildren(false|true), only $page->children()->count() was available, what needed to read / open all childpages and results into much memory and cpu usage and execution time. With numChildren(false|true) we have a much faster alternative.

Just wanted to add that if, as in the OP's case, you are going to foreach the children then there is no additional penalty to using $page->children()->count() because you will be loading the children into memory anyway.