imsky/holder

:city_sunrise: Client-side image placeholders.

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.

holder's Issues

Angularjs support?

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.

Remove background-color

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?

background image 404?

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?

Not working on Android

Android 4.3
Nexus 4
ussing the raw version from github

Work with jquery?

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

Programmatically call holder.js for dynamically inserted img's

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

Automatic contrast

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.

SVG: Unicode Problem with btoa

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 )));

Accents break working

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">

Custom text is not constrained to specific image

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="" />

Font-family argument?

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?

Maintain aspect ratio of fluid images?

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?

Combining auto and fluid

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.

Broken link icon when percent dimentions in non visible placeholders

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.

Not working IE9, possibly below IE9 as well

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.

Running holder twice over the same image element

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.

Dynamic page generation fail

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" /');

fluid images for responsive layouts

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.

Use svg for rendering

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.

Add retina support

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?

Use of substr(-1) in render() returns an unexpected value resulting in a script error in IE 8

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 "%"

Image lazy loading (compatibility with lazyload.js)

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:

1. that lazyload only accepts properly specified src="/img/bg.png" or background-image=url("/img/bg.png") attributes. It can't handle the holder.js syntax/data-src.
2. Responsive images (% instead of px) don't work since holder converts <img> tags with %width/height to <div>s thereby creating incompatibility with lazyload.

What are people's thoughts on image lazyloading?

Is there possibility to include image in css file?

Text with Font-Face are periodically invisible

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

Broken link icon with bootstrap carousel example

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.

holder.js makes jQuery's show() method no working in IE8

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?

Fix width regression on retina display

FR: allow specification of per-image class/id attributes

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.

New problems with ie 7 & 8

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

Make it work with anchor too for lighbotx gallery debug

It is possible to append holder to anchor to generate href url to be used in gallerys for debbugging lightbox style scripts?

Problem when [img] don't have a src

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

Use holder.js to prevent 404

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 ?

Uncaught TypeError: Cannot read property 'use_canvas' of undefined holder.js:502

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

Can't install specific versions via Bower

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.

Placeholders on Retina-displays

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

Text is 0x0

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

holder.js file has executable permissions?!

Why would it need to be executable?

Replace original image with dynamic size

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.

Problems with ie 7 & 8

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

IE7

IE8

Incorrect text when using percentage

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.

Homepage messed up

Hitting http://imsky.github.com/holder/ in Chrome 24 on rMBP produces overlapping images. Could be related to the recent width and retina changes?

Background

hi.
Is there anyway to use Holder in background-image?

Custom text doesn't work when dimensions set in %

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"

text: operator not work when used with percentage

<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.

Use semver format for git tags

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

Fluid placeholder text alignment

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.

IE8 compatibilty problem

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)

License notice mismatch

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.

Can't install v2.0 via Bower

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.

Text label that looks like dimensions is wrongly treated as such

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" />

• expected - 300px x 200px image with "3x2 ratio" label
• actual result - 3px x 2px image