[DEPRECATED] Custom Images

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

Defining

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
  versions_configuration:
    normal:
      width: 300
      height: 300

Form configuration

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

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

Fields

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">
    <figure>
      <a href="{{ form.fields.profiles.seller.custom_images.avatar.image.value }}">
        <img src="{{ form.fields.profiles.seller.custom_images.avatar.image.value }}">
      </a>
    </figure>
  </div>
{% endif %}

<div>
  <label>
    <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">
  </label>

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

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")
      }
    }
  }
}