How do I get image from children

[Qurus]

Hi, How do I can get image from children to my portfolio list?  I was checking forum couldn't find anything. 

[adrian]

Hi Qurus and welcome to PW!

It really depends on your needs. Do you need to get all images from all children of a certain page, or just one image from one specific child page that you can target directly?

Basically you need to select the page somehow:

For example this will get the url of the first image from a field called "images" from the first child of the current page:

$page->child->images->first()->url

If you need further help, let us know exactly your setup and we can help further.

[Qurus]

<?php foreach($page->images as $image) : ?>
                            <img class="img-responsive"
                                 src="<?php echo $image->url; ?>"
                                 alt="<?php echo $image->description; ?>"
                                 width="<?php echo $image->width; ?>"
                                 height="<?php echo $image->height; ?>" />
<?php endforeach; ?>
                        <?php foreach($page->children as $k => $p): ?>
                        <div class="mask">

                            <h2><?php echo $p->headline; ?></h2>
                            <?php echo $p->body; ?>

                            <a href="<?php echo $p->url; ?>" class="info"><?php echo $p->title; ?></a>

                        </div>

                    </div>
                    <?php endforeach; ?> 

Hi Adrian,

Thanks for your reply and warm welcome message. My php knowledge is limited. But I am trying to portfolio list with images and text. I want to add children to images body and title also see on list page. I think my images code there messed.

Thanks again

[thistimj]

Do you have your image field set for one image in each of your child pages, or are there multiple images in each child?

[Qurus]

Hi thistimj,

I set child pages for multiple images each. But I want to show only one image on list template.

Thanks

Edited February 19, 2015 by Qurus

[thistimj]

I'm not sure you need the $k => $p where you have it. It should work with this:

<?php foreach($page->children as $child): ?>

<div class="mask">
<img src="<?php echo $child->images->first()->url; ?>" />
<h2><?php echo $child->headline; ?></h2>
<?php echo $child->body; ?>
<a href="<?php echo $child->url; ?>" class="info"><?php echo $child->title; ?></a>
</div>

<?php endforeach; ?>

If I'm understanding you correctly, this should get you most of the way to where you want to go. I'm not a php expert and I haven't tested this, but I think that's right. Let us know if that works.

[Qurus]

Thanks a lot thistimj. Worked like a charm.

[thistimj]

Cool. Welcome to ProcessWire. I'm sure you're going to like it!

[markoj]

Does anyone know how to set an image size for this code (taken from the above solution)?

<img src="<?php echo $child->images->first()->url; ?>" />

Furthermore, I have another one that I would like to do the same for, set the image size, this one is an image type field called "gallery_preview_image"

<img src='{$child->gallery_preview_image->url}' >

Both examples are using the multiple images option. 

Thanks in advance, I am just starting to wrap my head around PW concepts.

[LostKobrakai]

// $images is a array of images, therefore first you need to get a single image
$images = $child->gallery_preview_image;

// Select an image out of the array
$image = $images->first();
$image = $images->eq($n);
$image = $images->last();

// Each image has properties and methods. With some methods you can manipulate the image
// $thumb isn't different to $image besides it's pointing to another file
$thumb = $image->size(600, 400);
$thumb = $image->width(300);
$thumb = $image->height(100);
$thumb2 = $thumb->width(50);

// properties work for all images
$url = $image->url;
$url = $thumb->url;

You can chain all those commands, I just split them for the explanation.

[markoj]

Thanks for the breakdown LostKobrakai !

That helped me get a few things straightened out. I am still getting familiar with PW's syntax. 

A lot of trial and error of chaining things in different ways, but I am getting it.

[jmn817]

Hello everyone, 

I have a relevant question on obtaining an image from another page (not a child). What I'm trying to do is obtain an image from my root directory ('/') that has a field called Center_Image. Every time I use the following code I get a small thumbnail of a broken image but not the actual image. I tested this code to get a text field and it works no problem, just the images are giving me problems.

    $image = $pages->get('/');

    echo '<div><img src="'. $image->Center_Image->url . '"></div>';

Is there a better way to do this? 

Thank you.

[kongondo]

@jmn817

The answer is right there 2 posts above yours . If Center_Image is a single image field, then yes, you could have accessed it like you do. If it is a multi-image field, then you need to access it OR them using a different approach.

Further reading.

Edited January 15, 2017 by kongondo
link to API

[jmn817]

@kongondo

It appears my code is good, it's a single image field. The problem for me was in processwire, I had set the image to automatic format so it wasn't getting picked up as a single image and was just outputting a broken image (below). The directions you linked to showed what I was doing wrong. Thank you.

Edited January 15, 2017 by jmn817
tag user