Image (deprecated)

Users can select an image by selecting from the available options, uploading, or entering a URL.
Use image when you want to limit the user to selecting an image file. To allow multiple types of media files, see media. To allow upload of raw files of any type, see file.
Using an image VCC is equivalent to using a media VCC with acceptOnly set to ["image"].
If the image is loaded through the Upload section, the image can be resized or the background can be removed and the image will be stored with the application.
If the image is loaded through the Advanced section, the application will use the image at the specified URL. Keep in mind that if the link dies, the image will not appear.
You can configure automatic transformations to optimize uploaded images.
You can configure a custom image search by passing additional type options.
You can enable the optional hideExtensions type option to hide all asset packs and VCC extensions in cases where they do not make sense (for example, templates for selling premium images).

Image VCC

Sample image VCC

{
  "key": "myImage",
  "name": "My Image",
  "description": "This is my image description",
  "type": "image",
  "typeOptions": {
      "hideExtensions": true
  }
}

Optimizing images

You can apply type options that automatically manipulate uploaded images before they are stored in the Koji CDN. For example, you can resize or crop images to optimize them for display in your template. For a reference of all available options, see the Fastly API.

The following sample code resizes the image width and height and compresses the file size.

{
  "key": "myImage",
  "name": "My Image",
  "description": "This is my image description",
  "type": "image",
  "typeOptions": {
      "width": 100,
      "height": 200,
      "optimize": "medium"
  }
}

Tip	You can also append query strings to any `images.koji-cdn.com` URL when displaying an image in your template. For example, the type options in the previous sample are equivalent to these query parameters: `?width=100&height=200&optimize=medium`

Configuring a custom image search

To use a custom image search VCC in your project, use the following type options.

additionalTerms – An array of terms that will be appended to the user’s search. You can use this option to provide customized search queries, such as ["album", "covers"].
imgColorType – Specific color type for the search. The following types are supported:
- color – (default) searches all images.
- mono – searches black and white images.
- trans – searches transparent images.
title – The label that is displayed above the search input.

For example:

{
  "key": "myImage",
  "name": "My Image",
  "type": "image",
  "typeOptions": {
    "additionalTerms": ["additional", "search", "terms"],
    "defaultSource": "custom-image-search",
    "imgColorType": "color",
    "title": "Custom Search"
  }
}