{"id":334,"date":"2010-03-11T08:01:48","date_gmt":"2010-03-11T07:01:48","guid":{"rendered":"http:\/\/gavtaylor.co.uk\/blog\/?p=334"},"modified":"2011-06-15T16:05:23","modified_gmt":"2011-06-15T15:05:23","slug":"enable-broken-image-placeholders-in-firefox","status":"publish","type":"post","link":"https:\/\/gavtaylor.uk\/blog\/enable-broken-image-placeholders-in-firefox","title":{"rendered":"Enable broken image placeholders in Firefox"},"content":{"rendered":"<p>Something that has always bugged me about Firefox is that if it encounters a broken image it doesn&#8217;t display an image place-holder. Instead it displays the alt attribute as in-line text. This can cause problems if your primary development browser is Firefox, as you may not notice broken images on a page.<\/p>\n<p>For a while there has been an option in the config to display image place-holders while a page loads but not for broken images as on IE (yes I&#8217;m praising an IE feature!).<\/p>\n<p>Image placeholders on load is set to ON by default, your can change this if you want by going to <a href=\"about:config\"><em>about:config<\/em><\/a> and searching for &#8216;image&#8217;. The option your looking for is:<\/p>\n<p><code>browser.display.show_image_placeholders<\/code><\/p>\n<p>Just double click to change the value.<\/p>\n<p>As I said before, this doesn&#8217;t affect broken images after the page has loaded, and after several searches it looks like the option just isn&#8217;t available to Fx users as a general setting. There is however a solution&#8230;<\/p>\n<p>Firefox allows users to specify custom CSS to be applied to websites on a global basis, e.g if you want your default link colour on unvisited links to be black instead of the default blue.<\/p>\n<p>You do this by making changes to your global content css file. You can find it at the following location (OS Specific &#8211; I&#8217;m on windows 7) <em>\u2018%appdata%\\Mozilla\\Firefox\\Profiles\\\\chrome\u2019<\/em> (if your on a domain you will need to edit it in your roaming folder), look for a file called &#8216;UserContent-example.css&#8217; and rename it to &#8216;UserContent.css&#8217;, this will then be loaded by Firefox when it fires up.<\/p>\n<p>Add the following CSS to the file and restart Firefox..<br \/>\n<code>\/* Enable image placeholders  *\/<br \/>\n@-moz-document url-prefix(http), url-prefix(file) {<br \/>\nimg:-moz-broken{<br \/>\n-moz-force-broken-image-icon:1;<br \/>\nwidth:24px;<br \/>\nheight:24px;<br \/>\n}<br \/>\n}<\/code><\/p>\n<p>Thats it&#8230; when you next come accross a broken\/missing image, you will get a box the size you have defined in its place with the alt inside it.<\/p>\n<p><strong>Update:<\/strong><br \/>\nI was asked if I could add a broken image in this post as an example to see the css tweak in action, so here it is -&gt; <img src=\"broken-image-example\" style=\"vertical-align: text-top; margin-top:4px;\" \/> &lt;-<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Something that has always bugged me about Firefox is that if it encounters a broken image it doesn&#8217;t display an image place-holder. Instead it displays the alt attribute as in-line text. This can cause problems if your primary development browser is Firefox, as you may not notice broken images on a page. For a while [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false},"categories":[43,73,41],"tags":[163,304,27,162,165,164,26],"jetpack_featured_media_url":"","jetpack_publicize_connections":[],"_links":{"self":[{"href":"https:\/\/gavtaylor.uk\/blog\/wp-json\/wp\/v2\/posts\/334"}],"collection":[{"href":"https:\/\/gavtaylor.uk\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gavtaylor.uk\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gavtaylor.uk\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gavtaylor.uk\/blog\/wp-json\/wp\/v2\/comments?post=334"}],"version-history":[{"count":16,"href":"https:\/\/gavtaylor.uk\/blog\/wp-json\/wp\/v2\/posts\/334\/revisions"}],"predecessor-version":[{"id":589,"href":"https:\/\/gavtaylor.uk\/blog\/wp-json\/wp\/v2\/posts\/334\/revisions\/589"}],"wp:attachment":[{"href":"https:\/\/gavtaylor.uk\/blog\/wp-json\/wp\/v2\/media?parent=334"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gavtaylor.uk\/blog\/wp-json\/wp\/v2\/categories?post=334"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gavtaylor.uk\/blog\/wp-json\/wp\/v2\/tags?post=334"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}