2.35.3 • Published 9 months ago

@sanity/imagetool v2.35.3

Weekly downloads
25,498
License
MIT
Repository
github
Last release
9 months ago

The image tool used in sanity

Getting started

npm install --save @sanity/imagetool

Usage

ImageTool widget

import React from 'react'
import ImageTool from '@sanity/imagetool'

class MyComponent extends React.Component {
  state = {
    value: {
      hotspot: {
        x: 0.4,
        y: 0.3,
        height: 0.6,
        width: 0.4
      },
      crop: {
        left: 0.1,
        right: 0.2,
        top: 0.1,
        bottom: 0.21,
      }
    }
  }

  handleImageToolchange = newValue => {
    this.setState({value: newValue})
  }

  render() {
    return (
      <ImageTool
        src="https://c4.staticflickr.com/8/7514/16189387096_420dbca030_h.jpg"
        value={this.state.value}
        onChange={handleImageToolchange}
      />
    )
  }
}

Usage

CSS style calculator

import calculateStyles from "@sanity/imagetool/calculateStyles";

const styles = calculateStyles({
  hotspot: {
    x: 0.4,
    y: 0.3,
    height: 0.6,
    width: 0.4
  },
  crop: {
    left: 0.1,
    right: 0.2,
    top: 0.1,
    bottom: 0.21,
  },
  image: {height: 100, width: 125},
  container: {aspectRatio: 16/10},
  align: {
    x: 'left',
    y: 'center'
  }
});

returns an object with style objects that can be used with markup

{
  "container": {
    "overflow": "hidden",
    "position": "relative",
    "width": "100%",
    "height": "62.5%"
  },
  "crop": {
    "position": "absolute",
    "overflow": "hidden",
    "height": "100%",
    "width": "79.26%",
    "top": "7.97%",
    "left": "17.51%"
  },
  "image": {
    "position": "absolute",
    "height": "144.93%",
    "width": "142.86%",
    "top": "-14.49%",
    "left": "-14.29%"
  },
  "padding": {
    "marginTop": "62.5%"
  }
}

this can then be passed to jsx markup with the following structure:

<div style={styles.container}>
  <div style={styles.padding} />
  <div style={styles.crop}>
    <img
      src="https://c4.staticflickr.com/8/7514/16189387096_420dbca030_h.jpg"
      style={styles.image}
    />
  </div>
</div>
2.35.3

1 year ago

2.34.3-cdr-ga.20

2 years ago

2.34.1-canary.0

2 years ago

2.33.2

2 years ago

2.33.4-shopify.8

2 years ago

2.33.3-edge.8

2 years ago

2.32.1-next.22

2 years ago

2.32.1-next.21

2 years ago

2.30.3-shopify.5

2 years ago

2.30.3-shopify.3

2 years ago

2.30.3-shopify.4

2 years ago

2.30.2-shopify.2

2 years ago

2.30.2-shopify.0

2 years ago

2.29.8

2 years ago

2.29.3

2 years ago

2.23.3

2 years ago

2.25.5-next.6

2 years ago

2.24.1-pte.127

2 years ago

2.24.1-pte.113

2 years ago

2.24.1-pte.115

2 years ago

2.23.4-pte.99

2 years ago

2.23.4-pte.96

2 years ago

2.23.4-pte.95

2 years ago

2.23.5-next.19

2 years ago

2.23.4-pte.107

2 years ago

2.23.4-pte.101

2 years ago

2.23.4-pte.102

2 years ago

2.24.3-pte.128

2 years ago

2.22.3

2 years ago

2.23.3-canary.84

2 years ago

2.23.3-next.34

2 years ago

2.23.3-next.35

2 years ago

2.23.3-next.4

2 years ago

2.22.6-next.121

2 years ago

2.23.2-canary.28

2 years ago

2.22.3-next.5

2 years ago

2.22.6-next.104

2 years ago

2.22.6-next.102

2 years ago

2.21.10

2 years ago

2.23.3-canary.59

2 years ago

2.23.2-next.3

2 years ago

2.23.1-next.10

2 years ago

2.21.8-canary.4

2 years ago

2.21.0

3 years ago

2.21.1-canary.2

3 years ago

2.20.0

3 years ago

2.19.0

3 years ago

2.19.1-canary.1

3 years ago

2.18.1-canary.9

3 years ago

2.18.0

3 years ago

2.17.3-canary.0

3 years ago

2.17.2

3 years ago

2.17.0

3 years ago

2.15.1-canary.4

3 years ago

2.15.0

3 years ago

2.14.1-canary.4

3 years ago

2.14.1-canary.36

3 years ago

2.14.0

3 years ago

2.13.2-canary.13

3 years ago

2.13.2-canary.9

3 years ago

2.13.2-canary.7

3 years ago

2.13.0

3 years ago

2.11.3-canary.6

3 years ago

2.11.0

3 years ago

2.10.2

3 years ago

2.10.2-next.0

3 years ago

2.9.1-canary.15

3 years ago

2.8.2-canary.40

3 years ago

2.9.0

3 years ago

2.7.5-next.41

3 years ago

2.7.4

3 years ago

2.6.0

3 years ago

2.5.0

3 years ago

2.5.1-canary.79

3 years ago

2.4.4-canary.81

3 years ago

2.4.4-canary.75

3 years ago

2.3.9-canary.32

3 years ago

2.3.7-canary.22

3 years ago

2.3.5-canary.23

3 years ago

2.3.5-canary.22

3 years ago

2.3.5-canary.17

3 years ago

2.3.5-canary.18

3 years ago

2.2.6

3 years ago

2.1.7-next.22

3 years ago

2.1.7-next.21

3 years ago

2.1.5-canary.2

3 years ago

2.1.5-canary.3

3 years ago

2.1.4

3 years ago

2.1.1-ui.13

3 years ago

2.1.1-ui.18

3 years ago

2.1.1-ui.14

3 years ago

2.1.2-ui.11

3 years ago

2.1.0

3 years ago

2.0.10-next.46

3 years ago

2.0.10-next.47

3 years ago

2.0.10-canary.11

3 years ago

2.0.10-canary.0

3 years ago

2.0.9

3 years ago

2.0.1

4 years ago

2.0.0

4 years ago

1.150.5-canary.6

4 years ago

1.150.2-canary.0

4 years ago

1.150.1

4 years ago

1.150.0

4 years ago

1.149.18

4 years ago

1.149.16

4 years ago

1.149.0

4 years ago

1.148.0

4 years ago

1.148.1

4 years ago

0.147.10-next.23

4 years ago

0.147.10-next.22

4 years ago

0.147.0

4 years ago

0.147.0-alpha.1

4 years ago

0.147.0-alpha.2

4 years ago

0.147.0-alpha.0

4 years ago

0.146.0

4 years ago

0.146.0-alpha.2

4 years ago

0.146.0-alpha.1

4 years ago

0.145.0

4 years ago

0.145.0-alpha.32

4 years ago

0.144.0

4 years ago

0.142.6

5 years ago

0.142.0

5 years ago

0.141.7-next.20

5 years ago

0.141.7-next.19

5 years ago

0.141.7-next.18

5 years ago

0.141.5

5 years ago

0.141.4

5 years ago

0.141.3

5 years ago

0.141.1

5 years ago

0.141.0

5 years ago

0.140.30

5 years ago

0.141.0-alpha.12

5 years ago

0.140.0

5 years ago

0.139.3-parrot.0

5 years ago

0.139.3-canary.0

5 years ago

0.140.0-alpha.4

5 years ago

0.140.0-alpha.3

5 years ago

0.140.0-alpha.1

5 years ago

0.139.0

5 years ago

0.139.0-rc.0

5 years ago

0.138.0

5 years ago

0.138.0-alpha.21

5 years ago

0.138.0-alpha.20

5 years ago

0.138.0-alpha.14

