Jump to content

Multiple images and basic questions

Recommended Posts


I'm really sorry to ask you this kind of very simple question, I'm discovering processwire and have not so much php knowledge. Until know I'm able to get the data from text fields without any problem and that's great :-) But have some problem with multiple images. I've read a lot but didn't find the solution by myself so here am I.

How can I display multiple images from the same images field?

That's basically my question.

My code:

foreach($page->children as $project)
echo "<h2>{$project->title}</h2>
 <img src='{$project->images->url}'>";


For know the images isn't displaying (seems the path isn't ok) and it's just displaying one image result.

If it helps, more informations:

I have pages like that:


> project

> project

> project




In the project page and template I use the images field provided by default with the processwire installation. There I have one or more images.

Thanks for reading and hope I'm not bothering you too much with this very simple question.

Link to comment
Share on other sites

I think you're looking for something like this:

foreach($page->children as $project) {
 echo "<h2>{$project->title}</h2><p>{$project->body}</p>";
 foreach($project->images as $img) {
   echo "<img src='{$img->url}'>";

$project->images is an array if the images field is set to multiple. If it's a limited to 1 image field your code would work. Or to get for example the first image from the stack, you could just access it using $project->images->first()->url;

  • Like 1
Link to comment
Share on other sites

If you wanted to set the dimensions of the first images how would you write this?

Could you do:

<img src="<?='{project->images->first()->url}'?>" width="<?='{project->-images->first()-width(200)}'?>" />

What are you using? This isn't php... ???

No, you want to do:

<img src="<?=$project->images->first()->size(200,0)->url;?>" width="200" />


<img src="<?=$project->images->first()->widht(200)->url;?>" width="200" />
Link to comment
Share on other sites

Oops, thanks for showing me how to write it much cleaner with the correct syntax. :)

When I try you're above example inside a loop ie... foreach()

The code only renders items with images. Have isn't my php written correctly?

This is the code I have:

<?php $tours = $pages->find("template=tour");
foreach($tours as $tour) { ?>
<div class="tour">
   <div class="pictures">
       <p class="date"><?=$tour->start_date;?></p>
       <img src="<?=$tour->images->first()->size(200,0)->url;?>" width="200" class="picture">
   <div class="copy">
       <h1><a href="<?=$tour->url;?>"><?=$tour->title;?></a></h1>
   <div class="prices">
       <p class="price">£<?=$tour->price;?></p>
       <p class="per-person">per person</p>
       <button class="book">Book now</button>
</div><!-- tour -->
<?php } ?>
Link to comment
Share on other sites

I'm not sure I understand. You don't check if there's an image and without debugging turned on in site config it may fail silently. Hard to help without seeing the output and more.

However, to check if a image is there you could change to something like this

<?php if(count($tour->images)): ?>
 <img src="<?php echo $tour->images->first()->size(200,0)->url; ?>" width="200" class="picture">
<?php else: ?>
<?php endif; ?>

Link to comment
Share on other sites

Thanks Soma,

I turned debugging in the site config but I couldn't see any errors. Viewing the source though I can see that it starts to output the markup for the next loop then stops when it gets to the image.

Checking for an image prevents it from failing so that does me. :) (never thought if there wasn't an image it might display an empty img tag, so probably best I check for an image like you suggest).

Thanks again.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...