[DEPRECATED] Custom Images

Last edit: Oct 26, 2022


This article is deprecated. Please visit the updated guide - User Uploads

Custom Images are used to add one or more images to a Profile, or Record.


You can enable CustomImages by adding a Property with type set to photo, for example:

- name: avatar
  type: photo

Version defaults

Each custom image upon creation is saved in three versions.

The defaults are:

Size Width (px) Height (px)
mini 56 56
thumb 144 109
normal 1280 960

You can alter the width and height of each version with versions_configuration:

- name: avatar
  type: photo
      width: 300
      height: 300

Form configuration

Custom Image attribute must be defined in a form to allow and validate the form request.

        validation: {
          file_content_type: { allow: ['image/jpeg', 'image/png', 'image/gif'] }


Each image supports the following self-descriptive fields:

Field name Type Note
image String Image that has been sent via form - usually original input from user

Displaying, updating

After setting up images as described above, you can further customize image editing in the markup for the forms:

{% if form.fields.profiles.seller.custom_images.avatar.image.value %}
  <div class="preview">
      <a href="{{ form.fields.profiles.seller.custom_images.avatar.image.value }}">
        <img src="{{ form.fields.profiles.seller.custom_images.avatar.image.value }}">
{% endif %}

    <span>Select a new image...</span>
    <span>or drag photo here to upload</span>
    <input accept="image/gif, image/jpeg, image/jpg, image/png" name="{{ form.fields.profiles.seller.custom_images.avatar.image.name }}" type="file">

  {% if form.errors['profiles.seller.custom_images.avatar.image'] %}
    <p>{{ form.errors['profiles.seller.custom_images.avatar.image'] }}</p>
  {% endif %}

The example above shows the predefined image tag.

Using GraphQL to query for CustomImage

query test_image_query {
  records {
    results {
      avatar: custom_image(name: "avatar") {
        normal: url(version: "normal")
        thumb: url(version: "thumb")
        transformed: url(version: "transformed")

Contribute to this page

Github Icon


We are always happy to help with any questions you may have.

contact us