ct4.us

Overview #

The Image field type in Custom Tables allows users to upload images and automatically generate different size variants. These images are stored in a designated folder, and various retrieval options are available, including thumbnails, original files, and custom sizes.

Field Type Parameters #

1. Image Size Options (optional) – Specify various size options. When an image file is uploaded, Custom Tables will create modified versions of the image file based on these settings.
2. Image Processing Methods (optional) – Defines additional image processing options, such as cropping, watermarking, or compression.
3. Folder (optional) – The directory where uploaded files will be stored. By default, images are stored in /images. You can also specify subfolders.
4. Save As File Name (optional) – Defines how the uploaded image file will be named.

Value Parameters: #

Basic Usage

{{ FieldName }}

This generates an HTML image tag showing a small thumbnail of the uploaded image:

<img src="http://localhost/j/images/_esthumb_20250213221956.jpg" style="width:150px;height:150px;" alt="" title="">

Retrieving Image URLs

To show only the link to the thumbnail image file:

{{ image.value("_thumb") }} or {{ image.value }}

Example Output:

http://localhost/j/images/_esthumb_20250213222017.jpg

Displaying Different Image Variants

Replace _thumb with the desired variant (_original, image_size_name).

Original Image Source:

{{ image.value("_original") }}

Returns:

http://localhost/j/images/_original_20250213221956.jpeg

Custom Image Size Source:

{{ image.value("medium") }}

Returns:

http://localhost/j/images/medium_20250213221956.jpg

Custom Image Tag:

{{ image("medium") }}

Returns:

<img src="http://localhost/j/images/_original_20250213221956.png" alt="" title="">

Edit Record Parameters: #

These parameters configure the input element for image uploads.

Basic usage:

{{ FieldName.edit }}

Usage with parameters:

{{ FieldName.edit(CSS Class, Attributes) }}

1. CSS Class (optional) – Name(s) of CSS class(es) for styling.
2. Attributes (optional) – Additional attributes such as disabled, onclick, onchange, etc.

Example:

{{ FieldName.edit("image-input", "onchange='previewImage()' required") }}

Handling Image Updates:

When a new image is uploaded, it replaces the existing one.

Final Notes

• Ensure the folder permissions allow image uploads.
• If using the Pro Version, leverage image processing methods for additional control.
• Consider adding CSS styling for consistency in your design.