Skip to content

[RNMobile] Fix Image Size when url for slug doesn't exist.#18698

Merged
etoledom merged 1 commit intomasterfrom
rnmobile/image-size-improvements-mark-ii
Nov 25, 2019
Merged

[RNMobile] Fix Image Size when url for slug doesn't exist.#18698
etoledom merged 1 commit intomasterfrom
rnmobile/image-size-improvements-mark-ii

Conversation

@etoledom
Copy link
Copy Markdown
Contributor

@etoledom etoledom commented Nov 22, 2019

Description

Fixes n7 from wordpress-mobile/gutenberg-mobile#1593

gutenberg-mobile PR: wordpress-mobile/gutenberg-mobile#1611

This issue has been possible to be reproduce on Pressable sites:

  • When the image uploaded is small, it won't generate a Large size image, so there won't be url for the Large image option. In the same way, when the image is big enough, it generates many other size options not shown on the UI (including on web).

An example from a small image:

{
  "width": 499,
  "height": 333,
  "file": "2019/11/11769619264_5e93c3e4d2-1.jpg",
  "sizes": {
    "medium": {
      "file": "11769619264_5e93c3e4d2-1-300x200.jpg",
      "width": 300,
      "height": 200,
      "mime_type": "image/jpeg",
      "source_url": "https://testingsiteetoledom.mystagingwebsite.com/wp-content/uploads/2019/11/11769619264_5e93c3e4d2-1-300x200.jpg"
    },
    "thumbnail": {
      "file": "11769619264_5e93c3e4d2-1-150x150.jpg",
      "width": 150,
      "height": 150,
      "mime_type": "image/jpeg",
      "source_url": "https://testingsiteetoledom.mystagingwebsite.com/wp-content/uploads/2019/11/11769619264_5e93c3e4d2-1-150x150.jpg"
    },
    "full": {
      "file": "11769619264_5e93c3e4d2-1.jpg",
      "width": 499,
      "height": 333,
      "mime_type": "image/jpeg",
      "source_url": "https://testingsiteetoledom.mystagingwebsite.com/wp-content/uploads/2019/11/11769619264_5e93c3e4d2-1.jpg"
    }
  },
}

This is a big image:

{
  "width": 2560,
  "height": 1440,
  "file": "2019/11/beautiful-blur-bright-326055-1-scaled.jpg",
  "sizes": {
    "medium": {
      "file": "beautiful-blur-bright-326055-1-300x169.jpg",
      "width": 300,
      "height": 169,
      "mime_type": "image/jpeg",
      "source_url": "https://testingsiteetoledom.mystagingwebsite.com/wp-content/uploads/2019/11/beautiful-blur-bright-326055-1-300x169.jpg"
    },
    "large": {
      "file": "beautiful-blur-bright-326055-1-1024x576.jpg",
      "width": 1024,
      "height": 576,
      "mime_type": "image/jpeg",
      "source_url": "https://testingsiteetoledom.mystagingwebsite.com/wp-content/uploads/2019/11/beautiful-blur-bright-326055-1-1024x576.jpg"
    },
    "thumbnail": {
      "file": "beautiful-blur-bright-326055-1-150x150.jpg",
      "width": 150,
      "height": 150,
      "mime_type": "image/jpeg",
      "source_url": "https://testingsiteetoledom.mystagingwebsite.com/wp-content/uploads/2019/11/beautiful-blur-bright-326055-1-150x150.jpg"
    },
    "medium_large": {
      "file": "beautiful-blur-bright-326055-1-768x432.jpg",
      "width": 768,
      "height": 432,
      "mime_type": "image/jpeg",
      "source_url": "https://testingsiteetoledom.mystagingwebsite.com/wp-content/uploads/2019/11/beautiful-blur-bright-326055-1-768x432.jpg"
    },
    "1536x1536": {
      "file": "beautiful-blur-bright-326055-1-1536x864.jpg",
      "width": 1536,
      "height": 864,
      "mime_type": "image/jpeg",
      "source_url": "https://testingsiteetoledom.mystagingwebsite.com/wp-content/uploads/2019/11/beautiful-blur-bright-326055-1-1536x864.jpg"
    },
    "2048x2048": {
      "file": "beautiful-blur-bright-326055-1-2048x1152.jpg",
      "width": 2048,
      "height": 1152,
      "mime_type": "image/jpeg",
      "source_url": "https://testingsiteetoledom.mystagingwebsite.com/wp-content/uploads/2019/11/beautiful-blur-bright-326055-1-2048x1152.jpg"
    },
    "post-thumbnail": {
      "file": "beautiful-blur-bright-326055-1-1568x882.jpg",
      "width": 1568,
      "height": 882,
      "mime_type": "image/jpeg",
      "source_url": "https://testingsiteetoledom.mystagingwebsite.com/wp-content/uploads/2019/11/beautiful-blur-bright-326055-1-1568x882.jpg"
    },
    "full": {
      "file": "beautiful-blur-bright-326055-1-scaled.jpg",
      "width": 2560,
      "height": 1440,
      "mime_type": "image/jpeg",
      "source_url": "https://testingsiteetoledom.mystagingwebsite.com/wp-content/uploads/2019/11/beautiful-blur-bright-326055-1-scaled.jpg"
    }
  },
}

The changes on this PR are just to avoid the issue where the image disappears if the url doesn't exist for the Large slug (the default one), leaving the original url instead. This is how currently "works" on web.

To test:

  • On a Pressable self-hosted site (not linked via Jetpack):
  • Upload a small image (around 500x300) using the app.
  • When it finishes upload, check that the image is still in place.
  • Check that the URL is the remote URL.

@etoledom etoledom added the Mobile App - i.e. Android or iOS Native mobile impl of the block editor. (Note: used in scripts, ping mobile folks to change) label Nov 22, 2019
@etoledom etoledom self-assigned this Nov 22, 2019
@etoledom etoledom requested a review from mchowning November 22, 2019 17:03
@SergioEstevao SergioEstevao self-requested a review November 25, 2019 15:38
Copy link
Copy Markdown
Contributor

@SergioEstevao SergioEstevao left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for this fix! :shipit:

@etoledom etoledom merged commit ea24306 into master Nov 25, 2019
@etoledom etoledom deleted the rnmobile/image-size-improvements-mark-ii branch November 25, 2019 19:02
@youknowriad youknowriad added this to the Gutenberg 7.1 milestone Dec 9, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Mobile App - i.e. Android or iOS Native mobile impl of the block editor. (Note: used in scripts, ping mobile folks to change)

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants