4.1.4. image

4.1.4. `image`
Prev	4.1. Field Types	Next

4.1.4. `image`

An image field is really just a special variant of the file field type, allowing for nicer presentation in the administrative pages, and a bit of scaling.

The simplest example is this:

<field id="illustration" type="image" multiLingual="0">
  <title lang="en">Image</title>
  <title lang="da">Billede</title>
</field>

Now the image will be uploaded but not scaled in any way. However, often you want to limit the file size of the images people put into the system - read on to learn the syntax.

4.1.4.1. Scaling

You can let Moski2.net scale your images in two ways:

Scale the original in order not to fill up the system with oversize images that are never used in full size
Create a number of pre-scaled versions of the image - useful if you know on beforehand which sizes are needed on your site. By pre-scaling you won't have to wait for the scaling to happen on the fly when the public page is first accessed.

4.1.4.1.1. Scaling the original

A simple scaling of the original upload could be defined like this:

<field id="illustration" type="image" multiLingual="0">
  <title lang="en">Image</title>
  <title lang="da">Billede</title>
  <scaling xy="800"/>
</field>

Now the image will be scaled down to a maximum of 800 pixels on both axes.

If you want the scale down based on the x-axis you can do this:

<field id="illustration" type="image" multiLingual="0">
  <title lang="en">Image</title>
  <title lang="da">Billede</title>
  <scaling x="800"/>
</field>

And of course the same goes for the y-axis:

<field id="illustration" type="image" multiLingual="0">
  <title lang="en">Image</title>
  <title lang="da">Billede</title>
  <scaling y="800"/>
</field>

You can also combine the two and make sure that an image is never bigger than 400 pixels on the x-axis and 200 on the y-axis:

<field id="illustration" type="image" multiLingual="0">
  <title lang="en">Image</title>
  <title lang="da">Billede</title>
  <scaling x="400" y="200"/>
</field>

No matter which combination of scaling attributes you use the following is always observed:

Proportions are kept - the system will not skew you image in any way to meet your scaling requirements.
An image is never scaled up - if the uploaded image is smaller than your scaling attributes, it will be left as-is.
If no scaling element is defined the image is scaled to 2000x2000px, 72DPI RGB in order to save disk space. If you need bigger images, use the scaling element and set the dimensions higher, or, if you want to leave the original completely untouched, use the preserveOriginal attribute:
```
<field id="illustration" type="image" multiLingual="0">
  <title lang="en">Image</title>
  <title lang="da">Billede</title>
  <scaling preserveOriginal="1"/>
</field>
```

4.1.4.1.2. Pre-scaling

Pre-scaling images is pretty similiar to scaling the original upload - even in syntax, except that the element name is <prescale> and not <scaling>.

Also, you can add as many prescale elements as you like:

<field id="illustration" type="image" multiLingual="0">
  <title lang="en">Image</title>
  <title lang="da">Billede</title>
  <prescale xy="600"/>
  <prescale x="400" y="200"/>
  <prescale x="100"/>
  <prescale y="50"/>
</field>

You can combine the two scaling methods and have the system scale the original and create pre-scaled versions as well:

<field id="illustration" type="image" multiLingual="0">
  <title lang="en">Image</title>
  <title lang="da">Billede</title>
  <scaling xy="600"/>
  <prescale x="400" y="200"/>
  <prescale x="100"/>
</field>

Note

Pre-scaling is handled by the event queue and might be a little delayed, where as scaling of the original takes place immediately upon upload.

4.1.4.2. Limiting uploads to specific mime types

You can use the mimetypes rule to limit the types of files your field allows.

Prev	Up	Next
4.1.3. `filemanager`	Home	4.1.5. `link`