Neglected Pizza Money

    @sanity/imagetool
    TypeScript icon, indicating that this package has built-in type declarations

    2.29.8 • Public • Published

    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>

    Install

    npm i @sanity/imagetool

    DownloadsWeekly Downloads

    25,346

    Version

    2.29.8

    License

    MIT

    Unpacked Size

    116 kB

    Total Files

    63

    Last publish

    Collaborators

    • nina.andal
    • rankers
    • snorreeb
    • mattcraig
    • dkhuntrods
    • vincentquigley
    • stipsan
    • michael-sanity
    • rubioz
    • tonina
    • ritasdias
    • simeonsanity
    • kmelve
    • ricokahler
    • bjoerge
    • rexxars
    • skogsmaskin
    • simenss
    • hdoro
    • robinpyon
    • mariuslundgard
    • sanity-io
    • evenw
    • radhe_sanity
    • rbotten
    • vicbergquist
    • judofyr
    • obliadp
    • dcilke
    • fredcarlsen
    • jorn_georg
    • hermanw
    • svirs
    • mikolajsanity
    • sgulseth
    • atombender