search

uploadcare / uploadcare-widget

Uploadcare Widget, an ultimate tool for HTML5 file upload supporting multiple file upload, drag&drop, validation by file size/file extension/MIME file type, progress bar for file uploads, image preview.
https://uploadcare.com/products/file_uploader/
BSD 2-Clause "Simplified" License
227 stars 102 forks source link

Change crop dimension label #799

Closed davedbase closed 3 years ago

davedbase commented 3 years ago

I was wondering if it's possible to change the the crop options label? Rather than listing the options as ratios we want to more neatly display the options available to the suer ie. Portrait, Landscape, Square etc. Reviewing the codebase it seems that isn't totally possible right now from the crop property. Am I correct in assuming this? If so, can we expect the roadmap to count for this feature any time soon?

Thanks!!

optlsnd commented 3 years ago

Hi @davedbase, you can do this with some CSS. For example, if you have 2 presets:

.uploadcare--button_icon {
  width: 100px;
}

.uploadcare--crop-sizes__item:nth-child(1)::after {
  content: 'Vertical'
}

.uploadcare--crop-sizes__item:nth-child(2)::after {
  content: 'Horizontal'
}

You can check out a live version here.

davedbase commented 3 years ago

Thanks. It would be really awesome if the widget supported a cropLabels property that automatically filled the data attribute (and hence the ::after pseudo). I'm working with a complex React application and generating the styles to override this is pretty nasty. A property would solve the issue. If a second property isn't wanted then maybe support this in the crop property with a special syntax:

crop: "1:1|Square 2:3|Portrait 3:2|Landscape

Looking at the source that produces the caption it does't look too difficult to support the label syntax: https://github.com/uploadcare/uploadcare-widget/blob/1b33ac45986bffeb311bdb1293170b3925932aa1/src/widget/tabs/preview-tab.js#L312-L317