WordPress.org

Make WordPress Core

#24291 closed task (blessed) (invalid)

Tweaks to Image post format UI

Reported by: markjaquith Owned by:
Milestone: Priority: high
Severity: major Version: 3.6
Component: Post Formats Keywords: has-patch
Focuses: Cc:

Description (last modified by DrewAPicture)

The image post format UI is not friendly enough. There is too much emphasis on providing a URL or HTML, and not enough emphasis on using the WordPress media library.

We should hide the HTML behind a click, kind of like WordPress.com's toolbar-poster does.

Attachments (35)

24291.diff (505 bytes) - added by markjaquith 12 months ago.
24291.2.diff (440 bytes) - added by aaroncampbell 12 months ago.
24291.link-target.diff (717 bytes) - added by aaroncampbell 12 months ago.
24291.3.diff (3.6 KB) - added by markjaquith 11 months ago.
24291.4.diff (4.4 KB) - added by aaroncampbell 11 months ago.
24291.5.diff (5.2 KB) - added by markjaquith 11 months ago.
24291.6.diff (5.2 KB) - added by aaroncampbell 11 months ago.
24291.7.diff (5.3 KB) - added by DrewAPicture 11 months ago.
24291.8.diff (5.9 KB) - added by aaroncampbell 11 months ago.
24291.9.diff (6.1 KB) - added by aaroncampbell 11 months ago.
24291.10.diff (6.1 KB) - added by aaroncampbell 11 months ago.
24291.11.diff (6.1 KB) - added by aaroncampbell 11 months ago.
24291.12.diff (5.9 KB) - added by aaroncampbell 11 months ago.
24291.13.diff (6.0 KB) - added by DrewAPicture 11 months ago.
24291.14.diff (6.4 KB) - added by markjaquith 11 months ago.
24291.15.diff (6.5 KB) - added by markjaquith 11 months ago.
24291.16.diff (9.1 KB) - added by markjaquith 11 months ago.
24291.17.diff (8.7 KB) - added by DrewAPicture 11 months ago.
24291.18.diff (11.3 KB) - added by markjaquith 11 months ago.
24291.19.diff (12.0 KB) - added by markjaquith 11 months ago.
24291.20.diff (7.6 KB) - added by aaroncampbell 11 months ago.
24291.21.diff (12.4 KB) - added by aaroncampbell 11 months ago.
24291.22.diff (12.4 KB) - added by DrewAPicture 11 months ago.
'Drop image file to upload'
24291.23.diff (12.8 KB) - added by aaroncampbell 11 months ago.
24291.24.diff (13.4 KB) - added by azaozz 11 months ago.
Same as .23 except for the above change
24291.25.diff (14.0 KB) - added by markjaquith 11 months ago.
bail after non-image uploads
24291.26.diff (14.2 KB) - added by markjaquith 11 months ago.
clear the progress bar after errors
post-formats.js.patch (615 bytes) - added by azaozz 11 months ago.
24291.27.diff (1.1 KB) - added by azaozz 11 months ago.
24291.strings.diff (969 bytes) - added by SergeyBiryukov 11 months ago.
24291.28.diff (2.0 KB) - added by azaozz 11 months ago.
post-formats-img-link.patch (430 bytes) - added by azaozz 11 months ago.
post-formats-img-link.2.patch (429 bytes) - added by azaozz 11 months ago.
24291.29.diff (1.3 KB) - added by azaozz 11 months ago.
24291.30.diff (487 bytes) - added by azaozz 11 months ago.

Download all attachments as: .zip

Change History (66)

comment:1 SergeyBiryukov12 months ago

  • Milestone changed from Awaiting Review to 3.6

comment:2 DrewAPicture12 months ago

  • Cc xoodrew@… added
  • Keywords needs-patch added

comment:3 markjaquith12 months ago

Also should limit the size of the image displayed on the post screen. If it's tall, it can push everything else way way down.

markjaquith12 months ago

aaroncampbell12 months ago

comment:4 DrewAPicture12 months ago

Based on @markjaquith's comments in devchat today, I mocked up a refined UI. I like the idea of using an 'Add Image' button because it's in-line with other media insert UI's. It could also be recycled as 'Add Audio' or 'Add Video' in a similar fashion. Took me a little longer than I'd hoped to mock up.

If it's too late, I apologize.

First image is the initial view, second is if you click the text link, third is if you've uploaded an image:

http://cl.ly/image/0Y1X1s283B3D

markjaquith11 months ago

aaroncampbell11 months ago

markjaquith11 months ago

aaroncampbell11 months ago

DrewAPicture11 months ago

aaroncampbell11 months ago

aaroncampbell11 months ago

aaroncampbell11 months ago

aaroncampbell11 months ago

aaroncampbell11 months ago

DrewAPicture11 months ago

comment:5 DrewAPicture11 months ago

Current-ish UI (since this is a UI thread after all)

http://f.cl.ly/items/1N3B27152e273j2c1b1v/Screen%20Shot%202013-05-09%20at%201.00.07%20AM.png

comment:6 DrewAPicture11 months ago

  • Description modified (diff)
  • Keywords has-patch added; needs-patch removed

markjaquith11 months ago

markjaquith11 months ago

markjaquith11 months ago

DrewAPicture11 months ago

markjaquith11 months ago

markjaquith11 months ago

comment:7 markjaquith11 months ago

Summary of what we did, through .19.diff:

  1. textarea not shown by default (hidden behind a click)
  2. Drag and drop upload
  3. Bigger click target for going into Media modal.
  4. Image preview height constrained (300 pixels), so your content area and click-through link doesn't get buried.
  5. Hid the options like alignment, size, etc, that didn't have any effect anyway.

Bonus: got wp-format-FOO working on the <body> class, so you can do body.wp-format-FOO .additional-selector {} rules to target anything on the page.

aaroncampbell11 months ago

comment:8 aaroncampbell11 months ago

24291.20.diff adds drag-over styles for the drag/drop.

aaroncampbell11 months ago

comment:9 aaroncampbell11 months ago

.20 was accidentally based off .9 instead of .19. Sometimes typos do that I guess. 24291.21.diff should be based off the right patch.

There's still a problem with the body class introduced in .19 that I haven't looked into. For new posts it starts with the class wp-format- instead of wp-format-{format}. This happens even if you use wp-admin/post-new.php?format={format}

DrewAPicture11 months ago

'Drop image file to upload'

aaroncampbell11 months ago

comment:10 azaozz11 months ago

Looking at 24291.23.diff, the use of get_post_format() in admin-header.php. Perhaps we can make get_post_format() return false or null when no $post or no post format support and return '' (empty string) when a post format is not set, i.e. post_format == 'standard'.

Then we can use that to add the wp-format-* body class only when needed.

azaozz11 months ago

Same as .23 except for the above change

comment:11 ryan11 months ago

Is there a problem with showing wp-format-standard when there's no post or post format support?

comment:12 azaozz11 months ago

There shouldn't be a problem but better not to add the body class on all admin pages. A plugin might use it to apply some css, etc.

markjaquith11 months ago

bail after non-image uploads

markjaquith11 months ago

clear the progress bar after errors

comment:13 markjaquith11 months ago

In 24226:

Improve the UX and flow of the Image post format.

  • Drag-and-drop
  • Textarea for HTML/URL hidden to start
  • Bigger click target for entering Media modal
  • Image preview height-contrained to 300 pixels
  • Hid the alignment, size, etc options that didn't have an effect anyway
  • Got wp-format-{format} into the <body> class

props DrewAPicture, aaroncampbell, markjaquith, azaozz. see #24291.

azaozz11 months ago

comment:14 azaozz11 months ago

When uploading, the files can be restricted by extension in Plupload. Files with other extensions or without an extension would fail (silently).

Adding multi_selection: false would also restrict it to allowing only one file when the select files button is used (old IE), doesn't restrict how many files can be dropped.

azaozz11 months ago

comment:15 azaozz11 months ago

In 24291.27.diff:

  • Limit the uploader to html5 runtime as w use it for drag/drop only. That means no instance in IE < 10. Fixes problems with the position of the flash runtime "Select Files" button covering the whole screen.
  • Keep only the first file if more are dropped.

comment:16 follow-up: SergeyBiryukov11 months ago

Would like to clean up two strings in 24291.strings.diff.

Using printf() doesn't seem like a good idea here, it's too easy to accidentally remove a placeholder when there's no space between characters. Plain HTML is more readable.

I think printf() makes more sense for conditional links, like the one in [18917].

azaozz11 months ago

comment:17 azaozz11 months ago

24291.28.diff is same as .27.diff plus makes the upload progress bar visible.

comment:18 SergeyBiryukov11 months ago

In 24232:

Display consistent labels in Image post format UI for users with and without unfiltered_html capability. props tollmanz. fixes #24304. see #24291.

comment:19 in reply to: ↑ 16 SergeyBiryukov11 months ago

Replying to SergeyBiryukov:

Would like to clean up two strings in 24291.strings.diff.

Merged into [24232].

comment:20 follow-up: jbobich11 months ago

Currently when you insert the image, you're still inserting a block of HTML with the image wrapped in a link to the image file (even though it's now potentially hidden). This also means that the_post_format_image() on the frontend does not take into account properly the "Image click-through link" field. -- I'm sure this'll get ironed out, though, as you move on.

However, would it be a crazy idea to suggest that this work more similarly to setting a featured image and remove the entire element of being able to edit the custom HTML block? Then, essentially you're just saving an attachment ID and the optional "Image click-through link" field with the post format meta data.

It seems like the average end-user is not savvy with HTML or knowing what size of an image they should be uploading. I think this would simplify things moving forward, make the UI easier to use, help to create more of a standard, and allow the theme to take more of the control.

Last edited 11 months ago by jbobich (previous) (diff)

comment:21 markjaquith11 months ago

In 24236:

Improvements of Image format dropzone

  • Limit drag-drop Image format zone to HTML5 runtime
  • Only keep the first file dropped
  • Only upload image files
  • Fix CSS for the progress bar

props azaozz. see #24291.

comment:22 markjaquith11 months ago

In 24242:

Revert change to get_post_format() introduced in [24226].

see #24291

comment:23 markjaquith11 months ago

In 24243:

A better logic check for whether we are looking at a post formats supporting view.

see #24291.

comment:24 in reply to: ↑ 20 adamsilverstein11 months ago

Replying to jbobich:

Currently when you insert the image, you're still inserting a block of HTML with the image wrapped in a link to the image file (even though it's now potentially hidden). This also means that the_post_format_image() on the frontend does not take into account properly the "Image click-through link" field. -- I'm sure this'll get ironed out, though, as you move on.

However, would it be a crazy idea to suggest that this work more similarly to setting a featured image and remove the entire element of being able to edit the custom HTML block? Then, essentially you're just saving an attachment ID and the optional "Image click-through link" field with the post format meta data.

It seems like the average end-user is not savvy with HTML or knowing what size of an image they should be uploading. I think this would simplify things moving forward, make the UI easier to use, help to create more of a standard, and allow the theme to take more of the control.

see fix for inserted HTML, #24289

azaozz11 months ago

comment:25 azaozz11 months ago

In 24291.29.diff:

  • When initializing wp.Uploader pass null for container and browser. Fixes a bug where another instance of the uploader was attached to <body>.
  • Destroy the uploader instance if drag/drop is not supported (IE8 & 9).
  • Don't select/focus the title field content on switching formats.

