This blog article will illustrate how the Image Sizes APIs concerning event and speaker images are integrated in Open Event Frontend, which allows for dynamic configurations of storing speaker and event images. The primary end points of Open Event API with which we are concerned with for fetching the event and speaker image sizes are
GET /v1/event-image-sizes
And
GET /v1/speaker-image-sizes
These endpoints are accessible only to a user with has administrator privileges as the customisation of image sizes is possible only on the admin dashboard. The image sizes are independent in regards to relationships and don’t have any related fields.
The model for the admin image settings route is defined as follows:
export default ModelBase.extend(CustomPrimaryKeyMixin, { thumbnailSizeQuality : attr('number'), type : attr('string'), smallSizeWidthHeight : attr('number'), smallSizeQuality : attr('number'), iconSizeQuality : attr('number'), iconSizeWidthHeight : attr('number'), thumbnailSizeWidthHeight : attr('number') });
The form which allows user to select image sizes, is in a separate component, and initially both the speaker and event image sizes are passed onto the component as a part of the entire model, so they can be separated later as per the requirement.
| {{forms/admin/settings/images-form image=model save=’saveImages’ isLoading=isLoading}} |
Most of the fields specify the units in which the numerical input concerning the image dimensions will be interpreted by the server and standard min and max validations are applied to the fields to ensure genuine and legitimate values can pass through the frontend.
| <h3 class=”ui header”>{{t ‘Large Size’}}</h3>
{{input type=’number’ name=’large_width’ value=image.eventImageSize.fullWidth min=1}} {{input type=’number’ name=’large_height’ value=image.eventImageSize.fullHeight min=1}} {{input type=’number’ name=’large_quality’ value=image.eventImageSize.fullQuality min=1}} </div> {{ui-checkbox label=(t ‘Standard aspect ratio is 13:5. Tick to maintain aspect ratio.’) class=’checkbox’ name=’large_ratio’ checked=image.eventImageSize.fullAspect onChange=(action (mut image.eventImageSize.fullAspect))}}
{{t ‘Standard Size of the available area is 1300px X 500px’}} {{t ‘Background Header Image in Public Event Page’}}
</div> |
Furthermore, to ensure a user does not accidentally change the values inside the form, an action is triggered while transitioning away from the route which rollbacks any unsaved changes to the image sizes.
actions: { willTransition() { this.get('controller.model').forEach(image => { image.rollbackAttributes(); }); } }