Custom Images

Last edit: 

Contributors: 

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

Defining

You can enable CustomImages by adding a Property with attribute_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 whitelist 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_builder.fields.profiles.seller.custom_images.avatar.image.value %}
  <div class="preview">
    <figure>
      <a href="{{ form_builder.fields.profiles.seller.custom_images.avatar.image.value }}">
        <img src="{{ form_builder.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_builder.fields.profiles.seller.custom_images.avatar.image.name }}" type="file">
  </label>

  {% if form_builder.errors['profiles.seller.custom_images.avatar.image'] %}
    <p>{{ form_builder.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 {
  customizations {
    results {
      avatar: custom_image(name: "avatar") {
        normal: url(version: "normal")
        thumb: url(version: "thumb")
        transformed: url(version: "transformed")
      }
    }
  }
}

Questions?

We are always happy to help with any questions you may have. Check out our Help page, or contact us.