Skip to content
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

Editor: a full image edit options modal is missing #307

Closed
designsimply opened this issue Nov 20, 2015 · 19 comments
Closed

Editor: a full image edit options modal is missing #307

designsimply opened this issue Nov 20, 2015 · 19 comments
Assignees
Labels
Accessibility (a11y) [Feature] Media The media screen in Calypso, general media management, or integration with third party media. [Feature] Post/Page Editor The editor for editing posts and pages. [Pri] High Address as soon as possible after BLOCKER issues [Type] Enhancement

Comments

@designsimply
Copy link
Contributor

Users would like to have a way to edit image details similar to the edit flow for galleries. They would like to be able to edit everything you have access to modify in WP Admin.

Here is how it currently looks in WordPress.com:

screen shot 2015-11-20 at fri nov 20 2 22 32 pm

screen shot 2015-11-20 at 14 24 32

In WP Admin, you can access the "Image Details" screen by clicking on the pencil icon in the image toolbar. (1m36s)

screen shot 2015-11-20 at fri nov 20 2 16 58 pm

screen shot 2015-11-20 at 13 58 47

Recently, the most-requested items have been:

  • Link To
  • Image Border & Color
  • Image Margins

They also expect to be able to change:

  • Caption
  • Alt text

Other things are used and requested less frequently to my knowledge.

@designsimply designsimply added [Type] Enhancement [Feature] Post/Page Editor The editor for editing posts and pages. [Pri] High Address as soon as possible after BLOCKER issues [Status] Needs Design Review Add this when you'd like to get a review / feedback from the Design team on your PR [Feature] Media The media screen in Calypso, general media management, or integration with third party media. labels Nov 20, 2015
@designsimply designsimply added this to the Editor: v1.1 milestone Nov 20, 2015
@koke
Copy link
Member

koke commented Nov 23, 2015

Link To is the one I'm missing the most, but in my case it's often because some images look small on a post and I want to be able to see them bigger. I think I wouldn't care about where the image links to if clicking on it would open a bigger view like it does when it's a gallery.

@mikejolley
Copy link
Contributor

Also seen this request in ticket 982616. For now I'm recommending they switch to the old editor to access the link-to functionality, or click the 'link' button after inserting the image which also works.

@eliorivero
Copy link
Contributor

User at 2437867-t complains about missing image editing features, in this case regarding cropping, flipping and rotation.

@carinapilar
Copy link

User missing the "Link To" feature here.

@aduth
Copy link
Contributor

aduth commented Jan 15, 2016

As an FYI, we do support linking to the original images by clicking the Add Link button in the toolbar after selecting an image. Doing so will prepopulate the URL field with a link to the full-size image. This is a common use-case, though we do intend to add support for other "Link to" options (attachment page, custom URL, etc).

@carinapilar
Copy link

Yeah, the problem is that you have to do that in all images, add image then add the link. Before, if you set "Link To" to "Media File" in the first one, when adding other images it was loading the same option as default.

@jeherve
Copy link
Member

jeherve commented Mar 28, 2016

User missing the "Link To" feature here.

@formosattic
Copy link

User in 2621414-t is missing "Link To" for media file. A feature he relies on a weekly basis.

@ryanboren
Copy link
Contributor

I'm trying to improve the accessibility of my posts my adding alt to my images. I don't see how to do that in Calypso. I usually drag-and-drop images. The inline image toolbar allows adding a caption, but not alt.

@ryanboren
Copy link
Contributor

I added accessibility because alt provisioning is not part of drag-and-drop image flow. Encourage accessible images.

@ryanboren
Copy link
Contributor

ryanboren commented Oct 25, 2016

Giving this a bump because of the accessibility implications.

The lack of a modal means those who drag-and-drop images directly into the editor can't add alt text to dropped images without rummaging in the insert image modal (accessed via a + plus button).

Further, without access to the image details modal from the editor’s inline image toolbar, adding alt to images on old posts requires scrolling through the image modal looking for the right image amidst months of thumbnails. Unlike in core WP, there is no “Images uploaded to this post” filter. This is supremely frustrating flow if you're trying to be good about alt text.

https://test.wordpress.com/2016/09/30/session-notes-drag-and-drop-image-flow-trackers-editor-masterbar-macnchrome-iphone-7/

@kriskarkoski
Copy link
Contributor

+1 to adding this soon

Link To in paritcular is asked by users quite frequently and while it can be done in the Calypso Editor by clicking the image, then the link icon, having to do this for every image is tedious and it’s not intuitive to users how to do this, especially those used to the options already in the WP Admin editor.

@shaunandrews
Copy link
Contributor

A quick idea for adding the details modal:

image selection and details

@davewhitley
Copy link
Contributor

davewhitley commented Mar 16, 2017

Here is what I suggest for tackling this.

  1. We need to at least add an edit button to the popover that is shown when you click an image in the editor. Missing that button is a broken experience.

fullsizerender 6

Next, it helps me to think of things that affect the original image, and things that are only relevant to this post.

  1. I propose that we add a new tab to the image details modal that contains all of the post specific settings:

fullsizerender 5

I'm not sure Post settings is the right name, but Display settings doesn't make much sense if it contains the link setting.

Image settings contains all of the existing info like caption and alt text.

We could also add in image size and image alignment to Post settings, but this would just be the secondary way to edit these settings. The primary way would be to do it from the popover in the editor.

  1. Next, I'd try to bring as many of the important actions into the editor popover, like Link To:

fullsizerender 8

Clicking the link icon would bring up a variation of the link modal:

fullsizerender 7

This way it's more obvious how to link an image, and they can do it right from the editor.

@davewhitley
Copy link
Contributor

Can this issue be filed under a Project, or can it be assigned to someone? It seems that Delta is already going to handle this issue, but I didn't know until reading through a P2.

@msmithgu
Copy link
Contributor

msmithgu commented May 5, 2017

This issue is partly covered by Issue #8306 and PR #13479 , which adds an inline image edit button, but does not provide a Link To feature. We may want to create a separate issue for a Link To button.

@jblz
Copy link
Member

jblz commented May 22, 2017

@msmithgu @gwwar -- is anything still outstanding here (or in #8306)?

Since #14143 got merged and we're tracking issues in (at least) #14233, are the above issues ok to close?

@gwwar
Copy link
Contributor

gwwar commented May 22, 2017

@jblz, yes I think it makes sense to close these out and add new issues for additional improvements.

@jblz
Copy link
Member

jblz commented May 22, 2017

Sounds good. Thanks! If anyone disagrees, please feel free to reopen :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Accessibility (a11y) [Feature] Media The media screen in Calypso, general media management, or integration with third party media. [Feature] Post/Page Editor The editor for editing posts and pages. [Pri] High Address as soon as possible after BLOCKER issues [Type] Enhancement
Projects
None yet
Development

No branches or pull requests