Skip to content

Instantly share code, notes, and snippets.

@terrywbrady
Created December 12, 2016 18:23
Show Gist options
  • Save terrywbrady/7b8d5258626dcc60ea84584ddc4f5567 to your computer and use it in GitHub Desktop.
Save terrywbrady/7b8d5258626dcc60ea84584ddc4f5567 to your computer and use it in GitHub Desktop.
XMLUI: Avoiding Broken Image Icon Display for Restricted Thumbnails
/*
Code to prevent broken image icon display
http://stackoverflow.com/questions/22051573/how-to-hide-image-broken-icon-using-only-css-html-without-js/37192970#answer-37192970
*/
a.image-link img,div.artifact-preview img {
font-family: 'Helvetica';
font-weight: 300;
line-height: 2;
text-align: center;
height: auto;
display: block;
position: relative;
}
/*
Alt text will have the same foreground/background color to prevent alt text flashing. For thumbnails that load properly, the alt text will be present.
Thumbnails that do not load properly will be removed by jQuery. See gu-submit.js.
*/
a.image-link img:after,div.artifact-preview img:after {
content: attr(alt);
display: block;
position: absolute;
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 100%;
color: #fff;
background-color: #fff;
}
//Thumbnails that do not successfully load will be hidden from display (and alt text will also be hidden)
//Additional CSS will be in place to prevent a flash of the alt text and the broken image icon
jQuery("a.image-link img,div.artifact-preview img").error(function(){jQuery(this).hide();});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment