![]() ![]() ![]() Values from 0.0 to 1.0 in fractions of the image dimensions. Specify a center point to focus on when cropping the image. Specify the height of the rendered image in pixels. Specify the width of the rendered image in pixels. Usually you should preconfigure your builder with dataset and project id, but even when you did, these let you temporarily override them if you need to render assets from other projects or datasets. In order for hotspot/crop processing to be applied, the image record must be supplied, as well as both width and height. Accepts either a Sanity image record, an asset record, or just the asset id as a string. Note that the url() function needs to be the final one in order to output the url as a string. There are a large number of useful options you can specify, like e.g. You can specify both width and height like this: This will ensure that the author image is alway 200 pixels wide, automatically applying any crop specified by the editor and cropping towards the hot-spot she drew. Then you can use the handy builder syntax to generate your urls: That way it will automatically be preconfigured to your current project and dataset: import React from 'react' import m圜onfiguredSanit圜lient from './sanit圜lient' import imageUrlBuilder from const builder = imageUrlBuilder(m圜onfiguredSanit圜lient) Getting started npm install -save most common way to use this library in your project is to configure it by passing it your configured sanit圜lient. In addition to the core use case, this library provides a handy builder to access the rich selection of processing options available in the Sanity image pipeline. The most typical use case for this is to give it a sanity image and specify a width, height or both and get a nice, cropped and resized image according to the wishes of the content editor and the specifications of the front end developer. This helper will by default respect any crops/hotspots specified in the Sanity content provided to it. Generate image urls from Sanity image records. ![]()
0 Comments
Leave a Reply. |