Adding CropGuide Image Cropper To A Subset Of File Input Fields
By default CropGuide binds to all file input fields, but sometimes we need to limit image cropping functionality to a subset of fields. In this quick tutorial we look at how we can instruct CropGuide to only work with a subset of the file input fields on the webpage.
Let’s imagine the HTML below represents a form on our webpage.
We have two file upload fields. The first one is used to upload all kinds of files, the second one is for uploading a profile picture.
<form>
<input type="file" />
<fieldset>
<input type="file" id="profile-picture" accept="image/*" />
</fieldset>
</form>We’ve configured CropGuide to output a square profile picture, but we don’t want images uploaded using the first upload field to also be cropped to a square shape.
Allowing a single field
To limit CropGuide to the profile picture field we need to look up the CropGuide script tag we added to our page.
<script defer src="https://cdn.crop.guide/loader/l.js?c=123ABC"></script>With the CropGuide tag located we add the following HTML just before the CropGuide tag.
<script>
window.$cropguide = window.$cropguide || {
fields: ['#profile-picture'],
};
</script>
<script defer src="https://cdn.crop.guide/loader/l.js?c=123ABC"></script>This will tell CropGuide to only work with the fields defined in the fields array.
In this example the '#profile-picture' value matches the id of our profile picture field.
Allowing groups of fields
Alternatively we can target the field indirectly by selecting the parent element. CropGuide will test if the field is a child of the selected element and if so, will be activated.
<script>
window.$cropguide = window.$cropguide || {
fields: ['fieldset'],
};
</script>
<script defer src="https://cdn.crop.guide/loader/l.js?c=123ABC"></script>This code will select the <fieldset> element that wraps the profile picture field. CropGuide will activate on any file input inside the fieldset.
Allowing different fields
We can pass multiple selectors to the fields array.
Below we’ve added an additional file upload field with id document-photo, now both fields offer image cropping functionality.
<script>
window.$cropguide = window.$cropguide || {
fields: ['#profile-picture', '#document-photo'],
};
</script>
<script defer src="https://cdn.crop.guide/loader/l.js?c=123ABC"></script>Setting a different crop aspect ratio
Suppose one or more of our file input fields need a different crop aspect ratio.
We can achieve this by adjusting our settings object like shown below.
The #profile-picture field still receives the configuration we defined in the CropGuide admin, for the #document-photo field we overwrite the crop aspect ratio setting it to 16:9.
<script>
window.$cropguide = window.$cropguide || {
fields: [
'#profile-picture',
{
selector: '#document-photo',
editor: {
imageCropAspectRatio: 16 / 9,
},
},
],
};
</script>Conclusion
We’ve learned that we can limit CropGuide to a select set of fields by adding a <script> tag to the page that defines an allowlist of fields and or groups of elements.
We can now define which specific fields we want to enhance with CropGuide.
