-
Notifications
You must be signed in to change notification settings - Fork 4.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Enhancement: Inspector interface for setting pixel dimensions of image #4914
Comments
Recently I've been thinking quite a bit on how to best handle images. The current behaviour: default of 100% width with 50% width for floated images makes a lot of sense and covers most user cases.
With the Of course it would be good to have support for entering pixel values in the inspector. A quirk there will be that the editor and the theme may have different width, so results may be a bit unexpected in some cases. But the "power users" will definitely love it. Having a row of percentage values (perhaps only for floated and centered images) would also be really nice. The ability to set several images to uniform size was one of the features many users wanted back after the last major version update of TinyMCE (yep, there used to be a "step-slider" with 10% steps for image resizing in the previous "image settings" modal). On the other hand having percentage widths for images and not knowing the theme width brings some hard to solve problems when implementing the |
I'm going to look into this one.
Responsive images were added in #4898, which I think nicely solves this retina image use case. Still, I agree it would be nice to be able to explicitly set an image's dimensions using the inspector. @jasmussen: With this in mind, is the mockup in the description above up to date?
@azaozz: Where did you get to with your experimenting? 🙂 |
Yes. Though here's an additional one where the 100% is pressed, which simply inputs the intrinsic dimensions of the image. CC: @karmatosed for sanity check. |
Note that a component "ButtonGroup" was added to support the recent font size iteration, and should be used here. |
Looks good to me @jasmussen, this is being asked for in feedback so good to work on and get shipped. |
Hey just wanted to check in. I found this ticket through #2775 Is there a way to reset manual resizing of images and return them to a responsive state in Gutenberg? |
Not yet, but pressing the Reset button that we're proposing to add as part of this issue would accomplish just that. |
It's correct that there will very soon be an explicit reset button, which should be somewhat obvious. But you can still do it today, albeit in a less discoverable way, by applying and then unapplying a wide alignment. |
Thank you. Good information to know. So far I'm loving Gutenberg! UX has been
huge improvement. Excited to start building my own blocks soon.
|
Been thinking about this for a long time and got a "mini-proposal" on handling images (that may be better as a new issue?). Currently:
To fix this in the editor:
To fix this for the front-end:
Am I missing something? Any other ideas or suggestions? Edit: moved this to #6177. |
This would be nice to have: the ability to manually set the pixel dimensions of an image. This is especially useful if you are inserting a 2x retina image, and need to set the dimensions to half of what the image is born with.
Right now the only way to do that is to enter the code editor and adjust all the dimensions there. If you only use the "Edit HTML" on the block level, you do not get access to edit the HTML hints that need to be edited in order for the block to validate.
It would be nice to simply allow these dimensions to be edited in the inspector for images.
Mockups:
We expand the Block Settings for the Image block to have additional options:
The text was updated successfully, but these errors were encountered: