{"action":"created","issue":{"url":"https://api.github.com/repos/guardian/frontend/issues/12706","repository_url":"https://api.github.com/repos/guardian/frontend","labels_url":"https://api.github.com/repos/guardian/frontend/issues/12706/labels{/name}","comments_url":"https://api.github.com/repos/guardian/frontend/issues/12706/comments","events_url":"https://api.github.com/repos/guardian/frontend/issues/12706/events","html_url":"https://github.com/guardian/frontend/pull/12706","id":151420493,"number":12706,"title":"New galleries: refactor hero image to improve display","user":{"login":"OliverJAsh","id":921609,"avatar_url":"https://avatars.githubusercontent.com/u/921609?v=3","gravatar_id":"","url":"https://api.github.com/users/OliverJAsh","html_url":"https://github.com/OliverJAsh","followers_url":"https://api.github.com/users/OliverJAsh/followers","following_url":"https://api.github.com/users/OliverJAsh/following{/other_user}","gists_url":"https://api.github.com/users/OliverJAsh/gists{/gist_id}","starred_url":"https://api.github.com/users/OliverJAsh/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/OliverJAsh/subscriptions","organizations_url":"https://api.github.com/users/OliverJAsh/orgs","repos_url":"https://api.github.com/users/OliverJAsh/repos","events_url":"https://api.github.com/users/OliverJAsh/events{/privacy}","received_events_url":"https://api.github.com/users/OliverJAsh/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":4,"created_at":"2016-04-27T15:49:07Z","updated_at":"2016-04-27T16:43:21Z","closed_at":null,"pull_request":{"url":"https://api.github.com/repos/guardian/frontend/pulls/12706","html_url":"https://github.com/guardian/frontend/pull/12706","diff_url":"https://github.com/guardian/frontend/pull/12706.diff","patch_url":"https://github.com/guardian/frontend/pull/12706.patch"},"body":"# Before\r\n\r\nThe header and top ad overlapped the hero image.\r\n\r\n![image](https://cloud.githubusercontent.com/assets/921609/14858167/e0c9e148-0c96-11e6-9f1a-d129f12d48f9.png)\r\n\r\n# After\r\n\r\nThe header and top ad no longer overlap the hero image.\r\n\r\n![image](https://cloud.githubusercontent.com/assets/921609/14858105/a7484cd4-0c96-11e6-8b1b-d91633c032c8.png)\r\n\r\n# Notes\r\n\r\nAll the good stuff happens in https://github.com/guardian/frontend/commit/c34f1cd4cb39eb1898ad4e44c5f4bfd94b13be78. The other commits are small refactors in preparation for this refactor.\r\n\r\nThis took quite a lot of refactoring to achieve. Our HTML is now structured like so:\r\n\r\n```\r\n.immersive-header-content\r\n  .top-ad\r\n  .header\r\n  .main-media\r\n```\r\n\r\nThe container, `immersive-header-content`, has a `min-height` of `100vh` and uses flexbox. This allows us to flex `main-media` to whatever space remains after `top-ad` and `header`.\r\n\r\nTo pull this off we've had to pull the `main-media` and content title out of the article and up next to the header. We still have a hidden content title in the article for SEO purposes.\r\n\r\nAccording to [Google’s Structured Data Testing Tool](https://developers.google.com/structured-data/testing-tool/), there appears to be no difference in our structured data (/cc @johnduffell):\r\n\r\n![image](https://cloud.githubusercontent.com/assets/921609/14858353/b447a01e-0c97-11e6-91e6-6af96ef5ef95.png)\r\n\r\n# To do\r\n\r\nIn future PRs:\r\n\r\n- [ ] Use picture el\r\n- [ ] Apply these immersive styles to other immersive content (articles) and remove styles for the old technique"},"comment":{"url":"https://api.github.com/repos/guardian/frontend/issues/comments/215143334","html_url":"https://github.com/guardian/frontend/pull/12706#issuecomment-215143334","issue_url":"https://api.github.com/repos/guardian/frontend/issues/12706","id":215143334,"user":{"login":"jamesgorrie","id":31692,"avatar_url":"https://avatars.githubusercontent.com/u/31692?v=3","gravatar_id":"","url":"https://api.github.com/users/jamesgorrie","html_url":"https://github.com/jamesgorrie","followers_url":"https://api.github.com/users/jamesgorrie/followers","following_url":"https://api.github.com/users/jamesgorrie/following{/other_user}","gists_url":"https://api.github.com/users/jamesgorrie/gists{/gist_id}","starred_url":"https://api.github.com/users/jamesgorrie/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jamesgorrie/subscriptions","organizations_url":"https://api.github.com/users/jamesgorrie/orgs","repos_url":"https://api.github.com/users/jamesgorrie/repos","events_url":"https://api.github.com/users/jamesgorrie/events{/privacy}","received_events_url":"https://api.github.com/users/jamesgorrie/received_events","type":"User","site_admin":false},"created_at":"2016-04-27T16:43:21Z","updated_at":"2016-04-27T16:43:21Z","body":"@OliverJAsh nice - I might pop over and ask about them as I can smell video will be roped into being \"immersive\" too..."}}