{"id":695,"date":"2022-02-18T14:00:05","date_gmt":"2022-02-18T12:00:05","guid":{"rendered":"https:\/\/www.olivertacke.de\/labs\/?p=695"},"modified":"2022-02-20T10:43:51","modified_gmt":"2022-02-20T08:43:51","slug":"x-ray","status":"publish","type":"post","link":"https:\/\/www.olivertacke.de\/labs\/2022\/02\/18\/x-ray\/","title":{"rendered":"X-ray"},"content":{"rendered":"<p>I once jokingly said I&#8217;d stop creating H5P content types when I succeeded in having built one for every letter in the alphabet. I am one step closer now, because here&#8217;s my latest creation that starts with an X: X-ray!<\/p>\n<div class=\"h5p-iframe-wrapper\"><iframe id=\"h5p-iframe-125\" class=\"h5p-iframe\" data-content-id=\"125\" style=\"height:1px\" src=\"about:blank\" frameBorder=\"0\" scrolling=\"no\" title=\"X-Ray Demo\"><\/iframe><\/div>\n<p>It is obviously a spin-off of <a href=\"https:\/\/www.olivertacke.de\/labs\/2022\/01\/23\/a-boring-name-this-time-image-zoom\/\">Image Zoom that was released recently<\/a>. I could simply have added a switch to that content type, so it could serve for both zooming and raying. However, I can think of a couple of features in the future that don&#8217;t make sense for both modes and I like the good old Unix philosophy:<\/p>\n<blockquote><p>Make each program do one thing well. To do a new job, build afresh rather than complicate old programs by adding new &#8220;features&#8221;. (Doug McIlroy)<\/p><\/blockquote>\n<h2>Options<\/h2>\n<p>So, here you can:<\/p>\n<ul>\n<li>Choose one image for the background (the X-ray image) and one for the foreground (the normal image).<\/li>\n<li>Select the image width and position (useful for those who cannot control the width of H5P content on their platform).<\/li>\n<li>Change the X-ray lens size.<\/li>\n<li>Decide not to darken the background when x-raying.<\/li>\n<li>Decide not to x-ray automatically, but to require the user to activate it.<\/li>\n<li>Decide to not show the little x-ray indicator in the lower right corner \u2013 but it\u2019s useful to have it there as it\u2019s the button to toggle if you\u2019re controlling the content type with the keyboard.<\/li>\n<\/ul>\n<h2>Want to use it already?<\/h2>\n<p>I\u2019ll ask the H5P core team to review the content type and to release it on the H5P Hub, but this process usually takes some time. If you want to use the content type right away, just download the demo content above via the Reuse button underneath the content, and then upload the .h5p file onto your H5P platform in the H5P Hub. That will install the required libraries if you have permission to install H5P libraries \u2013 if not, your system admin will need to help you with that. The source code is available as well: <a href=\"https:\/\/github.com\/otacke\/h5p-x-ray\" target=\"_blank\" rel=\"noopener\">https:\/\/github.com\/otacke\/h5p-x-ray<\/a><\/p>\n<h2>Future development<\/h2>\n<p><img decoding=\"async\" src=\"https:\/\/c.tenor.com\/uTpq0eP0gD8AAAAC\/doctor-who-who-nose.gif\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>I once jokingly said I&#8217;d stop creating H5P content types when I succeeded in having built one for every letter in the alphabet. I am one step closer now, because here&#8217;s my latest creation that starts with an X: X-ray! It is obviously a spin-off of Image Zoom that was released recently. I could simply &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/www.olivertacke.de\/labs\/2022\/02\/18\/x-ray\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;X-ray&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[5,33,16,58],"class_list":["post-695","post","type-post","status-publish","format-standard","hentry","category-h5p","tag-content-type","tag-graphics","tag-h5p","tag-visual"],"_links":{"self":[{"href":"https:\/\/www.olivertacke.de\/labs\/wp-json\/wp\/v2\/posts\/695","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.olivertacke.de\/labs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.olivertacke.de\/labs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.olivertacke.de\/labs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.olivertacke.de\/labs\/wp-json\/wp\/v2\/comments?post=695"}],"version-history":[{"count":0,"href":"https:\/\/www.olivertacke.de\/labs\/wp-json\/wp\/v2\/posts\/695\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.olivertacke.de\/labs\/wp-json\/wp\/v2\/media?parent=695"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.olivertacke.de\/labs\/wp-json\/wp\/v2\/categories?post=695"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.olivertacke.de\/labs\/wp-json\/wp\/v2\/tags?post=695"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}