Hey, I'm the founder of Metadash.
Previously I was at Better.com and Glean AI.
My interests include design, tech, and startups.
I call New York City home.
:city_sunrise: Client-side image placeholders.
Home Page: http://holderjs.com
License: MIT License
Hey, I'm the founder of Metadash.
Previously I was at Better.com and Glean AI.
My interests include design, tech, and startups.
I call New York City home.
Bower 1.1.0 doesn't offer any version other than 1.9.0, even when installing via Git endpoint:
$ bower info https://github.com/imsky/holder.git
https://github.com/imsky/holder.git
Versions:
- 1.9.0
Possible cause is the project's inconsistent tagging scheme: every tag except this one is named vX.X
.
If text label contains something that looks like dimensions script gets confused and uses that as dimensions to generate image.
Example: <img src="holder.js/300x200/text:3x2 ratio" />
While implementing Holder, I realized that it overrides any background-color
set in my CSS. Here's a screenshot and the relevant CSS:
.img-polaroid {
padding: 4px;
background-color: #fff;
border: 1px solid #ccc;
}
When used on a Holder image, the background-color
is overwritten by the default theme. If I remove #L79, the problem is resolved and my CSS remains intact (note the white borders here given the padding and background I set in CSS).
Any reason the <img>
gets a background color in addition to the image?
Why canvas ? why not svg ? Creating svg would save CPU usage a lot ! An svg image for placeholder will be like 10 lines max. Then btoa can be used to encode it to base64 and then insert it in img.src.
My whole project using client-side page generation.
I cant get your system work with code like this(changed, because github markdown mess up with me):
$('body').append(' img data-src="holder.js/200x200" /');
Text with Font-Face and Google Fonts are periodically invisible in Google Chrome Canary.
Sometimes Font-Face and Google Font are invisible. But text with system fonts are visible.
Detailed description of this bug:
https://code.google.com/p/chromium/issues/detail?id=337505
It would be nice to be able to combine these two. For instance you might have an image inline with text on a large monitor but full-width on a small screen. Auto works fine for that since it doesn't add dimensions so we can target it with media queries. That said, it would be nice if it could still show the dimensions like it does in fluid mode. Is that a possibility? Thanks.
When letters with accents are used, the thumbnail is not generated.
<img data-src="holder.js/100%x180/sky/text:Árvíztűrő tükörfúrógép">
I may have missed something, but as it currently stands fluid images will shrink horizontally but always maintain the original height. I'd like the image to maintain its aspect ratio as it shrinks, so the height should decrease as the width decreases.
Is this possible?
We have a specific need where I need to dynamically update the size of the picture according to a parameter.
The first time holder takes the holder URL from the data-src
(as the src
field is absent) field and values the src
field with the image content.
The second time holder takes the holder URL from src
field (as it is now valued) and does nothing because the image data doesn't match the expected holder URL pattern.
I think the problem comes from this line in the run
method
var src = images[i].getAttribute("src") || images[i].getAttribute("data-src");
I'm not sure it is viable but a solution would be to test both field values against the pattern and take the first positive candidate.
Hello,
There's a broken link icon on the second and third slide in carousel Bootstrap Example.
http://getbootstrap.com/examples/carousel/
The problem is visible in Google Chrome (Windows, Linux and Android) and IE but NOT in Firefox (Windows, Linux and Android).
I suppose (maybe i am wrong) that the problem concern holder.js but i am not sure because i just started learning Bootstrap...
Can you confirm ?
Thanks in advance. Olivier.
It would be nice if I could specify only a background color and have holder automatically pick a contrasting colour for the text overlay. The contrast function in LESS.js does this according to the WCAG spec. It would require a regex to match a single colour instead of the pair that you currently match in the app.flags object.
I could be doing something really wrong here but I've created a simple test case and I'm unable to make the placeholder work in IE9. I get the system default image (image with red cross). I haven't tested below IE9.
If it is my mistake somewhere then please do let me know of any corrections I could make as i'm quite keen to implement this.
I have an original holder image holder.js/180x180
How to replace it with new image with dynamic height in js ? I tried..
Holder.run({
images: '#src',
src: someimage.jpg
});
OR
Holder.add_image('#src', someimage.jpg).run()
The replaced image should have height more than 180 from default placeholder image.
Hey, love the script. I was just wondering if there was a way of calling holder.js programmatically i.e. $(img).holderjs()
.
This would be useful for dynamically inserted images i.e. images inserted after holder.js has done its magic
hi,
I downloaded the bootstrap template at http://getbootstrap.com/examples/carousel/ and running it as is from localhost via apache. I'm getting the error:
Uncaught TypeError: Cannot read property 'use_canvas' of undefined holder.js:502
app.run holder.js:502
(anonymous function) holder.js:595
r holder.js:613
I downloaded holder.js today from the zip.
thanks
Any chance of using percentage measures instead of pixels? This is a very useful library but as it stands it usefulness on responsive layouts is diminished by the default pixel values written to the image width and height attributes. It would be great to control this via css thus we could use max-width 100% or similar.
Regards.
It would be really cool if holder.js and lazyload.js worked together. The justification for this is that these two plugins have highly complementing roles in handling image loading.
The two main problems with making these two plugins compatible are:
src="/img/bg.png"
or background-image=url("/img/bg.png")
attributes. It can't handle the holder.js syntax/data-src
.<img>
tags with %width/height to <div>
s thereby creating incompatibility with lazyload.What are people's thoughts on image lazyloading?
Running holder.js in IE8 gives the following error:
'XMLSerializer' is undefined holder.js, line 154 character 2
MInimal example:
<html><head><script src="holder.js"></script></head><body>
<img data-src="holder.js/100x100">
</body></html>
The browser support says this: Internet Explorer 6+ (with fallback for older IE)
This would allow for testing further layout specifics.
Syntax could easily follow existing convention, eg:
<img src="holder.js/200x300/id:foo/class:bar baz" alt="" />
I was trying to hack this in quickly by reusing the custom text code, which is how I ran across the problem in issue #3, but whatever fix is applied there should ultimately be applicable to this case.
Running bower install holderjs#1.9.0
results in:
bower cloning git://github.com/imsky/holder.git
bower cached git://github.com/imsky/holder.git
bower fetching holderjs
bower error Could not find tag satisfying: holderjs#1.9.0
There where errors, here's a summary of them:
- holderjs Could not find tag satisfying: holderjs#1.9.0
The tag 1.9.0 could not be found within the repository
And bower info holderjs
shows:
holderjs
Versions:
- 54fcb722722c86274ece267850f08b9d775ad1a4
-
This might be because of the way you're labeling tags... But I'm not totally sure.
I'm sure font-family control would be useful to many others, but it's absence makes me think they're's some blocking issue. Can I hold out any hope for this?
The custom text feature filters "down" to subsequent images in a document, rather than being limited to the one it was specified on, eg:
<img src="holder.js/200x200/text:foo" alt="" />
<img src="holder.js/200x200" alt="" />
<img src="holder.js/200x200" alt="" />
<img src="holder.js/200x200/text:bar" alt="" />
…results in three images captioned "foo" followed by the fourth with "bar.
Can currently be worked around by passing an empty text
parameter to stop the propagation, eg:
<img src="holder.js/200x200/text:" alt="" />
<img data-src="holder.js/200x90/text:hello world" alt="">
Writes hello world
.
<img data-src="holder.js/100%x90/text:hello world" alt="">
Writes: {container_size}x90
. For example: 1903x90
.
In order to be able to install holder from bower, the tags of the git repo should have a semver format.
From bower docs:
When tags are available in the endpoint, you can specify a semver tag to fetch concrete versions
Right now, it's impossible to install a concrete version of bower:
$ bower install holderjs#1.7.0
- holderjs Could not find tag satisfying: holderjs#1.7.0
The tag 1.7.0 could not be found within the repository
$ bower install holderjs#v1.7
- holderjs Could not find tag satisfying: holderjs#v1.7
The tag v1.7 could not be found within the repository
hi.
Is there anyway to use Holder in background-image?
Why would it need to be executable?
The computed image from "holder.js/200x120/" gets doubled in size (400x240) on retina-displays, which is good, because those displays have a devicePixelRatio of 2, but confusing if your viewport metatag property "width" and "height" are not set to "device-width" and "device-height" :).
This should either be documented or automatically scaled by 50% as described here:
http://stackoverflow.com/questions/7699621/display-image-at-50-of-its-native-size/7699686#7699686
I've got background images working fine using the method #sample {background:url(?holder.js/200x200/social) no-repeat}
. However, the Chrome console throws the dreaded 404, even though to all appearances the page looks fine. I know this can be avoided for img
tags by using data-src
in place of src
attribute. Is there any similar workaround to avoid the 404 on background images?
Would be great if I could use this neat little tool with angularjs.
Unfortunately, all content is generated on the fly with Angularjs, so holder doesn't register itself on newly inserted content.
Custom text in a placeholder should always be centered vertically and horizontally. When creating a fluid placeholder with custom text, the text becomes top aligned.
This shows correctly:
<img data-src="holder.js/100%x400/">
This does not:
<img data-src="holder.js/100%x400/text:banners">
It looks the line-height is not being included, and extra margin is added on the top of the placeholder.
I see that the README.md and package.json was recently changed to say that holder was released under the MIT License, but the holder.js and holder.min.js files in the gate still claim it's under the Apache license.
Hi there,
Fist great prototyping plugin.Ivan Malopinsky Great job! & thanks for sharing
I am playing with it I found out that it doesn't render anything in IE 7, 8.
At the very bottom of the markdown I read about fallback for IE < 9. Is it the case that it doesn't work or i have to use some polyfill ?
I attached snapshots of the errors in IE 7 and 8. hope that helps
and that is my HTML:
<img src="holder.js/200x300"/>
<img src="holder.js/200x300/industrial">
<img src="holder.js/200x300/social">
<img src="holder.js/200x300/text:Hello World">
Hey thanks in advance !
Cheerz,
Guby
I'm having problem when one image have no src atributte (in my case, it happens in the facebook login button, probably because facebook adds the attribute/value dinamically).
in the line 216, i've added a check:
if (src.indexOf(options.domain)>=0)
before the line condition:
if (src.indexOf(options.domain)>=0)
That line was trowing an "Uncaught TypeError: Cannot call method 'indexOf' of null"
The problem occurs on Chrome and Firefox (both on Mac). Strangely, don't affected Safari...
Probably there is a more elegant way of doing this, as I'm not a js expert.
Thanks,
Felipe
Thanks for a great script.
The latest version seem to have new issues with IE7 and IE8.
I get "Function Expected" on line 316, char 2
Same error occurs on the Bootstrap implementation:
http://twitter.github.com/bootstrap/components.html#media
Also on 'holder.js'-frontpage
http://imsky.github.com/holder/
Screen dump, in IE8 (8.0.6001.19400)
/Kasper
I would like use icon in text, see
http://plnkr.co/edit/JZBEuL?p=preview
http://jsfiddle.net/Samyoul/xH4fs/
But SVG in v2.3 have issue with btoa and unicode
'btoa failed: The string to be encoded contains characters outside of the Latin1 range.'
Solution: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding
This solution have bad output
return "data:image/svg+xml;base64,"+btoa(unescape(encodeURIComponent( string )));
I have no idea what holder.js is doing in the core, but recently I had the problem that jQuery's show() method stops working in IE8 when passing any argument to it. After hours of debugging and researching it turned out, that this bug only appears when holder.js is included.
For me it felt pretty weird that holder.js influences jQuery's functionality in IE8, so I made a lot of tests. Unfortunately, there's nothing one can do.
So, is this a known bug?
Versions of IE prior to IE 9 do not return expected values when negative indexes are passed to the substr function.
Example in IE 8
"100%".substr(-1) // returns 100%
"100%".slice(-1) //returns "%"
For example:
<img data-src="holder.js/100%x90" alt="">
Text on placeholder is: {container size in px}x90. I'm sure it should be: 100%x90. Yes i know we can use:
<img data-src="holder.js/100%x90/text:100%x90">
But i'm sure this is incorrect default behavior.
I'm implementing Holder into the Bootstrap docs right now to replace Placehold.it. Awesome work thus far—many thanks. One request I have though is adding retina support as right now images come out looking quite blurry.
Any chance a retina option can be added?
Hi,
thanks for your work. Does it exist a way to use holder.js to replace images that are 404?
I tryied using the $('img').error() from jquery, and change the attr src ou src-data and it didn't work. Perhaps it exists a method implemented in holder.js ?
Android 4.3
Nexus 4
ussing the raw version from github
Using v2.0 right now. Custom text doesn't work when dimensions are specified as %, i.e. this works:
<img data-src="holder.js/450x320/text:hello world">
but this doesn't:
<img data-src="holder.js/100%x100%/text:hello world">
The latter shows dimension instead of "hello world"
Don't know if anyone has seen this bug yet, if not I can upload an example somewhere.
I'm using the Bootstrap example page with the carousel (which is where I found out about holder.js btw!), and using holder images in the carousel slides, only the holder images on the first slide displays the text (dimensions) correctly. The rest show 0x0 as the text (although the holders are the correct size), and the text isn't vertically centred, rather at the top of the placeholder.
Tried moving the js around from footer etc, doesn't seem to make a diff.
Thanks
Hello,
I apologize, Im verry new on github. I dont know where to put this message.
Every time I use holder.js in slide shows to render non visible placeholders with percent dimentions like: data-src="holder.js/100%x115/auto/dark/text:First slide"
,
it fails with a console message: Uncaught Error: Holder: placeholder is not visible
This is visible in Google Chrome (Windows, Linux and Android) and IE but not in Firefox.
I changed dimension_check()
attempting to reach the closest visible parentElement
, and try it to see how holder would render then.
Until now no more console message from Holder.
Changed of code:
function dimension_check(el, callback) {
var dimensions = {
height: el.clientHeight,
width: el.clientWidth
};
if (!dimensions.height && !dimensions.width) {
if (el.hasAttribute("data-holder-invisible")) {
// OLD:
// throw new Error("Holder: placeholder is not visible");
// /OLD
// CHANGED:
// FIXME: if options.offsetParent = true;
// if (options.offsetParent) {
if (true) {
var e=el.parentElement;
while(!e.offsetParent&&!(e.nodeName=="HTML")) e=e.parentElement;
dimensions = {
height: e.clientHeight
,width: e.clientWidth
};
};
if(!!dimensions.height && !!dimensions.width){
el.removeAttribute("data-holder-invisible");
}else{
throw new Error("Holder: placeholder is not visible");
};
// /CHANGED
} else {
el.setAttribute("data-holder-invisible", true)
setTimeout(function () {
callback.call(this, el)
}, 1)
return null;
}
} else {
el.removeAttribute("data-holder-invisible")
}
return dimensions;
}
Nice if it helps.
Thanks for this good job!
Nicolas.
Hitting http://imsky.github.com/holder/ in Chrome 24 on rMBP produces overlapping images. Could be related to the recent width and retina changes?
I have the following code
In the Html
<img src="holder.js/32x32/social/text:N">
<div id="img"></div>
In the javascript
$("#img").append("<img src=\"holder.js/32x32/social/text:N\">")
The static image if you build well. But that is generated dynamically with jquery, is generated as if there were
Sorry for my bad English
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.