comment:26 azaozz11 months ago

In 24310:

Image post format UI:

  • When initializing wp.Uploader pass null for 'container' and 'browser'. Fixes a bug where another instance of the uploader was attached to <body>.
  • Destroy the uploader instance if drag/drop is not supported (IE8 & 9).

See #24291.

azaozz11 months ago

comment:27 azaozz11 months ago

24291.30.diff​: select/focus the title field only when empty.

comment:28 follow-up: jakemgold11 months ago

Trying to follow the various image post format UI threads and branches, and picking this one. I think there are still some serious usability issues here.

First, it seems to me we should follow the example of the "Featured Image" field. Once an image is provided, hide the uploader / HTML field, subbing it with a "Remove image" link that take discards the preview and replaces it with the fields.

Second, it seems to me if we're going to instantly show previews for uploaded media (sans saving), we should do the same for image URL / HTML. I realize this might be a bit heavy, but with some balance tags magic / sanitizing (which is already being being addressed for this field), we can can show the output from the free form HTML field when the field loses focus.

Finally, I know it's been raised elsewhere, but I'm not sure I even get the logic behind a free form HTML field (although I *do* get allowing a URL for an image), and I tend to lean toward strongly believing this is a bad idea, while being open to someone explaining the use case.

As theme developers, the free form HTML - which tolerates embedded links that override the click through field - makes it much harder than it should be to reliably pull the raw data out of this post format for fancier / alternate presentation of the content (in addition to making basic output, as it is now, somewhat heavy when HTML is provided). More importantly, it just seems bizarre to me that - in an image post format - I can just write something like "<strong>hello world!</strong>"... which is accepted and works. Heck, why don't we just call it a "free for all" post format?

Might there be uses cases for raw HTML in an image post format (struggling as I am to think of them)? I guess. But that's why we have hooks and plug-ins.

Again - tried to read through all the threads on this subject, so forgive me if I'm covering old ground.

comment:29 jakemgold11 months ago

  • Cc jake@… added

comment:30 in reply to: ↑ 28 adamsilverstein11 months ago

Replying to jakemgold:

Trying to follow the various image post format UI threads and branches, and picking this one. I think there are still some serious usability issues here.

First, it seems to me we should follow the example of the "Featured Image" field. Once an image is provided, hide the uploader / HTML field, subbing it with a "Remove image" link that take discards the preview and replaces it with the fields.

great idea!

Second, it seems to me if we're going to instantly show previews for uploaded media (sans saving), we should do the same for image URL / HTML. I realize this might be a bit heavy, but with some balance tags magic / sanitizing (which is already being being addressed for this field), we can can show the output from the free form HTML field when the field loses focus.

Finally, I know it's been raised elsewhere, but I'm not sure I even get the logic behind a free form HTML field (although I *do* get allowing a URL for an image), and I tend to lean toward strongly believing this is a bad idea, while being open to someone explaining the use case.

As theme developers, the free form HTML - which tolerates embedded links that override the click through field - makes it much harder than it should be to reliably pull the raw data out of this post format for fancier / alternate presentation of the content (in addition to making basic output, as it is now, somewhat heavy when HTML is provided). More importantly, it just seems bizarre to me that - in an image post format - I can just write something like "<strong>hello world!</strong>"... which is accepted and works. Heck, why don't we just call it a "free for all" post format?

Might there be uses cases for raw HTML in an image post format (struggling as I am to think of them)? I guess. But that's why we have hooks and plug-ins.

Again - tried to read through all the threads on this subject, so forgive me if I'm covering old ground.

i agree- seems like the field should allow only an image url, and if an image is dropped only the image URL should be inserted (i tried that in #24289); captions could be a separate field. this would simplify the image format for users and developers.

comment:31 ocean9011 months ago

  • Milestone 3.6 deleted
  • Resolution set to invalid
  • Status changed from new to closed
Note: See TracTickets for help on using tickets.