Images are really complicated to deal with, aren’t they?


I like to think of them as versatile, really. When you think of what the main intention of the internet was, and actually still is, which is so that one person can say to another “I think you stink,” then why anyone would want to add any sort of media to spoil the flow of nefarious verbiage is beyond me.

But people seem to like them so we better know how to stick them on the website with ProcessWire and PHP.

In its most basic form, images in ProcessWire are attached to the page in which they were uploaded. These images are stored in the assets folder in a folder than matches the ID of the page. (Did I forget to mention that when you create a page ProcessWire automatically gives it a unique ID? Well it does, so that’s another thing ticked off the list.)

When you use images within one of the RTF editors in ProcessWire, you have to have uploaded the image first to the page using a separate image field, or using the insert image interface on the editor, dig through other pages for one uploaded elsewhere. If you think about it, you could create your own library of images by creating a template without a file for just that purpose and then making one or more pages using that fileless template and stuffing them with images.

Image fields can also be referenced directly using the API in the template – they do not have to be used via an RTE.

The standard image field type that comes with the default installation has various settings to get you going. To start with, let us concentrate on only one – max number of images.

The field allows you to load more than one image into it, or you can set it to load only one. If you have set it to just accept one image and upload an image, then if you upload a second it will replace the first.

This difference between one or many images is very important to how the field is used:

If the image field is set to allow only one, then that image is stored as a single entry that is directly grab-able.

If the image field is set to allow two or more, then the image information (even if you only upload one) is stored as an array. In that case you have to specify which image in the array you want or loop your way through all of them.

In case you don't know, an array in PHP (and many other languages) is basically a list of elements that are of the same type – in this case, a list of images. A very simple array would be a list of fruit:

Apple, Orange, Banana, Soma

Each one separated by something the programming language can understand, like a comma.

(Okay so Soma is not a fruit, but is the author of the ProcessWire Cheatsheet.)

This split personality of the image field, single or array, is less complicated than it sounds since in practice, if you only want one image for that particular job, you are hardly going to set the field to have more than one image uploaded.

That's the basics, and next is how you play with them.

Next: Just One Image Mate »

  1. Images are really complicated to deal with, aren’t they?
  2. Just One Image Mate
  3. I haven’t uploaded an image and my world has imploded
  4. Make it smaller mate!
  5. Going in Circles (But in a good way)
  6. A bit of a sum up


  • Corin Royal Drummond

    Corin Royal Drummond 4 years ago 80

    I've been on a long search for a decent CMS. I'm liking Processwire, but I'm loving Mr. Sanglier's documentation even more. It's rare that someone can write technical docs with wit, humor, and accuracy. My hat off to you sir.

  • George Halstead

    George Halstead 3 years ago 30

    Very good tutorial. Easy to grasp. Many thanks friend.

  • Peter Knight

    Peter Knight 2 years ago 10

    Josh - just spotted a typo on this page.
    On the first foreach example, "imgage->url" should be "image->url".

Post a Comment

Your e-mail is kept confidential and not included with your comment. Website is optional.