Jump to content

Problems displaying resized images within an images repeater


netzartist
 Share

Recommended Posts

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  :)
Link to comment
Share on other sites

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;
  //...
}
  • Like 4
Link to comment
Share on other sites

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? ;-)

  • Like 1
Link to comment
Share on other sites

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

  • Like 2
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
 Share

×
×
  • Create New...