[DEPRECATED] Custom Images
Warning
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.
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")
}
}
}
}