Provide callback to replace broken image with default

MikeGrace commented 13 years ago

Here is a working example of using jQuery to replace a broken image with a default.

http://mikegrace.s3.amazonaws.com/geek-blog/sandbox/replace-broken-images-with-default.html

It would be great to be able to have each theme be able to handle this in their own way via a callback. @erudianart, could you add this when you are abstracting the keyboard events also?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <title>untitled</title>
    <script type="text/javascript" charset="utf-8">
        $(document).ready(function() {
            $("img").error(function() {
                $(this).unbind("error").attr("src","https://img.skitch.com/20110913-jnfbxrb1u392119e5thn9euurr.gif");
            });
        });
    </script>
</head>

<body>
<img src="http://openphoto-localbuild.s3.amazonaws.com/custom/201109/1315782620-_MIK3872_700x960.jpg" alt="openphoto image"/>

</body>
</html>

erudianart commented 13 years ago

Er.. whats the use case for this? @jmathai can you elaborate por moi si vous plait?

jmathai commented 13 years ago

I believe this is referring to photos which (for whatever reason) don't exist on the user's file system (S3 or equiv). Case 4 in the scenarios below.

It's really an error case.

If the photo id doesn't exist in the database then the page will display a 404. If the photo id exists in the database
If the photo id exists in the database but no photo version exists then it will point to a dynamic URL to generate the photo.
If the photo id exists and the photo version exists in the DB and the path is valid then the browser will display the photo.
If the photo id exists and the photo version exists in the DB but the path is a 404 then the browser will display a broken image.

Instead of that broken image this would display a "not found" image.

A nice-to-have that we could add if it doesn't add too much complexity and/or code. Ideally whatever enables this functionality enables a more general hook into the JS framework. This could be a proof of concept of that general functionality.

MikeGrace commented 13 years ago

Yes! Exactly!

photo / frontend

Provide callback to replace broken image with default #105