Image Posting Flow – Self-hosted (Jetpack) wp-admin

There have been some reports of people attempting to write posts with images, only to find that the images aren’t actually present on the post. To work through the problem, we’re going to post a quick series here on https://test.wordpress.com of image posts from a variety of platforms. This is the post documenting the flow from the wp-admin dashboard of a self-hosted WordPress site (which happens to be connected via Jetpack, although that’s largely irrelevant for this flow).

#image-post-flow

  1. From the wp-admin dashboard, open the Posts list
  2. Click Add New
  3. Add a title and body to the post
  4. Click Add Media
  5. Click Upload Files
  6. Click Select Files, and choose a file from your local machine (note that the file selection dialog isn’t visible in the video below)
  7. Click Publish

Question 1: Is the image you uploaded attached to the post afterward?
Yes –
wp-admin-image-attached-from-wpadmin-jetpack

Question 2: If you view the resulting post in our various Reader environments, do you see an image preview?Yes (Seen here on desktop web, but also observed in Android)
wp-reader-image-present-from-wpadmin-jetpack

 

Image Posting Flow – Gutenberg

There have been some reports of people attempting to write posts with images, only to find that the images aren’t actually present on the post. To work through the problem, we’re going to post a quick series here on https://test.wordpress.com of image posts from a variety of platforms. This is the post documenting the flow from Gutenberg (version 1.4.0 on a Pressable self-hosted site).

#image-post-flow

  1. Select Gutenberg > New Post in WP Admin.
  2. Enter a title and text.
  3. Add an image block.
  4. Drag and drop an image on the image block.
  5. Wait for the image to upload.
  6. Select Publish in the top right.
  7. Select “View Post” to view the published post.

Question 1: Is the image you uploaded attached to the post afterward?

No, I checked in the media library and the image was not attached to the post:

Screen Shot 2017-10-13 at 5.57.18 PM.png

This was an issue that is supposed to be resolved:

https://github.com/WordPress/gutenberg/issues/1586

Question 2: If you view the resulting post in our various Reader environments, do you see an image preview?

The image does appear on the post in the Calypso Reader feed:

CalypsoReader-GutenbergPhotoPost

However, there is no image preview on the Reader feed in the iOS and Android apps:

Image Posting Flow – Calypso

There have been some reports of people attempting to write posts with images, only to find that the images aren’t actually present on the post. To work through the problem, we’re going to post a quick series here on https://test.wordpress.com of image posts from a variety of platforms. This is the post documenting the flow from Calypso (in Chrome, Mac OS 10.12.6).

#image-post-flow

  1. Select the Write button in the top right (masterbar).
  2. Enter a title and text.
  3. Select the Add Content button.
  4. Select Media.
  5. Drag and drop an image into the media library.
  6. Select the Insert button.
  7. Wait for the Publish button to be enabled.
  8. Select Publish in the top right.
  9. Select Publish again to confirm.
  10. View the post preview.

Question 1: Is the image you uploaded attached to the post afterward?

Yes. I confirmed in the WP Admin media library that the photo is attached to the post:

Screen Shot 2017-10-13 at 5.37.31 PM.png

Question 2: If you view the resulting post in our various Reader environments, do you see an image preview?

Yes. I confirmed the image shows up on the post in the Reader feed in Calypso, iOS app, and Android app:

Image Posting Flow – WPiOS

There have been some reports of people attempting to write posts with images, only to find that the images aren’t actually present on the post. To work through the problem, we’re going to post a quick series here on https://test.wordpress.com of image posts from a variety of platforms. This is the post documenting the flow from the iOS native app (version 8.5 on iPhone 6, iOS 11.0.3).

#image-post-flow

  1. Tap the Post button in the center of the bottom navigation bar.
  2. Enter a title and text.
  3. Tap the Add Media button.
  4. Select a photo from the device photos.
  5. Tap “Insert 1” to insert the photo in the post content.
  6. Wait for the photo to upload.
  7. Tap “Publish” in the top right.
  8. Tap the View Post button to view the post.

Question 1: Is the image you uploaded attached to the post afterward?

Yes. I confirmed in the WP Admin media library that the photo is attached to the post:

Screen Shot 2017-10-13 at 5.10.49 PM

Question 2: If you view the resulting post in our various Reader environments, do you see an image preview?

Yes. I confirmed the image shows up on the post in the Reader feed in Calypso, iOS app, and Android app:

Image Posting Flow – WordPress.com Simple wp-admin

There have been some reports of people attempting to write posts with images, only to find that the images aren’t actually present on the post. To work through the problem, we’re going to post a quick series here on https://test.wordpress.com of image posts from a variety of platforms. This is the post documenting the flow from the wp-admin dashboard of a WordPress.com Simple site

#image-post-flow

  1. From the wp-admin dashboard, open the Posts list
  2. Click Add New
  3. Add a title and body to the post
  4. Click Add Media
  5. Click Upload Files
  6. Click Select Files, and choose a file from your local machine (note that the file selection dialog isn’t visible in the video below)
  7. Click Publish

Question 1: Is the image you uploaded attached to the post afterward?
Yes –
wp-admin-image-attached-from-wpadmin

Question 2: If you view the resulting post in our various Reader environments, do you see an image preview?Yes (Seen here on desktop web, but also observed in Android)
wp-reader-image-present-from-wpadmin.png

 

Image Posting Flow – WPAndroid

There have been some reports of people attempting to write posts with images, only to find that the images aren’t actually present on the post. To work through the problem, we’re going to post a quick series here on https://test.wordpress.com of image posts from a variety of platforms. This is the post documenting the flow from the Android native app.

#image-post-flow

  1. From the main site menu, tap the Compose Post button on the bottom right of the screen
  2. Add a title and text
  3. Tap the Add Media button
  4. Select a photo from my phone’s memory
  5. Tap Publish
  6. Wait for the post to upload
  7. View the post

Question 1: Is the image you uploaded attached to the post afterward?
No –
wp-admin-image-unattached

Question 2: If you view the resulting post in our various Reader environments, do you see an image preview?
Yes (Seen here in WordPress.com / Calypso web, but also seen from the Android app)-
wp-reader-image-present

Mobile Empathy Challenge: Edit posts with embeds

My posts often have embedded tweets and YouTube videos. Conversations start on Twitter and then make their way into blog posts, where the tweets are cited. These days, a whole lot of journalism and advocacy features embedded tweets.

Here’s a sample of what my posts with embeds and videos looks like in the iOS app.

IMG_3885

Newlines have been stripped. This is an uneditable, run-on mess. I don’t even try to edit this for fear of messing something up. The iOS app is not a valid option for editing the kind of posts I write.

Unfortunately, neither is Calypso in mobile Safari. When a video is present, the text overflows the viewport. (Notice also the blank space below the title.)

IMG_3883

If I pinch to zoom all the text into view, I get this.

IMG_3884

This overflow and zooming is caused by embedded videos.

IMG_3886

The video overflow is not the only frustration. The Twitter embeds do a jittering resize dance that interferes with scrolling and cursor placement. I’m too tired to do a screencast, so here’s a static shot of two tweets that exhibit the behavior.

IMG_3887

Most of my posts contain embedded tweets. I think that is fairly typical of self-advocates bringing social media discussions into their posts. Many of my posts contain a related video or two from other self-advocates. Between embedded tweets and videos, I cannot edit my posts on my phone with either the iOS app or Calypso. I have to get out my laptop. I’m disabled, in chronic pain, and spend much of my time in bed. My phone is my primary device. I use my laptop only when I have to, which seems to be whenever I want to publish or edit posts on wordpress.com. Many of my posts are living documents that I continually update. I cannot update them from my phone using either the app or the web.

Other problems with editing on the mobile web (some of which apply to desktop too):

  • The editor toolbar is not pinned
  • Sometimes embeds load as blank placeholders.
  • Embeds cause reflow as the load, stomping vertical scroll postion and cursor postition.
  • Scroll bleed in settings menu.
  • Scroll bleed in preview.
  • The author selector doesn’t dismiss with outside taps.
  • Info bubbles in the settings sidebar sometimes run offscreen.
  • Jittery embed reflow when switching from HTML back to Visual.
  • Losing vscroll and cursor position when toggling settings.
  • Settings opening scrolled down to the bottom.

#editor, #embed-reflow, #embeds, #mobile, #scroll-bleed