The Image System

• Design images: files in a skin's or module's img/ folder, such as logos and icons. Admins can replace them on the Images tab. Show them with {jrCore_image}.
• Item images: images uploaded with an item, such as a profile picture or a gallery photo. They're stored with the item, and resized on request. Show them with {jrImage_display}.

Put the file in your module's or skin's img/ folder, and show it with:

{jrCore_image module="xxFoo" image="badge.png" alt="Badge"}

Without module, the image comes from the active skin. See {jrCore_image}.

Don't link to the file itself (/modules/xxFoo/img/badge.png): a replaced image would be ignored. In PHP, build the URL through the Image module:

$url = jrCore_get_base_url() . '/' . jrCore_get_module_url('jrImage') . '/img/module/xxFoo/badge.png';

In a skin's or module's CSS, use the image URL variable, which is replaced when the CSS is built:

background-image: url("{$xxFoo_img_url}/badge.png");

It's {$(skin or module)_img_url}, for example {$jrElastic2_img_url} in Elastic 2.

A form field of type image stores the uploaded image with the item, as (prefix)_(field), such as profile_image. Show it at any size:

{jrImage_display module="jrProfile" type="profile_image" item_id=$item._profile_id size="medium" crop="auto" alt=$item.profile_name}

Resized copies are made on the first request and cached. The sizes, crop options and the settings are on Image Support.