{"id":438,"date":"2011-04-26T22:04:16","date_gmt":"2011-04-27T02:04:16","guid":{"rendered":"http:\/\/eligrey.com\/blog\/?p=438"},"modified":"2011-04-26T22:04:16","modified_gmt":"2011-04-27T02:04:16","slug":"title-image-files-in-opera","status":"publish","type":"post","link":"https:\/\/eligrey.com\/blog\/title-image-files-in-opera\/","title":{"rendered":"Title image files in Opera"},"content":{"rendered":"<p>I recently discovered a method to title image files in Opera. I was experimenting with CSS generated content in regards to the &lt;title&gt; element in various browsers, and discovered that as long as the &lt;head&gt; and &lt;title&gt; elements are not <code>display: none<\/code>, generated content applied before and after the &lt;title&gt; element is added to the page title itself in Opera. It was obvious to me that I should combine this with <a href=\"http:\/\/tools.ietf.org\/html\/rfc5988\">HTTP Link: headers<\/a> containing stylesheets, as to make it possible to modify the title of usually non-titleable media, such as images, plain text, audio, and video.<\/p>\n<p>In <a href=\"http:\/\/eligrey.com\/demos\/image-title\/demo.png\">this demo<\/a>, the following CSS rules are applied in Opera.<\/p>\n<pre lang=\"css\">head, title {\n\tdisplay: block;\n\twidth: 0;\n\theight: 0;\n\tvisibility: hidden;\n}\n\ntitle::before {\n\tcontent: \"Just an image \u2014 \";\n}<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>I recently discovered a method to title image files in Opera. I was experimenting with CSS generated content in regards to the &lt;title&gt; element in various browsers, and discovered that as long as the &lt;head&gt; and &lt;title&gt; elements are not display: none, generated content applied before and after the &lt;title&gt; element is added to the [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[25,71,121],"class_list":["post-438","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-css","tag-hacks","tag-opera"],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/pfpUD-74","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/eligrey.com\/blog\/wp-json\/wp\/v2\/posts\/438","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/eligrey.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/eligrey.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/eligrey.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/eligrey.com\/blog\/wp-json\/wp\/v2\/comments?post=438"}],"version-history":[{"count":0,"href":"https:\/\/eligrey.com\/blog\/wp-json\/wp\/v2\/posts\/438\/revisions"}],"wp:attachment":[{"href":"https:\/\/eligrey.com\/blog\/wp-json\/wp\/v2\/media?parent=438"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/eligrey.com\/blog\/wp-json\/wp\/v2\/categories?post=438"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/eligrey.com\/blog\/wp-json\/wp\/v2\/tags?post=438"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}