How to output sibling children images on index

Kirby 2 Solved ✅
1

Hey guys,

My site is currently built like this:

Home.php
About.php
    About-1.php
    About-2.php
    About-3.php
Contact.php

Inside the 3 about children pages I currently have images inside my structure field in my blueprints. I am trying to pull these images to the main home page.

About child pages blueprint:

`featuredimage: 
    label: Slider Image
    type: structure
    width: 1/4
    entry: >
      <img src="{{image}}" />
    fields: 
      image:
        label: Image
        type: select
        options: query
        query:
          fetch: files
          value: '{{url}}'
          text: '{{filename}}'`

So logically, To output these images onto home.php I would first have to access my sibling about page, then access its children and then the image fields.

<?php $images = $pages->find('about'); ?>
			<?php $imagechilds = $images->children(); ?>
		  		<?php foreach($imagechilds as $m): ?>
		  			<?php foreach ($m->featuredimage() as $i): ?>
		  				<img src="<?php echo $i["image"];?>">
		  			<?php endforeach; ?>

I have been trying code like this so far but I’m having zero luck. If anyone could help it would be greatly appreciated. Thank you.

2

Hello @davabo
I think something similar has already been discussed on the forum. One of the solutions would be

 $aboutPage = $page('about');
   $imagechilds = $aboutPage->children()->files()->filterBy('type', 'image');

And then loop through them.

Reference link:

3

If I haven’t inserted any typos, this should work:

<?php
 $childPages = page('about')->children();
 foreach($childPages as $p): ?>
   <?php foreach ($p->featuredimage()->toStructure() as $item): ?>
	<img src="<?php echo $item->image();?>">
   <?php endforeach; ?>
<?php endforeach ?>
4

Thank you very much for both replies, they really helped!

The images are now being output onto the home page.

But I have one more question, How do i single out the specific images?

For example, since I have 3 child pages, each with 1 image on each page, when i ran that code above all 3 images appeared. When I only want the one from each specific child page.

Let me take a screenshot and show you what I mean.

Screenshot

I want a single image in each, not 3 inside 1. I tried using the offset value but that didn’t work.

So for example, The first child page image should be in row 1, the second row 2, the third row 3 etc…

5

Could you share your template code?
Judging by the screenshot you’re calling the function inside the first block only.
You’d need to include the block code inside your each loop.

6

`

<section class="three full">
<div>
	<a href="#">
	  	
		<?php
			$childPages = page('about')->children()->offset(0);
				foreach($childPages as $p): ?>
					<?php foreach ($p->featuredimage()->toStructure() as $item): ?>
						<img src="<?php echo $item->image()?>">
					<?php endforeach; ?>
						<?php endforeach ?>

		<div class="info">
			<h4>The Food</h4>
			<span>Read More</span>
		</div>
	</a>	
</div>
<div>
	<a href="">
		<img src="http://placehold.it/360x500" alt="">
		<div class="info">
			<h4>The People</h4>
			<span>Read More</span>
		</div>
	</a>	
</div>
<div>
	<a href="#">
		<img src="http://placehold.it/360x500" alt="">
		<div class="info">
			<h4>The Place</h4>
			<span>Read More</span>
		</div>
	</a>	
</div>
`

So my goal was to get the correct image showing in the first div, then id fiddle with the code to produce the 2nd and third in the other divs. I just have placeholder images setup for the time being. They will be replaced with the code.

7 
<?php
 $childPages = page('about')->children();
 foreach($childPages as $p): ?>
  <div>
      <?php foreach ($p->featuredimage()->toStructure() as $item): ?>
        <a href="">
	   <img src="<?php echo $item->image()?>">
           <div class="info">
	     <h4>The People</h4>
	     <span>Read More</span>
	   </div>
       </a>	
     <?php endforeach; ?>
  </div>    
<?php endforeach ?>

What I don’t understand is why you are using a structure field here for only this one item?