Jump to content
Qurus

How do I get image from children

Recommended Posts

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
<?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

Share this post


Link to post
Share on other sites

Hi thistimj,

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

Thanks

Edited by Qurus

Share this post


Link to post
Share on other sites

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.

  • Like 2

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
// $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.

  • Like 1

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

@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 by kongondo
link to API
  • Like 1

Share this post


Link to post
Share on other sites

@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.

brokenimage.PNG

Edited by jmn817
tag user
  • Like 2

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...