Problems displaying resized images within an images repeater

[netzartist]

Hi!

 

I've just started developing my first PW project (it's great so far! ) and ran into an issue about how to output an thumbnail image:

 

I want to iterate over news items which have an images repeater (field type "image", inputfield type "image") and display resized images:

 

foreach($page->children as $news_item) {
  ...
  if (count($news_item->image_repeater)>0) {
    foreach ($news_item->image_repeater as $image) {
      <?= $image->width(250)->url; ?>
      <img src="<?= $image->width(250)->url; ?>" width="250" alt="" title="<?= $image->description ?>" />
    }
  }
}

I get an

"Error: Exception: Method RepeaterPage::width does not exist or is not callable in this context (in ...\wire\core\Wire.php line 232)".

$image returns an ID. 

 

The "image" fieldtype has the setting maximum files allowed = 1 (0 didn't work too).

 

PW Version 2.2.13.

 

Any idea?

 

Thx 

[Wanze]

Hi netzartist – welcome to the world of Pw!

Don't use repeater fields for multiple images. You achieve the same with the "Image" Fieldtype by setting maximum files = 0.

This way you can upload and store multiple images with descriptions.

You can do these steps:

- Remove the repeater from your template

- Change the "maxiumum files allowed" of your images field to 0

- Add the image field to your template

- Upload multiple images

Then your code needs minor changes:

foreach($page->children as $news_item) {
  ...
//images is the name of the Image Field  
if (count($news_item->images)>0) {
    foreach ($news_item->images as $image) {
      <?= $image->width(250)->url; ?>
      <img src="<?= $image->width(250)->url; ?>" width="250" alt="" title="<?= $image->description ?>" />
    }
  }
}

Here's why your code didn't work:

foreach ($news_item->image_repeater as $image) {
  //$image is not yet your image field, it is an "Item" of your repeater which can contain multiple fields
}

//This would work, but if you only need multiple images, don't use a repeater
foreach ($news_item->image_repeater as $item) {
  $image = $item->image;
  //...
}

[netzartist]

Whoohoo, first answer 10 minutes after posting, that's really fast

And it works now, many thanks for your explanation. Once again I have the feeling that I think more complicated about an issue than PW 

[Wanze]

You're welcome, glad to hear it works!

This is ProcessWire, you can solve almost every problem in less time with less coding...

Sometimes I ask myself: Wow this is so simple with Pw, how would I've done this before? ;-)

[diogo]

Whoohoo, first answer 10 minutes after posting, that's really fast

You'll get used to it here

[Joss]

Just to stir the pot....

This also works with the Thumbnail (crop-image) module/field type.

So you might set two thumbnail sizes (under Input in the field settings):

thumbnail,160,100

largethumb,800,600

And then, within your loop you would do something like:

<a class="fancybox" rel="group" href="<?php echo $news_item->news_image->getThumb('largethumb'); ?>">
<img src="<?php echo $news_item->news_image->getThumb('thumbnail'); ?>" />
</a>

Where news_image is the name of your thumbnail image field and fancybox is the class that fires fancybox if are using that (or for what ever lightbox type system you are using)

This is slightly overkill for your use, but it is a useful way of doing it and allows you to have multiple sizes to play around with if you want to go completely mad.

There are cases for using Repeaters for this sort of gallery, however.

For instance if you want to have overlays on the images with full HTML rather than just the description box, or you want to add lots of other information to the image display.

Joss