5 years ago

0.137.0

5 years ago

0.136.1-canary.5

5 years ago

0.136.0

5 years ago

0.135.3-next.6

5 years ago

0.135.0

6 years ago

0.135.0-next.2

6 years ago

0.135.0-next.1

6 years ago

0.134.2

6 years ago

0.134.1

6 years ago

0.135.0-beta.0

6 years ago

0.134.0

6 years ago

0.133.2

6 years ago

0.133.1

6 years ago

0.133.0

6 years ago

0.132.5

6 years ago

0.132.4-next.0

6 years ago

0.132.2

6 years ago

0.132.0

6 years ago

0.131.0

6 years ago

0.128.5

6 years ago

0.128.3

6 years ago

0.128.1

6 years ago

0.128.0

6 years ago

0.127.1

6 years ago

0.127.0

6 years ago

0.126.2

6 years ago

0.126.1

6 years ago

0.126.0

6 years ago

0.125.8

6 years ago

0.125.7

6 years ago

0.125.6

6 years ago

0.125.0

6 years ago

0.125.0-rc.4

6 years ago

0.124.12

6 years ago

0.125.0-rc.3

6 years ago

0.125.0-rc.2

6 years ago

0.125.0-rc.1

6 years ago

0.125.0-rc.0

6 years ago

0.124.0

6 years ago

0.120.0

6 years ago

0.119.0

6 years ago

0.118.4

6 years ago

0.118.0

6 years ago

0.117.0

7 years ago

0.116.0

7 years ago

0.116.0-rc.0

7 years ago

0.115.2

7 years ago

0.115.1

7 years ago

0.115.0

7 years ago

0.113.7

7 years ago

0.113.3

7 years ago

0.113.1

7 years ago

0.113.0

7 years ago

0.113.0-rc.0

7 years ago

0.112.0

7 years ago

0.111.6-beta.0

7 years ago

0.111.5

7 years ago

0.111.2

7 years ago

0.110.0

7 years ago

0.109.0

7 years ago

0.109.0-beta.0

7 years ago

0.108.0

7 years ago

0.108.0-beta.2

7 years ago

0.108.0-beta.1

7 years ago

0.107.27

7 years ago

0.106.28-next

7 years ago

0.106.27-next

7 years ago

0.106.21

7 years ago

0.106.13

7 years ago

0.106.12

7 years ago

0.106.10

7 years ago

0.106.2

7 years ago

0.105.1

7 years ago

0.105.0-drafts.2

7 years ago

0.105.0-drafts.0

7 years ago

0.104.44

7 years ago

0.104.43

7 years ago

0.104.34

7 years ago

0.104.30

7 years ago

0.104.26

7 years ago

0.104.23

7 years ago

0.104.22

7 years ago

0.104.19

7 years ago

0.103.13

7 years ago

0.103.12

7 years ago

0.103.11

7 years ago

0.103.9

7 years ago

0.103.0

7 years ago

0.102.5-next

7 years ago

0.102.4-next

7 years ago

0.102.2-next

7 years ago

0.102.1-next

7 years ago

0.102.0-next

7 years ago

0.101.20-next

7 years ago

0.101.18-next

7 years ago

0.101.16-next

7 years ago

0.101.14-next

7 years ago

0.101.13-next

7 years ago

0.101.12-next

7 years ago

0.101.10-next

7 years ago

0.101.6

7 years ago

0.101.7-next

7 years ago

0.101.6-next

7 years ago

0.101.5-next

7 years ago

0.101.3

7 years ago

0.100.12

7 years ago

0.100.4

7 years ago

0.100.3

7 years ago

0.99.10

7 years ago

0.99.9

7 years ago

0.99.6

7 years ago

0.99.4

7 years ago

0.99.0

7 years ago

0.2.2

7 years ago

0.2.1

8 years ago

0.2.0

8 years ago

0.1.0

8 years ago

0.0.3

8 years ago

0.0.2

8 years ago

1.1.0

8 years ago