{"action":"created","issue":{"url":"https://api.github.com/repos/WordPress/gutenberg/issues/5577","repository_url":"https://api.github.com/repos/WordPress/gutenberg","labels_url":"https://api.github.com/repos/WordPress/gutenberg/issues/5577/labels{/name}","comments_url":"https://api.github.com/repos/WordPress/gutenberg/issues/5577/comments","events_url":"https://api.github.com/repos/WordPress/gutenberg/issues/5577/events","html_url":"https://github.com/WordPress/gutenberg/pull/5577","id":304563192,"number":5577,"title":"Remove absolute position from svgs","user":{"login":"Kluny","id":310102,"avatar_url":"https://avatars3.githubusercontent.com/u/310102?v=4","gravatar_id":"","url":"https://api.github.com/users/Kluny","html_url":"https://github.com/Kluny","followers_url":"https://api.github.com/users/Kluny/followers","following_url":"https://api.github.com/users/Kluny/following{/other_user}","gists_url":"https://api.github.com/users/Kluny/gists{/gist_id}","starred_url":"https://api.github.com/users/Kluny/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Kluny/subscriptions","organizations_url":"https://api.github.com/users/Kluny/orgs","repos_url":"https://api.github.com/users/Kluny/repos","events_url":"https://api.github.com/users/Kluny/events{/privacy}","received_events_url":"https://api.github.com/users/Kluny/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":5,"created_at":"2018-03-12T22:26:50Z","updated_at":"2018-03-14T22:34:54Z","closed_at":null,"author_association":"NONE","pull_request":{"url":"https://api.github.com/repos/WordPress/gutenberg/pulls/5577","html_url":"https://github.com/WordPress/gutenberg/pull/5577","diff_url":"https://github.com/WordPress/gutenberg/pull/5577.diff","patch_url":"https://github.com/WordPress/gutenberg/pull/5577.patch"},"body":"When an SVG is set as a post's featured image, it overflows the image container. This is because the browser doesn't recognize an svg's height. Since theimage is positioned absolutely, the broswer allocates 0 height to the svg, and the image container collapses. This only happens with svgs, so the absolute position attribute is removed from that image type.\r\n\r\n## Description\r\n\r\n## How Has This Been Tested?\r\n- Create a test post using Gutenberg.\r\n- Upload a jpg image as featured image. \r\n- Observe that it looks just fine on the page. \r\n- Allow SVG media uploads by adding the following snippet to your functions.php:\r\n\r\n```function mime_types($mimes) {\r\n    $mimes['svg'] = 'image/svg+xml';\r\n    return $mimes;\r\n}\r\nadd_filter('upload_mimes', 'mime_types');\r\n```\r\n- Upload an svg image.\r\n- Set it as featured image on your test post. \r\n- Observe that it overflows the featured image container and looks terrible.\r\n- Apply my patch; run npm; refresh.\r\n- Observe that the svg does not overflow the container anymore.\r\n- Replace it with a jpg again.\r\n- See that the jpg looks okay as well.\r\n\r\n## Screenshots (jpeg or gifs if applicable):\r\nBefore:\r\n![screen shot 2018-03-12 at 15 21 24](https://user-images.githubusercontent.com/310102/37312729-6c1cb8be-2609-11e8-9d72-d22403cbce6d.png)\r\n\r\nAfter:\r\n![screen shot 2018-03-12 at 15 23 25](https://user-images.githubusercontent.com/310102/37312737-72f7d588-2609-11e8-99e9-a3b110b4be6c.png)\r\n\r\n## Types of changes\r\nBug fix - solves #5477 \r\n\r\n## Checklist:\r\n- [x] My code is tested.\r\n- [x] My code follows the WordPress code style.\r\n- [x] My code has proper inline documentation.\r\n"},"comment":{"url":"https://api.github.com/repos/WordPress/gutenberg/issues/comments/373197738","html_url":"https://github.com/WordPress/gutenberg/pull/5577#issuecomment-373197738","issue_url":"https://api.github.com/repos/WordPress/gutenberg/issues/5577","id":373197738,"user":{"login":"Kluny","id":310102,"avatar_url":"https://avatars3.githubusercontent.com/u/310102?v=4","gravatar_id":"","url":"https://api.github.com/users/Kluny","html_url":"https://github.com/Kluny","followers_url":"https://api.github.com/users/Kluny/followers","following_url":"https://api.github.com/users/Kluny/following{/other_user}","gists_url":"https://api.github.com/users/Kluny/gists{/gist_id}","starred_url":"https://api.github.com/users/Kluny/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Kluny/subscriptions","organizations_url":"https://api.github.com/users/Kluny/orgs","repos_url":"https://api.github.com/users/Kluny/repos","events_url":"https://api.github.com/users/Kluny/events{/privacy}","received_events_url":"https://api.github.com/users/Kluny/received_events","type":"User","site_admin":false},"created_at":"2018-03-14T22:34:54Z","updated_at":"2018-03-14T22:34:54Z","author_association":"NONE","body":"> we're requesting details about the media item from the REST API, and unfortunately it doesn't include these dimensions for SVG images.\r\n\r\nI still don't quite understand how SVG images can have height and width properties. I thought SVGs were just a set of instructions about the shape of an image, and you're supposed to supply your own size? \r\n"}}
{"actor":{"display_login":"Kluny"}}