Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

publish: handle Jetpack lazy-loaded images #798

Closed
snarfed opened this issue Mar 1, 2018 · 1 comment
Closed

publish: handle Jetpack lazy-loaded images #798

snarfed opened this issue Mar 1, 2018 · 1 comment
Labels

Comments

@snarfed
Copy link
Owner

snarfed commented Mar 1, 2018

Jetpack has a new lazy loading images feature that serves tiny 1x1 placeholders for all images, and then swaps in (and loads) the real src URLs when they're scrolled into view.

fortunately it also serves duplicate <img>s with the real URLs inside <noscript>s, which means mf2 consumers like bridgy still work...except every u-photo gets duplicated, one with the real image and one with the jetpack lazy placeholder. eg HTML like this from http://paulatlan.net/things-that-surprise-me/petits-bonheurs/ :

<img alt src="http://paulatlan.net/wp-content/plugins/jetpack/modules/lazy-images/images/1x1.trans.gif"
  class="avatar avatar-100 photo u-photo" height="100" width="100"
  data-lazy-src="http://1.gravatar.com/avatar/1b7d91f2eb0343bffbcd08e0038bce72?s=100&#038;d=mm&#038;r=r"
  data-lazy-srcset="http://1.gravatar.com/avatar/1b7d91f2eb0343bffbcd08e0038bce72?s=200&#038;d=mm&#038;r=r 2x">

<noscript>
  <img alt='' src='http://1.gravatar.com/avatar/1b7d91f2eb0343bffbcd08e0038bce72?s=100&#038;d=mm&#038;r=r'
    srcset='http://1.gravatar.com/avatar/1b7d91f2eb0343bffbcd08e0038bce72?s=200&#038;d=mm&#038;r=r 2x'
    class='avatar avatar-100 photo u-photo' height='100' width='100' />
</noscript>

results in this mf2:

"photo": [
    "http://paulatlan.net/wp-content/plugins/jetpack/modules/lazy-images/images/1x1.trans.gif",
    "http://1.gravatar.com/avatar/1b7d91f2eb0343bffbcd08e0038bce72?s=100&d=mm&r=r",
    "...",
]

we should probably just special case and ignore all */lazy-images/images/1x1.trans.gif images.

@snarfed snarfed added the publish label Mar 1, 2018
@snarfed
Copy link
Owner Author

snarfed commented Mar 5, 2018

discovered an interesting meaningful difference in mf2py's output based on the underlying html parser: html5lib omits the contents of <noscript> tags; lxml includes them.

we use lxml in app engine prod, but only by default. we were actually using html5lib locally. so when i wrote the test for this fix, it initially failed because it didn't include the full <img> from inside the <noscript>. i'm switching it to use lxml explicitly, and pin the same version as app engine, to prevent that skew.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

1 participant