Flickr embeds are low quality in the editor #60210

jp-imagines · 2022-01-18T19:16:24Z

Quick summary

When you embed an image from Flickr, the image appears in the appropriate resolution on the live site. However, within the editor, the Flickr block is forced to a set of specific aspect ratios (regardless of the original image's aspect ratio), and the quality of the image is incredibly low.

Steps to reproduce

Go to flickr.com. Search for an image, select any example, and use the "Share" arrow to grab the flic.kr URL for the image.
On WordPress.com, open a new post or page.
Paste the flic.kr URL copied in step 1. This should automatically transform into a Flickr embed block.
Observe the quality of the image in the editor vs. the preview/live site.

What you expected to happen

The image should appear similar to how it appears on Flickr. At the very least, the image should be high quality in the editor.

What actually happened

The image quality is incredibly low (blurry/grainy) in the editor.

Context

33212305-hc

Simple, Atomic or both?

Simple, Atomic

Theme-specific issue?

No response

Browser, operating system and other notes

No response

Reproducibility

Consistent

Severity

Some (< 50%)

Available workarounds?

No but the platform is still usable

Workaround details

No response

The text was updated successfully, but these errors were encountered:

Greatdane · 2022-02-03T05:06:35Z

Can replicate on Atomic and Simple sites;

Flickr embed is Calypso-based.

yansern · 2022-03-21T09:50:08Z

This is coming from core Embed block. It retrieves from thumbnail_url which has a 150x150 resolution.

If flickr is not registered as a photo type of block variation, it would retrieve from the html.

See const html = 'photo' === type ? getPhotoHtml( preview ) : preview.html; in gutenberg/packages/block-library/src/embed/embed-preview.js.

mashikag · 2022-04-06T16:20:58Z

If flickr is not registered as a photo type of block variation, it would retrieve from the html.

flickr is not registered with type attribute set to photo. See the code here for reference.
~~Hence it is actually using the preview.html.~~

In-Depth Issue Explanation More on the issue (not very significant - sidetracked)

The resolution of the preview can differ for different aspect ratio's I believe. Therefore I will base my further explanation on one specific example.

When I want to embed the https://flic.kr/p/P99KkV on my page, it looks as following in the page editor.

Indeed, just as originally reported, it looks blurry.

When I investigated it a little bit deeper, I found out that oembed protocol is used to load previews for such embeds. Wordpress has oembed/1.0/proxy rest path registered which the embed gutenberg's block is using to fetch the preview props. When a request to the wp site is made with the following query payload

we get the following response:

{
  "type":"photo",
  "flickr_type":"photo",
  "title":"Car",
  "author_name":"Zeeyolq Photography",
  "author_url":"https:\/\/www.flickr.com\/photos\/zeeyolqpictures\/",
  "width":500,
  "height":333,
  "url":"https:\/\/live.staticflickr.com\/4816\/30941006767_72bbb3419d.jpg",
  "web_page":"https:\/\/www.flickr.com\/photos\/zeeyolqpictures\/30941006767\/",
  "thumbnail_url":"https:\/\/live.staticflickr.com\/4816\/30941006767_72bbb3419d_q.jpg",
  "thumbnail_width":150,
  "thumbnail_height":150,
  "web_page_short_url":"https:\/\/flic.kr\/p\/P99KkV",
  "license":"All Rights Reserved",
  "license_id":0,
  "html":"<a href=\"https:\/\/flic.kr\/p\/P99KkV\"><img src=\"https:\/\/live.staticflickr.com\/4816\/30941006767_72bbb3419d.jpg\" alt=\"Car\" width=\"500\" height=\"333\" \/><\/a>",
  "version":"1.0",
  "cache_age":3600,
  "provider_name":"Flickr",
  "provider_url":"https:\/\/www.flickr.com\/"
}

Note that what the wordpress endpoint is actually doing, it calls the flickr's oembed API to fetch this info and passes it back. Therefore the resolution of the images in the response is out of wordpress's control.

When we look at the value of the html key in the response, we see that the image is of 500*333 pixels resolution. Flickr has many other sizes of the image available, including higher resolution ones, but it must be that for oembed medium resolution is used.

Never-the-less the inspected height of the embed block element itself in the editor is 662.8px. This is more than the height of the flickr preview image provided of ~~500px~~ 150px in height. ~~Notice also how the image is stretched to match the element's height and the x-overlay is just hidden.~~

~~Therefore the key issue here is that the embed block element in the editor does not match the dimensions of the preview image.~~

yansern · 2022-04-07T08:44:03Z

flickr is not registered with type attribute set to photo. See the code here for reference.
Hence it is actually using the preview.html.

That can't be true because if it was using preview.html it wouldn't use the image url from thumbnail_url.

mashikag · 2022-04-07T11:43:04Z

flickr is not registered with type attribute set to photo. See the code here for reference.
Hence it is actually using the preview.html.

That can't be true because if it was using preview.html it wouldn't use the image url from thumbnail_url.

Thanks @yansern !

You are actually spot on. Please discard my previous comment. Seeing the in-code definition of the flickr embed block variation I made an incorrect assumption about the value of the type prop. Thanks for correcting me @yansern! 🙇

The type prop is being set to photo in edit.js when we merge the block's attributes with fetched preview properties (see code). If you look at the example oembed response, it includes type property of photo.

{
  "type":"photo",
  "flickr_type":"photo",
  "title":"Car",
  "author_name":"Zeeyolq Photography",
  "author_url":"https:\/\/www.flickr.com\/photos\/zeeyolqpictures\/",
  "width":500,
  "height":333,
  "url":"https:\/\/live.staticflickr.com\/4816\/30941006767_72bbb3419d.jpg",
  "web_page":"https:\/\/www.flickr.com\/photos\/zeeyolqpictures\/30941006767\/",
  "thumbnail_url":"https:\/\/live.staticflickr.com\/4816\/30941006767_72bbb3419d_q.jpg",
  "thumbnail_width":150,
  "thumbnail_height":150,
  "web_page_short_url":"https:\/\/flic.kr\/p\/P99KkV",
  "license":"All Rights Reserved",
  "license_id":0,
  "html":"<a href=\"https:\/\/flic.kr\/p\/P99KkV\"><img src=\"https:\/\/live.staticflickr.com\/4816\/30941006767_72bbb3419d.jpg\" alt=\"Car\" width=\"500\" height=\"333\" \/><\/a>",
  "version":"1.0",
  "cache_age":3600,
  "provider_name":"Flickr",
  "provider_url":"https:\/\/www.flickr.com\/"
}

In fact when I force type to undefined, the embed displays as desired. I will have a look at how it's handled on published content that it ignores the type property of the preview.

mashikag · 2022-04-07T15:01:04Z

The following function seems a bit problematic to me.

It was introduced in this PR by an outside Wordpress contributor.

I cannot grasp the context as to why the following would stand:

100% width for the preview so it fits nicely into the document, some "thumbnails" are actually the full size photo

I also wonder why would we want to display the thumbnail instead of the .html? I was trying to find some other services that we support for oEmbed which would return previews with type of photo but all the ones I could think of return rich type instead.

@yansern would you have any insight on the above?

yansern · 2022-04-07T15:43:24Z

I also wonder why would we want to display the thumbnail instead of the .html?

Actually, we want to use html property, therefore skipping looking inside getPhotoHtml altogether.

Therefore, coming back to this line in gutenberg/packages/block-library/src/embed/embed-preview.js.:

const html = 'photo' === type ? getPhotoHtml( preview ) : preview.html;

I'm curious to know why is flickr's type photo? How is this type assigned for embed block variations?

Finding out how to set flickr's type to something else (rich as you said?) is all that's needed I think.

mashikag · 2022-04-07T16:20:41Z

I included the answer to this in this previous comment. I will re-write it below but with some additions.

Why is flickr's type `photo`?

The type prop is being set to photo in edit.js when we merge the block's attributes with fetched preview properties (see code). If you look at the example oEmbed response, it includes type property of photo. Note that this property is coming from flickr's oEmbed api.

{
  "type":"photo",
  "flickr_type":"photo",
  "title":"Car",
  "author_name":"Zeeyolq Photography",
  "author_url":"https:\/\/www.flickr.com\/photos\/zeeyolqpictures\/",
  "width":500,
  "height":333,
  "url":"https:\/\/live.staticflickr.com\/4816\/30941006767_72bbb3419d.jpg",
  "web_page":"https:\/\/www.flickr.com\/photos\/zeeyolqpictures\/30941006767\/",
  "thumbnail_url":"https:\/\/live.staticflickr.com\/4816\/30941006767_72bbb3419d_q.jpg",
  "thumbnail_width":150,
  "thumbnail_height":150,
  "web_page_short_url":"https:\/\/flic.kr\/p\/P99KkV",
  "license":"All Rights Reserved",
  "license_id":0,
  "html":"<a href=\"https:\/\/flic.kr\/p\/P99KkV\"><img src=\"https:\/\/live.staticflickr.com\/4816\/30941006767_72bbb3419d.jpg\" alt=\"Car\" width=\"500\" height=\"333\" \/><\/a>",
  "version":"1.0",
  "cache_age":3600,
  "provider_name":"Flickr",
  "provider_url":"https:\/\/www.flickr.com\/"
}

You can check this result using the following https query: https://www.flickr.com/services/oembed/?format=json&url=https://www.flickr.com/photos/zeeyolqpictures/30941006767/

yansern · 2022-04-07T16:50:34Z

Ah, I understand you now! Sorry about any earlier misunderstanding on this part.

So this is coming from Flickr's API response.

In that case, feel free to introduce a new attribute, like preferHtml: true.

Since the attributes are merged in getMergedAttributes() together with the oEmbed response, the EmbedPreview should be able to access this attribute preferHtml attribute.

Add the necessary logic to make EmbedPreview use html over getPhotoHtml() when preferHtml: true.

Once the PR is submitted to Gutenberg core, we will see what core folks feel about introducing a new attribute when they review the PR.

mashikag · 2022-04-08T12:56:20Z

PR fixing this issue was created in WordPress/gutenberg#40187

mashikag · 2022-04-11T08:04:25Z

I just found out that this issue is a duplicate of the issue. I will close this issue as a duplicate in favor of the gutenberg issue.

jp-imagines added [Type] Bug When a feature is broken and / or not performing as intended User Report labels Jan 18, 2022

Greatdane added [Block] Embed Triaged To be used when issues have been triaged. labels Feb 3, 2022

Greatdane added the [Pri] Low Address when resources are available. label Feb 3, 2022

mashikag self-assigned this Apr 6, 2022

mashikag added the [Status] In Progress label Apr 6, 2022

mashikag mentioned this issue Apr 8, 2022

Embed block: use preview html for flickr embed previews in editor WordPress/gutenberg#40187

Merged

mashikag closed this as completed Apr 11, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Flickr embeds are low quality in the editor #60210

Flickr embeds are low quality in the editor #60210

jp-imagines commented Jan 18, 2022

Greatdane commented Feb 3, 2022

yansern commented Mar 21, 2022

mashikag commented Apr 6, 2022 •

edited

Loading

yansern commented Apr 7, 2022

mashikag commented Apr 7, 2022 •

edited

Loading

mashikag commented Apr 7, 2022

yansern commented Apr 7, 2022 •

edited

Loading

mashikag commented Apr 7, 2022 •

edited

Loading

yansern commented Apr 7, 2022 •

edited

Loading

mashikag commented Apr 8, 2022 •

edited

Loading

mashikag commented Apr 11, 2022 •

edited

Loading

Flickr embeds are low quality in the editor #60210

Flickr embeds are low quality in the editor #60210

Comments

jp-imagines commented Jan 18, 2022

Quick summary

Steps to reproduce

What you expected to happen

What actually happened

Context

Simple, Atomic or both?

Theme-specific issue?

Browser, operating system and other notes

Reproducibility

Severity

Available workarounds?

Workaround details

Greatdane commented Feb 3, 2022

yansern commented Mar 21, 2022

mashikag commented Apr 6, 2022 • edited Loading

In-Depth Issue Explanation More on the issue (not very significant - sidetracked)

yansern commented Apr 7, 2022

mashikag commented Apr 7, 2022 • edited Loading

Thanks @yansern !

mashikag commented Apr 7, 2022

yansern commented Apr 7, 2022 • edited Loading

mashikag commented Apr 7, 2022 • edited Loading

Why is flickr's type photo?

yansern commented Apr 7, 2022 • edited Loading

mashikag commented Apr 8, 2022 • edited Loading

mashikag commented Apr 11, 2022 • edited Loading

mashikag commented Apr 6, 2022 •

edited

Loading

mashikag commented Apr 7, 2022 •

edited

Loading

yansern commented Apr 7, 2022 •

edited

Loading

mashikag commented Apr 7, 2022 •

edited

Loading

Why is flickr's type `photo`?

yansern commented Apr 7, 2022 •

edited

Loading

mashikag commented Apr 8, 2022 •

edited

Loading

mashikag commented Apr 11, 2022 •

edited

Loading