Add-on Documentation from JCOGS Design

IntroductionLast updated: 17 February 2026

JCOGS Image Pro Field is an enhanced version of ExpressionEngine’s built-in File field.

It keeps the familiar “choose a file and use it in templates” workflow, but adds optional tooling that helps teams add images to their sites that are consistent, responsive, and editor-friendly.

In particular, it can add controls such as:

  • cropping source images
  • setting focal points
  • enforcing or selecting crop aspect ratios
  • applying JCOGS Image Pro presets
  • defining responsive output (including breakpoints)
  • art direction (choosing alternative images for different viewport sizes)

Who it’s for

This add-on is designed for teams where both developers and content editors need to collaborate on image presentation:

  • Developers who want predictable, repeatable image output (consistent crops/aspect ratios, preset-driven rendering, and responsive behaviour) without re-implementing image logic in every template.
  • Content editors who occasionally need to fine-tune how an individual image is presented (for example choosing a better crop or setting a focal point) without having to request template changes.

If you only need a basic file picker with no image-specific controls, the standard EE File field may be sufficient.

Note: JCOGS Image Pro Field is a companion add-on to JCOGS Image Pro. It will not work unless JCOGS Image Pro is also installed.

How it works

JCOGS Image Pro Field extends EE’s File field, so most of what you already do with a File field still applies: editors select an image for an entry, and developers can access that image’s properties in templates.

Where it differs is that it adds a second layer of image-related behaviour:

  • Developer-controlled output: additional output options beyond the standard File field, so you can standardise how images are rendered across the site.
  • Field-level policy: you choose which tools are available for a given field (and can set defaults/requirements), helping keep editorial choices within safe boundaries.
  • Editor-level adjustments (optional): when enabled, editors can fine-tune each image (for example crop/focal/aspect/art-direction) without needing template changes.

The result is that developers gain predictable, consistent image output, while content editors gain practical controls to improve real-world content presentation when they need it.

As a companion to JCOGS Image Pro, all image rendering/processing is delegated to JCOGS Image Pro, so output benefits from its caching and processing pipeline.

Installation

1. Copy the jcogs_img_pro_field folder found in the root of the distribution folder to your system/user/addons folder and then install from the ExpressionEngine Control Panel Add-ons page.

2. Copy the jcogs_img_pro_field folder found in the distribution's /themes/user folder to the equivalent /themes/user folder in your site's webroot folder (e.g. public_html).

3. Run the install process for the add-on from the ExpressionEngine Control Panel Add-ons page.

Requirements

Minimum Requirements

To use JCOGS Image Pro Field you will need:

Updating

Repeat the steps outlined in the Installation section above to copy the updated files to the correct locations on your server.

Run the ExpressionEngine add-on update process via the Control Panel Add-ons panel.