{"action":"closed","number":350,"pull_request":{"url":"https://api.github.com/repos/emmetio/emmet/pulls/350","id":24339989,"html_url":"https://github.com/emmetio/emmet/pull/350","diff_url":"https://github.com/emmetio/emmet/pull/350.diff","patch_url":"https://github.com/emmetio/emmet/pull/350.patch","issue_url":"https://api.github.com/repos/emmetio/emmet/issues/350","number":350,"state":"closed","locked":false,"title":"#349 - Added abbreviations for srcset, sizes, picture, and related","user":{"login":"bruceontheloose","id":1419972,"avatar_url":"https://avatars.githubusercontent.com/u/1419972?v=3","gravatar_id":"","url":"https://api.github.com/users/bruceontheloose","html_url":"https://github.com/bruceontheloose","followers_url":"https://api.github.com/users/bruceontheloose/followers","following_url":"https://api.github.com/users/bruceontheloose/following{/other_user}","gists_url":"https://api.github.com/users/bruceontheloose/gists{/gist_id}","starred_url":"https://api.github.com/users/bruceontheloose/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/bruceontheloose/subscriptions","organizations_url":"https://api.github.com/users/bruceontheloose/orgs","repos_url":"https://api.github.com/users/bruceontheloose/repos","events_url":"https://api.github.com/users/bruceontheloose/events{/privacy}","received_events_url":"https://api.github.com/users/bruceontheloose/received_events","type":"User","site_admin":false},"body":"## About\r\nThis pull request addresses issue #349 to make it easier for developers to use `srcset`, `sizes`, `picture` and more for implementing responsive images.\r\n\r\nIn case you'd like some references handy while considering this update:\r\n- [Responsive images use cases in HTML5.1 Spec](http://www.w3.org/html/wg/drafts/html/master/embedded-content.html#attr-img-srcset)\r\n- [Responsive Images: Use Cases and Documented Code Snippets to Get You Started](https://dev.opera.com/articles/responsive-images/)\r\n\r\n## Building Blocks\r\nThe following have been added to snippets.json (with the exception of `img`, as noted):\r\n\r\n| Abbrev/Alias  | Result  |\r\n| ------------ |---------------|\r\n| `img` *[1]*  | `<img src=\"\" alt=\"\">` |\r\n| `img:srcset` *or* `img:s`  | `<img srcset=\"\" src=\"\" alt=\"\">` |\r\n| `img:sizes` *or* `img:z`   | `<img sizes=\"\" srcset=\"\" src=\"\" alt=\"\">` |\r\n| `picture` *or* `pic` | `<picture></picture>` |\r\n| `source` *or* `src` *[2]*  | `<source>` | \r\n| `source:srcset` *or* `src:s` | `<source srcset=\"\">` |\r\n| `source:media` *or* `src:m`  | `<source media=\"(min-width: )\" srcset=\"\">` |\r\n| `source:type` *or* `src:t`   | `<source srcset=\"\" type=\"image/\">` |\r\n| `source:sizes` *or* `src:z` | `<source sizes=\"\" srcset=\"\">` |\r\n| `source:media:type` *or* `src:mt` | `<source media=\"(min-width: )\" srcset=\"\" type=\"image/\">` |\r\n| `source:media:sizes` *or* `src:mz` | `<source media=\"(min-width: )\" sizes=\"\" srcset=\"\">` |\r\n| `source:sizes:type` *or* `src:zt` | `<source sizes=\"\" srcset=\"\" type=\"image/\">` |\r\n| `source:src` *or* `src:sc` *[3]* | `<source src=\"\" type=\"\">` |\r\n\r\n**Legend**\r\n1 - Unchanged from your current implementation. Here for reference.\r\n2 - Consistent with pull request I submitted for issue #346, but this implementation is slightly different, so this supersedes that pull request.\r\n3 - Used with `audio` and `video`, not for responsive images.\r\n\r\n## Other Conveniences\r\nThese have been added to snippets.json as well:\r\n\r\n(1) `pic+` (an alias for `picture>source:srcset+img`) results in:\r\n```html\r\n<picture>\r\n\t<source srcset=\"\">\r\n\t<img src=\"\" alt=\"\">\r\n</picture>\r\n```\r\nThis also could be achieved with `pic>src:s+img`.\r\n\r\n(2) It occurred to me that some coders might prefer to think in terms of the responsive images use cases they want to implement (hence the `ri` prefix shown below). The following shortcuts represent the four basic use cases. (Many others exist, as shown in the Opera article I referenced. They can be fashioned with the building blocks. Having said that, it could be helpful to create `ri` aliases for one or two more of the common ones. I wanted to see if you like the idea of these `ri` aliases at all before doing so.)\r\n\r\n1. **Use Case: Device-pixel-ratio-based selection**\r\n `ri:dpr` *or* `ri:d`  (aliases for `img:s`)\r\n\r\n Result:\r\n ```html\r\n<img srcset=\"\" src=\"\" alt=\"\">\r\n```\r\n\r\n2. **Use Case: Viewport-based selection (to change image size)**\r\n`ri:viewport` *or* `ri:v` (aliases for `img:z`)\r\n\r\n Result:\r\n ```html\r\n <img sizes=\"\" srcset=\"\" src=\"\" alt=\"\">\r\n ```\r\n\r\n3. **Use Case: Art direction-based selection**\r\n`ri:art` *or* `ri:a` (aliases for `pic>src:m+img`)\r\n\r\n Result:\r\n ```html\r\n<picture>\r\n        <source media=\"(min-width: )\" srcset=\"\">\r\n        <img src=\"\" alt=\"\">\r\n</picture>\r\n ```\r\n \r\n4. **Use Case: Image type (format)-based selection**\r\n`ri:type` *or* `ri:t` (aliases for `pic>src:t+img`)\r\n\r\n Result:\r\n  ```html\r\n<picture>\r\n        <source srcset=\"\" type=\"image/\">\r\n        <img src=\"\" alt=\"\">\r\n</picture>\r\n ```\r\n\r\n## Notes\r\n- **Order of attributes:** There isn't consensus in the community about a preferred order for the attributes. For example, should it be `<img sizes=\"\" srcset=\"\" src=\"\" alt=\"\">` or `<img src=\"\" alt=\"\" sizes=\"\" srcset=\"\">`? In fact, in the spec and across various tutorials, you'll see `src` and `alt` come first in the device-pixel-ratio-based case, and last in the viewport-based case (I do understand the logic behind that). I suspect the preference will vary from one developer to the next, so some will be happy with how Emmet does it if you decide to merge this PR, while others might want to make local overrides. I'd be happy to change the current order of attributes if you'd like them to be different; for example, to always make `src=\"\" alt=\"\"` come before other attributes on `img`.\r\n\r\n- **Putting some attributes on own line:** As you've probably seen, it's popular to make verbose `img` and `picture` tags easier to read by putting some of the attributes and/or their values on their own lines. For example:\r\n\r\n ```html\r\n<picture>\r\n\t   <source\r\n\t\t   media=\"(min-width: 1280px)\"\r\n\t\t   sizes=\"50vw\"\r\n\t\t   srcset=\"opera-fullshot-200.jpg 200w,\r\n\t\t\t\topera-fullshot-400.jpg 400w,\r\n\t\t\t\topera-fullshot-800.jpg 800w,\r\n\t\t\t\topera-fullshot-1200.jpg 1200w\">\r\n\t   <img\r\n\t\t   src=\"opera-closeup-400.jpg\" alt=\"The Oslo Opera House\"\r\n\t\t   sizes=\"(min-width: 640px) 60vw, 100vw\"\r\n\t\t   srcset=\"opera-closeup-200.jpg 200w,\r\n\t\t\t\topera-closeup-400.jpg 400w,\r\n\t\t\t\topera-closeup-800.jpg 800w,\r\n\t\t\t\topera-closeup-1200.jpg 1200w\">\r\n</picture>\r\n```\r\n I toyed with doing that, which (as far as I can tell) would have required creating snippets, but I didn't want to go that route without knowing your preference, given there isn't another HTML case where Emmet does that outside of conditional comments. I suppose a flag could be used for toggling between the two modes. I didn't investigate what that would entail, but I believe it would require adjusting the internals some.\r\n\r\n* **Providing hints:** I considered including the `w`, `x`, and `vw` unit descriptors in the proper attributes (ex: `sizes=\"vw\"`) under certain conditions as a helpful hint and starter for coders, but omitted them.\r\n\r\n* I also thought about putting `\"src:sc|source:src\": \"<source src=\\\"\\\" type=\\\"\\\"/>\",` after the `video` and `audio` definitions because it's related to them, but thought you might want all `src` definitions together, so I put it with the ones related to `picture`.\r\n\r\n--\r\n\r\nThank you for considering the update; I know this is a lot to pore through. I also wouldn't be surprised if some of it could be improved via some cleverness in Emmet that I'm unaware of.\r\n\r\nI'd be happy to discuss any of this if you'd like. Thanks again.","created_at":"2014-11-13T01:29:46Z","updated_at":"2015-01-05T21:23:58Z","closed_at":"2015-01-05T21:23:58Z","merged_at":"2015-01-05T21:23:57Z","merge_commit_sha":"7b85a6a661b19792224f8bf83dc0bb5eab1ccbf0","assignee":null,"milestone":null,"commits_url":"https://api.github.com/repos/emmetio/emmet/pulls/350/commits","review_comments_url":"https://api.github.com/repos/emmetio/emmet/pulls/350/comments","review_comment_url":"https://api.github.com/repos/emmetio/emmet/pulls/comments/{number}","comments_url":"https://api.github.com/repos/emmetio/emmet/issues/350/comments","statuses_url":"https://api.github.com/repos/emmetio/emmet/statuses/877e3f6a5818d519311447c63c81fd19774edaf7","head":{"label":"bruceontheloose:srcset-sizes-picture","ref":"srcset-sizes-picture","sha":"877e3f6a5818d519311447c63c81fd19774edaf7","user":{"login":"bruceontheloose","id":1419972,"avatar_url":"https://avatars.githubusercontent.com/u/1419972?v=3","gravatar_id":"","url":"https://api.github.com/users/bruceontheloose","html_url":"https://github.com/bruceontheloose","followers_url":"https://api.github.com/users/bruceontheloose/followers","following_url":"https://api.github.com/users/bruceontheloose/following{/other_user}","gists_url":"https://api.github.com/users/bruceontheloose/gists{/gist_id}","starred_url":"https://api.github.com/users/bruceontheloose/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/bruceontheloose/subscriptions","organizations_url":"https://api.github.com/users/bruceontheloose/orgs","repos_url":"https://api.github.com/users/bruceontheloose/repos","events_url":"https://api.github.com/users/bruceontheloose/events{/privacy}","received_events_url":"https://api.github.com/users/bruceontheloose/received_events","type":"User","site_admin":false},"repo":{"id":26458084,"name":"emmet","full_name":"bruceontheloose/emmet","owner":{"login":"bruceontheloose","id":1419972,"avatar_url":"https://avatars.githubusercontent.com/u/1419972?v=3","gravatar_id":"","url":"https://api.github.com/users/bruceontheloose","html_url":"https://github.com/bruceontheloose","followers_url":"https://api.github.com/users/bruceontheloose/followers","following_url":"https://api.github.com/users/bruceontheloose/following{/other_user}","gists_url":"https://api.github.com/users/bruceontheloose/gists{/gist_id}","starred_url":"https://api.github.com/users/bruceontheloose/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/bruceontheloose/subscriptions","organizations_url":"https://api.github.com/users/bruceontheloose/orgs","repos_url":"https://api.github.com/users/bruceontheloose/repos","events_url":"https://api.github.com/users/bruceontheloose/events{/privacy}","received_events_url":"https://api.github.com/users/bruceontheloose/received_events","type":"User","site_admin":false},"private":false,"html_url":"https://github.com/bruceontheloose/emmet","description":"The essential toolkit for web-developers","fork":true,"url":"https://api.github.com/repos/bruceontheloose/emmet","forks_url":"https://api.github.com/repos/bruceontheloose/emmet/forks","keys_url":"https://api.github.com/repos/bruceontheloose/emmet/keys{/key_id}","collaborators_url":"https://api.github.com/repos/bruceontheloose/emmet/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/bruceontheloose/emmet/teams","hooks_url":"https://api.github.com/repos/bruceontheloose/emmet/hooks","issue_events_url":"https://api.github.com/repos/bruceontheloose/emmet/issues/events{/number}","events_url":"https://api.github.com/repos/bruceontheloose/emmet/events","assignees_url":"https://api.github.com/repos/bruceontheloose/emmet/assignees{/user}","branches_url":"https://api.github.com/repos/bruceontheloose/emmet/branches{/branch}","tags_url":"https://api.github.com/repos/bruceontheloose/emmet/tags","blobs_url":"https://api.github.com/repos/bruceontheloose/emmet/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/bruceontheloose/emmet/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/bruceontheloose/emmet/git/refs{/sha}","trees_url":"https://api.github.com/repos/bruceontheloose/emmet/git/trees{/sha}","statuses_url":"https://api.github.com/repos/bruceontheloose/emmet/statuses/{sha}","languages_url":"https://api.github.com/repos/bruceontheloose/emmet/languages","stargazers_url":"https://api.github.com/repos/bruceontheloose/emmet/stargazers","contributors_url":"https://api.github.com/repos/bruceontheloose/emmet/contributors","subscribers_url":"https://api.github.com/repos/bruceontheloose/emmet/subscribers","subscription_url":"https://api.github.com/repos/bruceontheloose/emmet/subscription","commits_url":"https://api.github.com/repos/bruceontheloose/emmet/commits{/sha}","git_commits_url":"https://api.github.com/repos/bruceontheloose/emmet/git/commits{/sha}","comments_url":"https://api.github.com/repos/bruceontheloose/emmet/comments{/number}","issue_comment_url":"https://api.github.com/repos/bruceontheloose/emmet/issues/comments/{number}","contents_url":"https://api.github.com/repos/bruceontheloose/emmet/contents/{+path}","compare_url":"https://api.github.com/repos/bruceontheloose/emmet/compare/{base}...{head}","merges_url":"https://api.github.com/repos/bruceontheloose/emmet/merges","archive_url":"https://api.github.com/repos/bruceontheloose/emmet/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/bruceontheloose/emmet/downloads","issues_url":"https://api.github.com/repos/bruceontheloose/emmet/issues{/number}","pulls_url":"https://api.github.com/repos/bruceontheloose/emmet/pulls{/number}","milestones_url":"https://api.github.com/repos/bruceontheloose/emmet/milestones{/number}","notifications_url":"https://api.github.com/repos/bruceontheloose/emmet/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/bruceontheloose/emmet/labels{/name}","releases_url":"https://api.github.com/repos/bruceontheloose/emmet/releases{/id}","created_at":"2014-11-10T22:06:03Z","updated_at":"2014-11-10T13:47:28Z","pushed_at":"2014-11-13T01:02:56Z","git_url":"git://github.com/bruceontheloose/emmet.git","ssh_url":"git@github.com:bruceontheloose/emmet.git","clone_url":"https://github.com/bruceontheloose/emmet.git","svn_url":"https://github.com/bruceontheloose/emmet","homepage":"http://emmet.io","size":18096,"stargazers_count":0,"watchers_count":0,"language":null,"has_issues":false,"has_downloads":true,"has_wiki":true,"has_pages":false,"forks_count":0,"mirror_url":null,"open_issues_count":0,"forks":0,"open_issues":0,"watchers":0,"default_branch":"master"}},"base":{"label":"emmetio:master","ref":"master","sha":"3d854dbf8ef982c9451e16ac1fb5ce90c2e4d812","user":{"login":"emmetio","id":2185347,"avatar_url":"https://avatars.githubusercontent.com/u/2185347?v=3","gravatar_id":"","url":"https://api.github.com/users/emmetio","html_url":"https://github.com/emmetio","followers_url":"https://api.github.com/users/emmetio/followers","following_url":"https://api.github.com/users/emmetio/following{/other_user}","gists_url":"https://api.github.com/users/emmetio/gists{/gist_id}","starred_url":"https://api.github.com/users/emmetio/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/emmetio/subscriptions","organizations_url":"https://api.github.com/users/emmetio/orgs","repos_url":"https://api.github.com/users/emmetio/repos","events_url":"https://api.github.com/users/emmetio/events{/privacy}","received_events_url":"https://api.github.com/users/emmetio/received_events","type":"Organization","site_admin":false},"repo":{"id":519390,"name":"emmet","full_name":"emmetio/emmet","owner":{"login":"emmetio","id":2185347,"avatar_url":"https://avatars.githubusercontent.com/u/2185347?v=3","gravatar_id":"","url":"https://api.github.com/users/emmetio","html_url":"https://github.com/emmetio","followers_url":"https://api.github.com/users/emmetio/followers","following_url":"https://api.github.com/users/emmetio/following{/other_user}","gists_url":"https://api.github.com/users/emmetio/gists{/gist_id}","starred_url":"https://api.github.com/users/emmetio/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/emmetio/subscriptions","organizations_url":"https://api.github.com/users/emmetio/orgs","repos_url":"https://api.github.com/users/emmetio/repos","events_url":"https://api.github.com/users/emmetio/events{/privacy}","received_events_url":"https://api.github.com/users/emmetio/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/emmetio/emmet","description":"The essential toolkit for web-developers","fork":false,"url":"https://api.github.com/repos/emmetio/emmet","forks_url":"https://api.github.com/repos/emmetio/emmet/forks","keys_url":"https://api.github.com/repos/emmetio/emmet/keys{/key_id}","collaborators_url":"https://api.github.com/repos/emmetio/emmet/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/emmetio/emmet/teams","hooks_url":"https://api.github.com/repos/emmetio/emmet/hooks","issue_events_url":"https://api.github.com/repos/emmetio/emmet/issues/events{/number}","events_url":"https://api.github.com/repos/emmetio/emmet/events","assignees_url":"https://api.github.com/repos/emmetio/emmet/assignees{/user}","branches_url":"https://api.github.com/repos/emmetio/emmet/branches{/branch}","tags_url":"https://api.github.com/repos/emmetio/emmet/tags","blobs_url":"https://api.github.com/repos/emmetio/emmet/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/emmetio/emmet/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/emmetio/emmet/git/refs{/sha}","trees_url":"https://api.github.com/repos/emmetio/emmet/git/trees{/sha}","statuses_url":"https://api.github.com/repos/emmetio/emmet/statuses/{sha}","languages_url":"https://api.github.com/repos/emmetio/emmet/languages","stargazers_url":"https://api.github.com/repos/emmetio/emmet/stargazers","contributors_url":"https://api.github.com/repos/emmetio/emmet/contributors","subscribers_url":"https://api.github.com/repos/emmetio/emmet/subscribers","subscription_url":"https://api.github.com/repos/emmetio/emmet/subscription","commits_url":"https://api.github.com/repos/emmetio/emmet/commits{/sha}","git_commits_url":"https://api.github.com/repos/emmetio/emmet/git/commits{/sha}","comments_url":"https://api.github.com/repos/emmetio/emmet/comments{/number}","issue_comment_url":"https://api.github.com/repos/emmetio/emmet/issues/comments/{number}","contents_url":"https://api.github.com/repos/emmetio/emmet/contents/{+path}","compare_url":"https://api.github.com/repos/emmetio/emmet/compare/{base}...{head}","merges_url":"https://api.github.com/repos/emmetio/emmet/merges","archive_url":"https://api.github.com/repos/emmetio/emmet/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/emmetio/emmet/downloads","issues_url":"https://api.github.com/repos/emmetio/emmet/issues{/number}","pulls_url":"https://api.github.com/repos/emmetio/emmet/pulls{/number}","milestones_url":"https://api.github.com/repos/emmetio/emmet/milestones{/number}","notifications_url":"https://api.github.com/repos/emmetio/emmet/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/emmetio/emmet/labels{/name}","releases_url":"https://api.github.com/repos/emmetio/emmet/releases{/id}","created_at":"2010-02-15T21:49:46Z","updated_at":"2015-01-05T20:56:01Z","pushed_at":"2015-01-05T21:23:57Z","git_url":"git://github.com/emmetio/emmet.git","ssh_url":"git@github.com:emmetio/emmet.git","clone_url":"https://github.com/emmetio/emmet.git","svn_url":"https://github.com/emmetio/emmet","homepage":"http://emmet.io","size":19209,"stargazers_count":2308,"watchers_count":2308,"language":"CSS","has_issues":true,"has_downloads":true,"has_wiki":true,"has_pages":false,"forks_count":267,"mirror_url":null,"open_issues_count":74,"forks":267,"open_issues":74,"watchers":2308,"default_branch":"master"}},"_links":{"self":{"href":"https://api.github.com/repos/emmetio/emmet/pulls/350"},"html":{"href":"https://github.com/emmetio/emmet/pull/350"},"issue":{"href":"https://api.github.com/repos/emmetio/emmet/issues/350"},"comments":{"href":"https://api.github.com/repos/emmetio/emmet/issues/350/comments"},"review_comments":{"href":"https://api.github.com/repos/emmetio/emmet/pulls/350/comments"},"review_comment":{"href":"https://api.github.com/repos/emmetio/emmet/pulls/comments/{number}"},"commits":{"href":"https://api.github.com/repos/emmetio/emmet/pulls/350/commits"},"statuses":{"href":"https://api.github.com/repos/emmetio/emmet/statuses/877e3f6a5818d519311447c63c81fd19774edaf7"}},"merged":true,"mergeable":null,"mergeable_state":"unknown","merged_by":{"login":"sergeche","id":93595,"avatar_url":"https://avatars.githubusercontent.com/u/93595?v=3","gravatar_id":"","url":"https://api.github.com/users/sergeche","html_url":"https://github.com/sergeche","followers_url":"https://api.github.com/users/sergeche/followers","following_url":"https://api.github.com/users/sergeche/following{/other_user}","gists_url":"https://api.github.com/users/sergeche/gists{/gist_id}","starred_url":"https://api.github.com/users/sergeche/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/sergeche/subscriptions","organizations_url":"https://api.github.com/users/sergeche/orgs","repos_url":"https://api.github.com/users/sergeche/repos","events_url":"https://api.github.com/users/sergeche/events{/privacy}","received_events_url":"https://api.github.com/users/sergeche/received_events","type":"User","site_admin":false},"comments":0,"review_comments":0,"commits":1,"additions":20,"deletions":2,"changed_files":1}}