Insites Docs Instance DataManaging DataField Types and UI ElementsMedia

Media

Last updated on February 08, 2025.

The following UI elements are available for the 'Media' field type:

  • Media - File
  • Media - Image

The system displays the following conditional fields for both of the above UI elements:

Input LabelTypeRequiredDescription
Max File Size (MB) Numeric Field Yes Maximum size (MB) of the file a user can upload.
Mandatory Toggle No Allows you to specify whether a user must provide a file or if the field can be optional.

Media - File

The system makes the following tabs available for filling out when you select the 'Media - File' UI element:

  • Appearance
  • Advanced

Appearance

Use this tab to manage the appearance of the field on the Instance.

Input LabelTypeRequiredDescription
Help Text (Tooltip) Text Area No Help text to assist users in utilizing the field correctly.

Advanced

Use this tab to manage advanced configurations of the field, such as the access control list and content disposition of the field, among other settings.

Input LabelTypeRequiredDescription
Access Control List Dropdown Field No

Enables public access if set to 'Public.' Otherwise, a signature generated on the server side is needed to access the file. The signature is automatically generated by GraphQL when you provide the argument to the GraphQL method. Options include the following:

  • Public
  • Private
Content Disposition Dropdown Field No

Indicates if the content is to be displayed 'Inline' in the browser, that is, as a web page, as part of a web page, or as an 'Attachment,' that is downloaded and saved locally. Options include the following:

  • Inline
  • Attachment
Content Length (Min) Number Field No Sets the server-side validation for the minimum file size in kilobytes. For example, a value of 2048 sets the minimum input file size (not the generated version) to 2MB.
Content Length (Max) Number Field No Sets the server-side validation for maximum file size in kilobytes. For example, 4096 sets the maximum input file size (not the generated version) to 4MB.

Media - Image

The system makes the following tabs available for filling out when you select the 'Media - Image' UI element:

  • Appearance
  • Image Versions
  • Advanced

Appearance

Use this tab to manage the appearance of the image field on the Instance. Input fields and requirements are similar to those detailed in the 'Media - File' UI element's 'Appearance' tab section.

Image Versions

Use this tab to manage image versions. This powerful feature allows you to create multiple specific image versions when uploaded automatically. An example use case is where a user uploads a large image; you can dynamically create a thumbnail, small, medium, and large versions of that image for your application.

This feature is highly beneficial to ensure that your application does not display oversized images unnecessarily, slowing down the user experience. It also saves you time because different-sized images are generated automatically and do not require pre-processing multiple image sizes using image editors or other tools.

Input LabelTypeRequiredDescription
Image Version Input Field No Label for the image version
Resized Image Options Dropdown Field No

This field provides the following resizing options for the image:

  • Cover: Crop to cover both the provided dimensions (default).
  • Contain: Embed the image within both provided dimensions.
  • Fill: Ignore the input aspect ratio and stretch the image to both the provided dimensions.
  • Inside: Preserve the aspect ratio and resize the image as large as possible while ensuring its dimensions are less than or equal to the specified dimensions.
  • Outside: Preserve the aspect ratio and resize the image to be as small as possible while ensuring its dimensions are greater than or equal to the specified dimensions.
Enlarge Toggle No Enlarge the image if it is smaller than width/height.
Width (px) Number Field No Width of the image in pixels.
Width - Auto Toggle No Use the toggle to enable the system to set the image width automatically.
Height (px) Number Field No Height of the image in pixels.
Height - Auto Toggle No Use the toggle to enable the system to set the image height automatically.
Position No

Define the gravity direction when cropping the image using the 'Cover' or 'Contain' options. Options include the following:

  • Auto
  • Bottom
  • Center
  • Left
  • Left Bottom
  • Left Top
  • Right
  • Right Bottom
  • Right Top
  • Top
Background No Define the background color when using the 'Contain' resized image option.
Format Dropdown Field No

Force the file extension of the outputted image; leave it blank if you want to keep the format of the original image. The following options are available:

  • JPG/JPEG
  • PNG
  • WEBP
Quality Number Field No

The quality of the output. One hundred (100) being the best (and largest in file size). Keep in mind that compression has different effects on different formats. Defaults:

  • PNG: 80
  • WEBP: 80
  • JPEG: 85
Image Blur Float Field No Provide a value between 0.3 - 1000 for blurring the image. The values represent the sigma of the Gaussian mask, where sigma = 1 + radius / 2.
Flatten Color picker No Merges all visible layers into a single layer with your defined color.
Grayscale Toggle No Convert image to 8-bit greyscale; 256 shades of grey.

Advanced

Use this tab to manage the advanced configurations for the image field. Input fields and requirements are similar to those detailed in the 'Media - File' UI element's 'Advanced' tab section.

Managing image versions

This section discusses managing image versions on an existing database field:

  • Adding an image version
  • Updating an image version

Adding an image version

To add an image version:

  1. Navigate to Data from the main menu.
  2. Select Databases.
  3. Find the database containing the field you want to add an image version to and select its Configuration row action link.
  4. Navigate to the 'Fields' tab.
  5. Select the field to which you want to add an image version. Ensure the field uses 'Media' as its field type and 'Media - Image' as its UI element
  6. Navigate to the 'Image Versions' tab.
  7. Select the 'Image Version' field.
  8. Give your image version a label using the empty field.
  9. Select ADD.
  10. Use the form to configure your newly - created image version. Input requirements are displayed on the Image Versions section of this article.
  11. Select SAVE FIELD.
  12. Select SAVE.

Updating an image version

To update an image version:

  1. Navigate to Data from the main menu.
  2. Select Databases.
  3. Find the database containing the field you want to update and select its Configuration row action link.
  4. Navigate to the 'Fields' tab.
  5. Select the field to which you want to add an image version. Ensure the field uses 'Media' as its field type and 'Media - Image' as its UI element
  6. Navigate to the 'Image Versions' tab.
  7. Select the image version you want to update using the 'Image Version' dropdown field.
  8. Make your changes.
  9. Select SAVE FIELD.
  10. Select SAVE.
Have a suggestion for this page?

Didn't quite find what you are looking for or have feedback on how we can make the content better then we would love to hear from you. Please provide us feedback and we will get back to you shortly.