Displaying grandchildren images on parent page

[Davabo]

Hey guys,

Currently im building a shopping cart for my processwire site.

The layout right now is like this

Home

  About

  FAQ

  Shop

     Socks

        Sock 1

        Sock 2

        Sock 3

     Shoes

        Shoe 1

        Shoe 2

        Shoe 3

     Jackets

        Jacket 1

        Jacket 2

        Jacket 3

Basically each sub-item page like "sock 1","shoe 1" has its own page with the title/image/price etc... And what im trying to do now on the "Shop" page is display all the grand-children page images like "sock1/sock2/sock3/shoe1/shoe2/shoe3" etc.. in a gallery so when the user clicks one of the images it brings them straight to the item page.

Then the "filter" pages like "socks", "shoes", "jackets" are going to be sub-headings within the shop page that when clicked will show all the items under that filter. So if someones on the main shop page, and clicks the sub heading socks, then I want only the sock items to show up in the gallery. The same for shoes and jackets also.

Ive been messing around with all the grand children code i can find on the forum and the site and i can't get anything even slightly working .

I am very new with php so this is quite a struggle, i really hope you guys understood me and have any solutions. 

Thank you

Edited April 8, 2016 by LostKobrakai
Moved to Getting Started

[BitPoet]

It's easy to overcomplicate things when reading through all the threads, so I'll try to draw up a simple example. In your Shop template's PHP code, you'll only need to iterate over your children (optionally filtered by template to only get your clothing categories) for the sub headline, then iterate over the clothing category's children to get all the articles for the gallery.

<?php

foreach($page->children as $category) {  // optionally $page->children("template=your_category_template")
  echo "<p class='category'><a href='$category->url'>$category->title</a></p>\n";
  echo "<div class='article_gallery'>\n";
  foreach($category->children as $article) {
    echo "<a class='gallery' title='$article->title' href='$article->url'><img src='$article->imagefield->url'></a>\n";
  }
  echo "</div>\n";
}

I've used an assumed name for your pageimages field of "imagefield", this needs to be adapted to match your setup of course. Also, if the image field is set to return multiple images, you need to cater to that too using $article->imagefield->first->url.

In your template for the category (shoes, socks etc.) you just need the inner loop. It may be tempting to use the same template for Shop and categories, but in the long run, it'll be easier to keep things concise with individual templates.

[Davabo]

Thank you for your super helpful response.

Ive followed your instructions and i adapted the code to suit my own setup.

I should have mentioned each item page has 2 images in it. When i run the code below, the page titles show up but the images only form some sort of array.

Heres my code, and heres the output

my code:

<?php

foreach($page->Children() as $category) {  // optionally $page->children("template=your_category_template")
  echo "<p class='category'><a href='$category->url'>$category->title</a></p>\n";
  echo "<div class='article_gallery'>\n";
  foreach($category->Children() as $article) {
    echo "<a class='gallery' title='$article->title' href='$article->url'>
          <img src= '$article->product_image->first()->url'>
          </a>\n";
  }
  echo "</div>\n";
}

?>

And when the images do not load, and i inspect the elements, its showing the images linking like this

          <img src= 'text.png|text-1.png->first()->url'>
        

So it looks like the images have to be split from the array somehow? Ive tried different variations of the line "$article->product_image->first()->url' with no luck.

Thanks for your help

[Macrura]

probably the best way is to make a Wirearray() and then add all of the images to that, then iterate of the Wirearray();

(you would iterate over the child pages and import the images to the wirearray;)

also be careful because if you have the same named image in the wirearray it will de-duplicate it.

http://processwire.com/api/arrays/

[BitPoet]

Try it like this (notice the curly braces where the url of the first image is retrieved):

    echo "<a class='gallery' title='$article->title' href='$article->url'>
          <img src='{$article->product_image->first()->url}'>
          </a>\n";

Of course, you could simply move the PHP code outside of the string:

          <img src= '" . $article->product_image->first()->url . "'>

If you want to retrieve the url of the second image, you can use $article->product_image->eq(1)->url.

[horst]

and if you want to retrieve an image by name

$article->product_image->get("name=picture.jpg")->url