Slate: Resizing images in editor

Created on 8 Jan 2019  路  4Comments  路  Source: ianstormtaylor/slate

Is there a way to resize images in slate? a ready-made plugin or a tool for resizing that I can implement on slate?
Thanks!

Most helpful comment

No such plugin but I've written code that does something similar. The caveat is that it's not the kind of resizing you can do with dragging your mouse. It's more like choosing between size A or size B (you can implement more breakpoints of course).

The UI is here > https://github.com/dmitrizzle/Analog.Cafe/blob/develop/src/app/user/components/controls/PictureMenu/index.js which is a child of https://github.com/dmitrizzle/Analog.Cafe/blob/develop/src/app/core/components/vignettes/Picture/index.js#L187 - which then does the thing on Slate here: https://github.com/dmitrizzle/Analog.Cafe/blob/develop/src/app/core/components/vignettes/Picture/index.js#L107 . You can see it work here: https://www.analog.cafe/submit/compose

All 4 comments

Im not aware of any and that's probably because it has very little to do with Slate.

Image is void which encourages to use your own React component with internal state and logic. You can use any 3rd-party library or DIY solution in that to resize the image, just make sure to update block data.

That being said, there probably is a plugin or two if you search hard enough. I suggest to find a Slate based editor that has image resize feature and take a peek at plugins.

Thanks!
After long time searching I figured out exactly that you said at first - Creating my own resizing component is the ONLY solution as of right now.
The available generic resizing components (not relating to slate, but totally independent) were also not perfectly fit the editor.

No such plugin but I've written code that does something similar. The caveat is that it's not the kind of resizing you can do with dragging your mouse. It's more like choosing between size A or size B (you can implement more breakpoints of course).

The UI is here > https://github.com/dmitrizzle/Analog.Cafe/blob/develop/src/app/user/components/controls/PictureMenu/index.js which is a child of https://github.com/dmitrizzle/Analog.Cafe/blob/develop/src/app/core/components/vignettes/Picture/index.js#L187 - which then does the thing on Slate here: https://github.com/dmitrizzle/Analog.Cafe/blob/develop/src/app/core/components/vignettes/Picture/index.js#L107 . You can see it work here: https://www.analog.cafe/submit/compose

Looks like this issue is solved. Closing it.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

markolofsen picture markolofsen  路  3Comments

ianstormtaylor picture ianstormtaylor  路  3Comments

bengotow picture bengotow  路  3Comments

chriserickson picture chriserickson  路  3Comments

ianstormtaylor picture ianstormtaylor  路  3Comments