Checking if product imgs are present

Posted on 11/12/2008 10:17:18

I'm working on an ecom solution where we are using the "Use alt. images" feature to specify a file naming convention for the product images.

The file name pattern looks like this:

Small: {ProductNumber}_Detail1.jpg

Medium: {ProductNumber}_Detail2.jpg

Large: {ProductNumber}_Detail3.jpg

Which works fine. Problem is, we want to check if the images are available, so we can avoid broken links to images that do not exist. Our approach was to check for this using the "if defined" template tag:

<!--@If Defined(Ecom:Product.ImageLarge)-->
<img src="<!--@Ecom:Product.ImageLarge.Clean-->" alt="" />
<!--@EndIf(Ecom:Product.ImageLarge)-->

This check does not work and the Ecom:Product.ImageLarge.Clean tag returns a path to an image that is not yet uploaded. It seems that the Ecom:Product.ImageLarge.Clean tag is hardcoded with the path to the file name specified in the file naming pattern, even if the file physically doesn't exist.

Is there a way for us to check for the presence of image files like this, to avoid broken links and small red x'es?

Replies

Posted on 11/12/2008 12:57:21

You can handle this using javascript:

<img src="" onerror="defaultimage(this);" />

function defaultimage(obj){

obj.src = "/Files/Billeder/MyDefaultImage.png";

}

</script>

Posted on 11/12/2008 13:58:44

Sorensen wrote:

You can handle this using javascript:

<img src="" onerror="defaultimage(this);" />

<script language="javascript" type="text/javascript">

    function defaultimage(obj){

        obj.src = "/Files/Billeder/MyDefaultImage.png";

    }

</script>

Thanks, I will be using this on the website. Also, for some images I want them removed altogether when they fail, so I'll be using onerror="this.parentNode.removeChild(this)" on those instead...

It's a shame to have to resort to javascript hacks like this, but I can't see any other solutions right now.

You must be logged in to post in the forum

Developer forum

Checking if product imgs are present

Replies