{"action":"opened","number":242,"pull_request":{"url":"https://api.github.com/repos/apartmenttherapy/oxygen-lib-ui/pulls/242","id":239995767,"node_id":"MDExOlB1bGxSZXF1ZXN0MjM5OTk1NzY3","html_url":"https://github.com/apartmenttherapy/oxygen-lib-ui/pull/242","diff_url":"https://github.com/apartmenttherapy/oxygen-lib-ui/pull/242.diff","patch_url":"https://github.com/apartmenttherapy/oxygen-lib-ui/pull/242.patch","issue_url":"https://api.github.com/repos/apartmenttherapy/oxygen-lib-ui/issues/242","number":242,"state":"open","locked":false,"title":"add new placeholders pt 2","user":{"login":"blech75","id":9916,"node_id":"MDQ6VXNlcjk5MTY=","avatar_url":"https://avatars0.githubusercontent.com/u/9916?v=4","gravatar_id":"","url":"https://api.github.com/users/blech75","html_url":"https://github.com/blech75","followers_url":"https://api.github.com/users/blech75/followers","following_url":"https://api.github.com/users/blech75/following{/other_user}","gists_url":"https://api.github.com/users/blech75/gists{/gist_id}","starred_url":"https://api.github.com/users/blech75/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/blech75/subscriptions","organizations_url":"https://api.github.com/users/blech75/orgs","repos_url":"https://api.github.com/users/blech75/repos","events_url":"https://api.github.com/users/blech75/events{/privacy}","received_events_url":"https://api.github.com/users/blech75/received_events","type":"User","site_admin":false},"body":"#### What does this PR do & why?\r\n\r\nThis PR adjusts the placeholders for in-post images and galleries, from a chunky pixelated preview of the original image to a solid ciolor (gray) image. The motivation is to save precious bytes on initial load of the page.\r\n\r\nDoing this required that we support multiple _transforms_ (array of `renderOps`) per image. That was actually pretty easy; I made it so the `renderOps` arg to `createUrl` can accept either an object or array of objects.\r\n\r\n#### How can this be manually tested?\r\n\r\n`yarn dev` and check it out on a post with lots of images and a gallery, like http://localhost:8080/shrimp-boil-recipe-259082\r\n\r\nyou also might want to check it on AT via `SITE=at yarn dev` and this page: http://localhost:8080/phoebe-robinson-brookyn-nyc-apartment-photos-263152\r\n\r\nalso, make sure @chenryhen recent work #240 isn't broken.\r\n\r\n#### Any questions or concerns about this change?\r\n\r\nI think the code is pretty solid. Adding support for a second transform was \"interesting\".\r\n\r\nThe only real tricky/annoying part was when we merge `renderOps` and `BASE_RENDER_OPS`: we only want to apply the `BASE_RENDER_OPS` to the `last` transform. Same goes for `Figure`, where we copy the width/height. If `Figure` used  our `Image` component, life would be somewhat easier since I just refactored things so that `Image` can handle rendering a placeholder image.\r\n\r\nalso, see https://gist.github.com/blech75/ec3565997bcf832d94d9b2ffc0f92c40 for some timing measurements on first render of image vs. cached for old-style pixelated vs. new-style single-color.\r\n\r\n\r\n#### Deployment Notes\r\n\r\nnope.\r\n\r\n#### Link to story card and other documentation\r\n\r\nsee https://app.asana.com/0/543787180217047/930017999839002/f\r\n\r\n#### GIF\r\n\r\n![https://media.giphy.com/media/HOGGwOO2kduXC/giphy.gif](https://media.giphy.com/media/HOGGwOO2kduXC/giphy.gif)\r\n\r\n#### Have you remembered to...?\r\n\r\n* [ ] add a reviewer\r\n* [ ] run appropriate tests\r\n* [ ] tag anyone who might want to see this\r\n* [ ] update any relevant wiki documentation","created_at":"2018-12-19T22:34:22Z","updated_at":"2018-12-19T22:34:22Z","closed_at":null,"merged_at":null,"merge_commit_sha":null,"assignee":null,"assignees":[],"requested_reviewers":[],"requested_teams":[],"labels":[],"milestone":null,"commits_url":"https://api.github.com/repos/apartmenttherapy/oxygen-lib-ui/pulls/242/commits","review_comments_url":"https://api.github.com/repos/apartmenttherapy/oxygen-lib-ui/pulls/242/comments","review_comment_url":"https://api.github.com/repos/apartmenttherapy/oxygen-lib-ui/pulls/comments{/number}","comments_url":"https://api.github.com/repos/apartmenttherapy/oxygen-lib-ui/issues/242/comments","statuses_url":"https://api.github.com/repos/apartmenttherapy/oxygen-lib-ui/statuses/07929557c6c8866fdb15f756b116d4e367f7e087","head":{"label":"apartmenttherapy:justinb/add-new-placeholders-pt-2","ref":"justinb/add-new-placeholders-pt-2","sha":"07929557c6c8866fdb15f756b116d4e367f7e087","user":{"login":"apartmenttherapy","id":1120302,"node_id":"MDEyOk9yZ2FuaXphdGlvbjExMjAzMDI=","avatar_url":"https://avatars2.githubusercontent.com/u/1120302?v=4","gravatar_id":"","url":"https://api.github.com/users/apartmenttherapy","html_url":"https://github.com/apartmenttherapy","followers_url":"https://api.github.com/users/apartmenttherapy/followers","following_url":"https://api.github.com/users/apartmenttherapy/following{/other_user}","gists_url":"https://api.github.com/users/apartmenttherapy/gists{/gist_id}","starred_url":"https://api.github.com/users/apartmenttherapy/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/apartmenttherapy/subscriptions","organizations_url":"https://api.github.com/users/apartmenttherapy/orgs","repos_url":"https://api.github.com/users/apartmenttherapy/repos","events_url":"https://api.github.com/users/apartmenttherapy/events{/privacy}","received_events_url":"https://api.github.com/users/apartmenttherapy/received_events","type":"Organization","site_admin":false},"repo":{"id":142035494,"node_id":"MDEwOlJlcG9zaXRvcnkxNDIwMzU0OTQ=","name":"oxygen-lib-ui","full_name":"apartmenttherapy/oxygen-lib-ui","private":false,"owner":{"login":"apartmenttherapy","id":1120302,"node_id":"MDEyOk9yZ2FuaXphdGlvbjExMjAzMDI=","avatar_url":"https://avatars2.githubusercontent.com/u/1120302?v=4","gravatar_id":"","url":"https://api.github.com/users/apartmenttherapy","html_url":"https://github.com/apartmenttherapy","followers_url":"https://api.github.com/users/apartmenttherapy/followers","following_url":"https://api.github.com/users/apartmenttherapy/following{/other_user}","gists_url":"https://api.github.com/users/apartmenttherapy/gists{/gist_id}","starred_url":"https://api.github.com/users/apartmenttherapy/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/apartmenttherapy/subscriptions","organizations_url":"https://api.github.com/users/apartmenttherapy/orgs","repos_url":"https://api.github.com/users/apartmenttherapy/repos","events_url":"https://api.github.com/users/apartmenttherapy/events{/privacy}","received_events_url":"https://api.github.com/users/apartmenttherapy/received_events","type":"Organization","site_admin":false},"html_url":"https://github.com/apartmenttherapy/oxygen-lib-ui","description":null,"fork":false,"url":"https://api.github.com/repos/apartmenttherapy/oxygen-lib-ui","forks_url":"https://api.github.com/repos/apartmenttherapy/oxygen-lib-ui/forks","keys_url":"https://api.github.com/repos/apartmenttherapy/oxygen-lib-ui/keys{/key_id}","collaborators_url":"https://api.github.com/repos/apartmenttherapy/oxygen-lib-ui/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/apartmenttherapy/oxygen-lib-ui/teams","hooks_url":"https://api.github.com/repos/apartmenttherapy/oxygen-lib-ui/hooks","issue_events_url":"https://api.github.com/repos/apartmenttherapy/oxygen-lib-ui/issues/events{/number}","events_url":"https://api.github.com/repos/apartmenttherapy/oxygen-lib-ui/events","assignees_url":"https://api.github.com/repos/apartmenttherapy/oxygen-lib-ui/assignees{/user}","branches_url":"https://api.github.com/repos/apartmenttherapy/oxygen-lib-ui/branches{/branch}","tags_url":"https://api.github.com/repos/apartmenttherapy/oxygen-lib-ui/tags","blobs_url":"https://api.github.com/repos/apartmenttherapy/oxygen-lib-ui/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/apartmenttherapy/oxygen-lib-ui/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/apartmenttherapy/oxygen-lib-ui/git/refs{/sha}","trees_url":"https://api.github.com/repos/apartmenttherapy/oxygen-lib-ui/git/trees{/sha}","statuses_url":"https://api.github.com/repos/apartmenttherapy/oxygen-lib-ui/statuses/{sha}","languages_url":"https://api.github.com/repos/apartmenttherapy/oxygen-lib-ui/languages","stargazers_url":"https://api.github.com/repos/apartmenttherapy/oxygen-lib-ui/stargazers","contributors_url":"https://api.github.com/repos/apartmenttherapy/oxygen-lib-ui/contributors","subscribers_url":"https://api.github.com/repos/apartmenttherapy/oxygen-lib-ui/subscribers","subscription_url":"https://api.github.com/repos/apartmenttherapy/oxygen-lib-ui/subscription","commits_url":"https://api.github.com/repos/apartmenttherapy/oxygen-lib-ui/commits{/sha}","git_commits_url":"https://api.github.com/repos/apartmenttherapy/oxygen-lib-ui/git/commits{/sha}","comments_url":"https://api.github.com/repos/apartmenttherapy/oxygen-lib-ui/comments{/number}","issue_comment_url":"https://api.github.com/repos/apartmenttherapy/oxygen-lib-ui/issues/comments{/number}","contents_url":"https://api.github.com/repos/apartmenttherapy/oxygen-lib-ui/contents/{+path}","compare_url":"https://api.github.com/repos/apartmenttherapy/oxygen-lib-ui/compare/{base}...{head}","merges_url":"https://api.github.com/repos/apartmenttherapy/oxygen-lib-ui/merges","archive_url":"https://api.github.com/repos/apartmenttherapy/oxygen-lib-ui/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/apartmenttherapy/oxygen-lib-ui/downloads","issues_url":"https://api.github.com/repos/apartmenttherapy/oxygen-lib-ui/issues{/number}","pulls_url":"https://api.github.com/repos/apartmenttherapy/oxygen-lib-ui/pulls{/number}","milestones_url":"https://api.github.com/repos/apartmenttherapy/oxygen-lib-ui/milestones{/number}","notifications_url":"https://api.github.com/repos/apartmenttherapy/oxygen-lib-ui/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/apartmenttherapy/oxygen-lib-ui/labels{/name}","releases_url":"https://api.github.com/repos/apartmenttherapy/oxygen-lib-ui/releases{/id}","deployments_url":"https://api.github.com/repos/apartmenttherapy/oxygen-lib-ui/deployments","created_at":"2018-07-23T15:44:13Z","updated_at":"2018-12-19T15:32:46Z","pushed_at":"2018-12-19T22:26:31Z","git_url":"git://github.com/apartmenttherapy/oxygen-lib-ui.git","ssh_url":"git@github.com:apartmenttherapy/oxygen-lib-ui.git","clone_url":"https://github.com/apartmenttherapy/oxygen-lib-ui.git","svn_url":"https://github.com/apartmenttherapy/oxygen-lib-ui","homepage":null,"size":733,"stargazers_count":0,"watchers_count":0,"language":"JavaScript","has_issues":false,"has_projects":false,"has_downloads":true,"has_wiki":false,"has_pages":false,"forks_count":0,"mirror_url":null,"archived":false,"open_issues_count":2,"license":null,"forks":0,"open_issues":2,"watchers":0,"default_branch":"master"}},"base":{"label":"apartmenttherapy:master","ref":"master","sha":"b8d9b49215d5f165e314a1470635b0842d77e263","user":{"login":"apartmenttherapy","id":1120302,"node_id":"MDEyOk9yZ2FuaXphdGlvbjExMjAzMDI=","avatar_url":"https://avatars2.githubusercontent.com/u/1120302?v=4","gravatar_id":"","url":"https://api.github.com/users/apartmenttherapy","html_url":"https://github.com/apartmenttherapy","followers_url":"https://api.github.com/users/apartmenttherapy/followers","following_url":"https://api.github.com/users/apartmenttherapy/following{/other_user}","gists_url":"https://api.github.com/users/apartmenttherapy/gists{/gist_id}","starred_url":"https://api.github.com/users/apartmenttherapy/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/apartmenttherapy/subscriptions","organizations_url":"https://api.github.com/users/apartmenttherapy/orgs","repos_url":"https://api.github.com/users/apartmenttherapy/repos","events_url":"https://api.github.com/users/apartmenttherapy/events{/privacy}","received_events_url":"https://api.github.com/users/apartmenttherapy/received_events","type":"Organization","site_admin":false},"repo":{"id":142035494,"node_id":"MDEwOlJlcG9zaXRvcnkxNDIwMzU0OTQ=","name":"oxygen-lib-ui","full_name":"apartmenttherapy/oxygen-lib-ui","private":false,"owner":{"login":"apartmenttherapy","id":1120302,"node_id":"MDEyOk9yZ2FuaXphdGlvbjExMjAzMDI=","avatar_url":"https://avatars2.githubusercontent.com/u/1120302?v=4","gravatar_id":"","url":"https://api.github.com/users/apartmenttherapy","html_url":"https://github.com/apartmenttherapy","followers_url":"https://api.github.com/users/apartmenttherapy/followers","following_url":"https://api.github.com/users/apartmenttherapy/following{/other_user}","gists_url":"https://api.github.com/users/apartmenttherapy/gists{/gist_id}","starred_url":"https://api.github.com/users/apartmenttherapy/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/apartmenttherapy/subscriptions","organizations_url":"https://api.github.com/users/apartmenttherapy/orgs","repos_url":"https://api.github.com/users/apartmenttherapy/repos","events_url":"https://api.github.com/users/apartmenttherapy/events{/privacy}","received_events_url":"https://api.github.com/users/apartmenttherapy/received_events","type":"Organization","site_admin":false},"html_url":"https://github.com/apartmenttherapy/oxygen-lib-ui","description":null,"fork":false,"url":"https://api.github.com/repos/apartmenttherapy/oxygen-lib-ui","forks_url":"https://api.github.com/repos/apartmenttherapy/oxygen-lib-ui/forks","keys_url":"https://api.github.com/repos/apartmenttherapy/oxygen-lib-ui/keys{/key_id}","collaborators_url":"https://api.github.com/repos/apartmenttherapy/oxygen-lib-ui/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/apartmenttherapy/oxygen-lib-ui/teams","hooks_url":"https://api.github.com/repos/apartmenttherapy/oxygen-lib-ui/hooks","issue_events_url":"https://api.github.com/repos/apartmenttherapy/oxygen-lib-ui/issues/events{/number}","events_url":"https://api.github.com/repos/apartmenttherapy/oxygen-lib-ui/events","assignees_url":"https://api.github.com/repos/apartmenttherapy/oxygen-lib-ui/assignees{/user}","branches_url":"https://api.github.com/repos/apartmenttherapy/oxygen-lib-ui/branches{/branch}","tags_url":"https://api.github.com/repos/apartmenttherapy/oxygen-lib-ui/tags","blobs_url":"https://api.github.com/repos/apartmenttherapy/oxygen-lib-ui/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/apartmenttherapy/oxygen-lib-ui/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/apartmenttherapy/oxygen-lib-ui/git/refs{/sha}","trees_url":"https://api.github.com/repos/apartmenttherapy/oxygen-lib-ui/git/trees{/sha}","statuses_url":"https://api.github.com/repos/apartmenttherapy/oxygen-lib-ui/statuses/{sha}","languages_url":"https://api.github.com/repos/apartmenttherapy/oxygen-lib-ui/languages","stargazers_url":"https://api.github.com/repos/apartmenttherapy/oxygen-lib-ui/stargazers","contributors_url":"https://api.github.com/repos/apartmenttherapy/oxygen-lib-ui/contributors","subscribers_url":"https://api.github.com/repos/apartmenttherapy/oxygen-lib-ui/subscribers","subscription_url":"https://api.github.com/repos/apartmenttherapy/oxygen-lib-ui/subscription","commits_url":"https://api.github.com/repos/apartmenttherapy/oxygen-lib-ui/commits{/sha}","git_commits_url":"https://api.github.com/repos/apartmenttherapy/oxygen-lib-ui/git/commits{/sha}","comments_url":"https://api.github.com/repos/apartmenttherapy/oxygen-lib-ui/comments{/number}","issue_comment_url":"https://api.github.com/repos/apartmenttherapy/oxygen-lib-ui/issues/comments{/number}","contents_url":"https://api.github.com/repos/apartmenttherapy/oxygen-lib-ui/contents/{+path}","compare_url":"https://api.github.com/repos/apartmenttherapy/oxygen-lib-ui/compare/{base}...{head}","merges_url":"https://api.github.com/repos/apartmenttherapy/oxygen-lib-ui/merges","archive_url":"https://api.github.com/repos/apartmenttherapy/oxygen-lib-ui/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/apartmenttherapy/oxygen-lib-ui/downloads","issues_url":"https://api.github.com/repos/apartmenttherapy/oxygen-lib-ui/issues{/number}","pulls_url":"https://api.github.com/repos/apartmenttherapy/oxygen-lib-ui/pulls{/number}","milestones_url":"https://api.github.com/repos/apartmenttherapy/oxygen-lib-ui/milestones{/number}","notifications_url":"https://api.github.com/repos/apartmenttherapy/oxygen-lib-ui/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/apartmenttherapy/oxygen-lib-ui/labels{/name}","releases_url":"https://api.github.com/repos/apartmenttherapy/oxygen-lib-ui/releases{/id}","deployments_url":"https://api.github.com/repos/apartmenttherapy/oxygen-lib-ui/deployments","created_at":"2018-07-23T15:44:13Z","updated_at":"2018-12-19T15:32:46Z","pushed_at":"2018-12-19T22:26:31Z","git_url":"git://github.com/apartmenttherapy/oxygen-lib-ui.git","ssh_url":"git@github.com:apartmenttherapy/oxygen-lib-ui.git","clone_url":"https://github.com/apartmenttherapy/oxygen-lib-ui.git","svn_url":"https://github.com/apartmenttherapy/oxygen-lib-ui","homepage":null,"size":733,"stargazers_count":0,"watchers_count":0,"language":"JavaScript","has_issues":false,"has_projects":false,"has_downloads":true,"has_wiki":false,"has_pages":false,"forks_count":0,"mirror_url":null,"archived":false,"open_issues_count":2,"license":null,"forks":0,"open_issues":2,"watchers":0,"default_branch":"master"}},"_links":{"self":{"href":"https://api.github.com/repos/apartmenttherapy/oxygen-lib-ui/pulls/242"},"html":{"href":"https://github.com/apartmenttherapy/oxygen-lib-ui/pull/242"},"issue":{"href":"https://api.github.com/repos/apartmenttherapy/oxygen-lib-ui/issues/242"},"comments":{"href":"https://api.github.com/repos/apartmenttherapy/oxygen-lib-ui/issues/242/comments"},"review_comments":{"href":"https://api.github.com/repos/apartmenttherapy/oxygen-lib-ui/pulls/242/comments"},"review_comment":{"href":"https://api.github.com/repos/apartmenttherapy/oxygen-lib-ui/pulls/comments{/number}"},"commits":{"href":"https://api.github.com/repos/apartmenttherapy/oxygen-lib-ui/pulls/242/commits"},"statuses":{"href":"https://api.github.com/repos/apartmenttherapy/oxygen-lib-ui/statuses/07929557c6c8866fdb15f756b116d4e367f7e087"}},"author_association":"CONTRIBUTOR","merged":false,"mergeable":null,"rebaseable":null,"mergeable_state":"unknown","merged_by":null,"comments":0,"review_comments":0,"maintainer_can_modify":false,"commits":3,"additions":375,"deletions":189,"changed_files":14}}
{"actor":{"display_login":"blech75"}}