search

sanity-io / block-content-to-react

Deprecated in favor of @portabletext/react
https://github.com/portabletext/react-portabletext
MIT License
161 stars 25 forks source link

React Native: Hotspot / crop not working for images #31

Closed jacdx closed 1 year ago

jacdx commented 4 years ago

This may apply to plain React as well.

Hotspot & crop settings aren't getting translated into image URL parameters for block content images. It looks like it should be happening, but there is some translation in internals happening to the image/asset objects that doesn't allow the crop and hotspot properties to get translated.

Example image node: {_key: "8e61aa8bb377"_type: "image"asset: {_ref: "image-208d3bbfdb69bf70d8101c5d7917e87534e82fc6-2400x3000-jpg", _type: "reference"}, crop: {_type: "sanity.imageCrop", bottom: 0, left: 0, right: 0, top: 0}, hotspot: {_type: "sanity.imageHotspot", height: 0.1439999999999996, width: 0.7633333333333336, x: 0.3816666666666668, y: 0.6746666666666663}, __proto__: Object }

Turns into this URL: https://cdn.sanity.io/images/[mine]/staging/208d3bbfdb69bf70d8101c5d7917e87534e82fc6-2400x3000.jpg

Whereas, a non-Block Content image object: __typename: "Image" asset: __typename: "SanityImageAsset" url: "https://cdn.sanity.io/images/[mine]/staging/e90e33423f8ff21a275dd8b475ab5b5702db638b-1578x876.png" __proto__: Object crop: __typename: "SanityImageCrop" bottom: 0 left: 0 right: 0 top: 0 __proto__: Object hotspot: __typename: "SanityImageHotspot" height: 0.9571509678525129 width: 0.29369797859690766 x: 0.45362663495838296 y: 0.47857548392625643 __proto__: Object

using imageUrlBuilder from @sanity/image-url translates the rect and focal point URL parameters correctly.

kmelve commented 4 years ago

Thanks for reporting – we will look into it when we get the chance!

rexxars commented 1 year ago

Closing this as https://github.com/portabletext/react-native-portabletext is now the successor library to this one for react native