Editing an image in Processwire

Images in processwire have a few elements that our clients should be aware of, this is a guide on each part of the image/images fields.

Firstly, to upload an image either click on the 'choose file' button which will then open up your file explorer on your computer & allow you select an image, or if you prefer simply drag the file in and drop it on the field.

The image types are normally restricted to a few select options, so if you get an error please keep in mind this may be why. The file types we usually allow are .png .jpg .jpeg .gif and sometimes .webp.

To open up the menu for an image shown above, you simply click on the image within the field. This menu allows you to make a few select edits.

First, and most importantly - Description. This is often referred to an 'Alt Tag' these are used by google & other search engines to understand what is being shown to them & allows them to understand and correctly use your content. Not having an alt tag can greatly hurt your SEO so please make sure to fill these out when adding images.

Second we have 'crop' im sure most people are aware of how this works but essentially allows you to re-size and cut out sections of the image to better focus it for display. Forewarning with this however, any edits made with this tool are permanent, therefore make sure to keep an original version of the image before doing this.

Example of the image editer:

Finally, we have 'focus' and 'variations' these, by default may not do anything on your site as they are not always required. However, as a run down:

FOCUS - This allows you to select the focus point of an image, if for example, you have a large header image thats display is smaller than the original image, this will allow you to select the point the image displays at the center, or as close to it as it can.

VARIATIONS - This stores the data on any resized versions of the image. This is then used within the code of the site. These are not always used.