Question: do images get properly…

Question: do images get properly attached to posts when publishing via various WP.com apps and clients?

One reason to know the answer is that certain displays, like Reader, might depend on an image being attached to the post in question to pull out a representative image to the post card in the Reader stream.

For example, in the Android app Reader: Reader: certain posts with an image don’t show the image.

The Flow Patrol team recently dug into this more (source: 6 tagged posts) to see how each app or client behaves. Here are the results:

Environment Image attached? Preview in Reader? Test results
Jetpack WP Admin Yes Yes #
Simple WP Admin Yes Yes #
WP Android No Yes #
WP iOS Yes Yes #
Calypso Yes Yes #
Gutenberg No Depends #

Summary: Looks like both Gutenberg and WP Android media handling could use more investigation to make sure images added to posts during publishing are attached to said posts correctly.

#image-post-flow #attachments #media

Media Modal: Selection Model, Full-width Images, Gallery Flow, and Click-to-view/edit

In this 2015 thread, I listed some of my media modal requirements. In light of possibly changing the selection model and click-to-view/edit flow of Calypso’s media modal, I thought I’d post the list here.

  • Resolve accidentally inserting individual images instead of galleries. This is annoying on desktop and even more annoying on mobile where cleaning up after inserting a bunch of images is more difficult.
  • Provide access to full-width images during image insertion and gallery creation flows. Currently, when making galleries, I have to take off my bifocals, stick my face in the screen, and scrutinize tiny thumbnails. I correlate the thumbnails with full-width images viewed in the camera roll. I flip back and forth between camera roll and the media modal, hoping I’m selecting the thumbnails that correspond to the images I want. I’ve sat with clients helping them add galleries to their sites. We huddle around a laptop looking at tiny images, flipping back and forth with the camera roll or gallery app. We have an industry of people making awesome themes for showcasing photos and galleries, yet creating those galleries is a presbyopic strain that makes you feel old. Nobody likes software that makes them feel old or stupid. I feel the lack of access to full-width images in insertion flow in every app and mobile web interface I use.
  • Keeping with the full-width trend, provide fill-width input fields, particularly for captions. Inputs constrained to the width of thumbnails or sidebars are really difficult to use. Scrolling through inputs is not enjoyable on phones, especially on iOS which tends to trigger what I call “boxed input scrolling”. You can’t move the cursor through text lying beyond the confines of the input box. Full-width captions will be a huge improvement.
  • Allow arrowing through images in a set similar to what is done in the attachment details modal. This accommodates the full-width captions mentioned above. Tap/click/swipe through images, captioning as you go. As someone who creates a lot of captioned galleries, I really look forward to this.

#click-to-view-edit, #editor, #galleries, #gallery-flow, #media, #media-model, #selection-model

Editor and Media Flow Wishlist

These are the editor and media tickets that most affect my publishing routine. Fixing these would allow me to flow. These are roughly in order from the most to the least impactful on my personal flow. The first 6 are the ones I’d most like to see fixed.

#editor, #media

#duplicates, #hashtag, #hashtags, #longer-ones, #pesky

Calypso, wp-admin parity

A quick personal parity audit. Things in wp-admin that I miss the most in Calypso:

  • The wp-admin editor keeps the Visual and Text tabs visible on screen when vscrolling. I can switch between the two without losing cursor position in the Visual tab. This is a big deal for me, as I often switch between the two modes to work around editor bugs and add ids to headers.
  • Cmd+z undo is smooth in wp-admin, but causes jerky reflow and vscroll loss in Calypso.
  • The wp-admin media modal offers filtering the media library down to “images uploaded to this post”. Without this filter, editing media for an old post requires scrolling through the media lib history looking for the right images. #2136
  • wp-admin has a reverse order button in the gallery editor #339
  • wp-admin offers an image edit modal accessed from an inline toolbar in the editor. This allows access to alt text flow. Calypso’s lack of alt text handling in drag-and-drop flow is an accessibility issue. #307
  • Revisions opens in wp-admin. Editors should have great revisions flow.
  • The wordpress.com customizer does not offer theme switching. When first setting up a site, I want to experiment with different themes without leaving the live preview context.
  • The wp-admin editor allows inserting media in the HTML editor. I need this to workaround bad image flow in the visual editor. #1295
  • Bulk edit. I occasionally need it for changing taxonomy. #8344
  • HTML editor toolbar #308
  • I find myself back in wp-admin often for comment moderation. Landing here is always startling. What level of disorientation do Calypso users experience the first time they follow a link in a comment moderation email and see wp-admin?

Smoother Cmd+z, the Visual and Text tabs staying on screen during vscroll, and image insertion from the HTML editor make wp-admin a more productive editor for me. Respect vscroll. Avoid scroll, scan, correlate cycles.

#comments, #editor, #media, #parity, #vscroll, #wp-admin

#1295, #2136, #307, #308, #339, #8344

Session notes: Image editing – Macnchrome, iPhone 6+

Belatedly pubbing a few notes from an image editing session last week.

https://github.com/Automattic/wp-calypso/milestone/107

Flow

There is not yet access to image editor from the inline image toolbar in the editor. This is the most natural flow for me. Right now, images must be edited from the media library. The flow:

  • Click + to open media modal
  • Hover over the desired image
  • Click the pencil icon
  • Click Edit Image
  • Make changes
  • Click Done
  • Bounced back to the media library – skipping past the image meta modal – where a new edited image awaits
  • The new image does not copy the meta fields of the original image

This flow is awkward when wanting to edit an image and its meta at the same time or when wanting to edit the image in place. Consider this: you click the pencil icon, make changes to meta fields, edit the image, click Done, and get popped back to the media lib with a new image containing none of your meta edits. Confusing #forked-flow.

https://github.com/Automattic/wp-calypso/issues/7989#issuecomment-246416361

Mobile

Mobile isn’t supported yet, but the interface still shows. I took a couple screenshots on an iPhone 6+ to capture the current state. The editor doesn’t load the image.

Visual record

#desktop, #image-edit, #images, #ios, #macos, #media, #media-modal, #mobile, #phablet, #session-notes

Session notes: reader, editor, free domain claim, gallery ordering, editing links – Macnchrome, iOS

Free domain claim

How do I get rid of this notice without claiming a domain I don’t want?

Reverse gallery order

Wishing I could click to reverse order.

wp-admin accommodates.

If I didn’t have wp-admin as fallback, I’d work around this by changing the sort order in my source app (Pixave) and reuploading the gallery. Reuploading is my go to workaround for media bugs and awkward flow, impacting quota.

Appending to link text

Here’s a bug we’ve lived with in WP and Calypso for years. It still frustrates. Appending or prepending text to a link requires moving in from the boundaries and juggling characters.

Calypso editor on iOS

  • The reload time after switching to another app and back to the browser is 10 seconds-ish of jerky loading.
  • First taps are slow to process. Double taps are often required.
  • Tapping plus to add media will focus the editor, put the cursor inside, and then open the modal over the course of a couplefew seconds.
  • I tend to wait a couple seconds after tapping anything before tapping again as I might interrupt something.
  • Post preview wouldn’t load.
  • #scroll-bleed behind the preview modal.
  • Cancelling preview takes you back to the editor instead of  to actions.
  • A draft started with Calypso on iOS didn’t show in Calypso macnchrome until I edited another post. Then the draft showed. I also experience this with drafts started in Ulysses. The provokes data loss #anxiety-flow.

Media library

Clicking the pencil icon also selects the image. I expected to edit without selecting.

Links in reader

In the iOS app reader, links within post content open in a pop up that is kind to context. Calypso’s mobile web reader follows these links, requiring browser back nav that sometimes stomps #vscroll.

Video drag-and-drop insertion

A video dropped onto the editor inserted off screen, at the top of the document. I probably scrolled down without clicking into the editor to position the caret. I thought the insert didn’t work since it happened offscreen, so I inserted again after positioning the caret. I saw that I had an extra video at the top when I previewed. I’m used to Ulysses where the caret follows the cursor during drop.

Notifications Search

Wishing again that I could search notifications. 🙂

#desktop, #domain-mapping, #editor, #ios, #links, #macos, #media, #mobile, #reader, #session-notes

Full-width media views during selection

Media flows that don’t provide full-width views during selection are inaccessible to me. They are frustrating and make me feel old.  I spend too much time hovering my face over screens as I scrutinize thumbnails with my presbyopic eyes. Most media pickers lack full-width views during selection. Telegram’s picker is an exception.

telegram-media

Telegram in image details view

Telegram shows the full width of the image across the full width of the screen without cropping. Tapping the image selects/deselects.

Few apps have image selection flow that is accessible to me. Google Photos provides one of the better media experiences around, in app form and on the mobile web. But, it, like so many interfaces, limits me to thumbnails during selection.

google-photos-media

Google Photos app showing image selection

Google Photos on desktop, however, provides a magnifying glass overlay on hover that opens a full-width image with a selection toggle and arrows for moving through the images in full-width view. This I like.

And here’s the selection websites get in iOS Safari. I find it so difficult to select images with this that I jump to the camera roll to access more comfortable views and then jump back to the picker on the web page. I then must correlate between the camera roll and media picker lists, which usually sort in opposite directions.

ios-safari-picker

iOS media picker showing image selection

Likewise with the media picker in the WP iOS app.

wp media picker

WordPress iOS app showing image selection

I’ve been going on about full-width images during selection for awhile. The new Calypso media modal accommodates me somewhat.

calypso-media

Calypso’s image details modal

That provides an image large enough for me to make selection and captioning decisions, but it is unavailable in gallery flow and doesn’t correlate between details view and grid view well, meaning list scanning and back-and-forth correlation are necessary. Correlating  between lists and grids is a frustrating drain, especially when deciding on which of several similar looking photos to use. All of my list correlation back and forth is anxiety flow working around inaccessibly small (and often cropped) images in media pickers. Telegram on iOS and Google Photos on the desktop don’t have these correlation problems because full-width images are available and selection is indicated and alterable in the full-width view. This saves me time, frustration, and physical pain. The lack of comfortably viewable images during media selection ruins publishing and sharing interfaces for me.

#a11y, #accessibility, #chrome, #desktop, #full-width, #images, #ios, #macos, #media, #media-flow, #media-modal, #phablet, #scroll-scan-correlate