Default image if product image not available

[sylvia8308]

Greeting,

Is there a way to automatically force a default image and thumbnail if a product doesn't have an image assigned? I can't seem to find anything reference to achieve this.

The site is a new build and does have toolkit.

Thanks!
JS

[nottheusual1]

Re: Default image if product image not available

For thumbnails, try this:

<mvt:if expr="NOT ISNULL l.settings:product:thumbnail">
<a href="&mvt:global:sessionurl;Screen=PROD&Store_Code=&mvta:store:code;&Product_Code=&mvta:product:code;&Category_Code=&mvta:category:code;"><img src="&mvte:product:thumbnail;" border=0></a>
<mvt:else>
<img src="path/to/your/image">
</mvt:if>

For full sized images:

<mvt:if expr="NOT ISNULL l.settings:product:image">
<img src="&mvt:product:image;" alt="&mvt:product:name;">
<mvt:else>
<img src="path/to/your/image">
</mvt:if>

Adjust the internal bits to fit your linking style, etc.

[sylvia8308]

Re: Default image if product image not available

GREAT! Thanks.

[sylvia8308]

Re: Default image if product image not available

Sorry, I spoke too soon. I'm all good with the category and product list page, but I'm not able to get it to work for the product display page. I'm sure I'm missing something.

Currently, before editing the image is set as such (included the thumb/image machine code in case they meed to be factored in.

<img id="main_image" src="graphics/en-US/cssui/blank.gif" alt="&mvte:product:name;" />

<ul id="thumbnails" class="thumbnails"></ul>
    <div id="closeup_div" class="closeup"><img id="closeup_image" src="graphics/en-US/cssui/blank.gif" alt="" /><div><a id="closeup_close">close</a></div></div>
    <mvt:item name="product_display_imagemachine" param="body:product:id" />

Any suggestions?

Thanks in advance.

[sylvia8308]

Re: Default image if product image not available

Just to further my previous message, the coding below works on the Category, Product List and even the Featured items page.

However it is not working on the Product page... I've tried many, many variations of the code here as well as the code nottheusual1 was kind enough to share. I'm stumped. This is going into a few hours now. If it works on the other pages, why not the product page.. any other recommendations?

[SIZE=2]
[/SIZE]
[SIZE=2]<mvt:if expr="NOT ISNULL l.settings:product:imagetypes:main">[/SIZE]
[SIZE=2]<a href="&mvte:product:link;"><img src="&mvte:product:imagetypes:main;" alt="&mvte:product:name;" />[/SIZE]
[SIZE=2]<mvt:else><a class="image-not-available" href="&mvte:product:link;" title="&mvte:product:name;"><img alt="Image Not Available" src="graphics/00000001/default.png" height="150" width="150"></a>[/SIZE]
[SIZE=2]</mvt:if>

[/SIZE]

[KNewbrough]

Re: Default image if product image not available

You've got Image Machine installed on PROD, so I'd just piggyback onto the JavaScript already in place for it.

Go to PROD and to the "Product Display Layout Image Machine" tab, scroll to the bottom and just before "</script>" at the bottom paste this code in:

ImageMachine.prototype.Initialize = function(data) {    var self = this;
    this.data = data;


    if (data.length === 0) {
        if (this.legacy_uri) {
            this.main_image.src = this.legacy_uri;
        } else {
            this.main_image.src = '[COLOR=#ff0000]/path/to/your/backup/product/image.jpg[/COLOR]';
        }


        return;
    }
}

And then modify the file path in red to point to your default backup product image.

[sylvia8308]

Re: Default image if product image not available

Thank you KNewbrough... its so close!... but only working partly...

• does show default image if the product does not have an image
• but if the product does have an assigned image the assigned image doesn't show at all...

I am not using the legacy images for the page, only the additional images main image code = main. (Forgive me if you already know this, I'm just trying to be thorough.)

Below is the code I have as I understood from the instructions:

<script>ImageMachine.prototype.ImageMachine_Generate_Thumbnail = function( thumbnail_image, main_image, closeup_image, type_code )
{
	var thumbnail	= document.createElement( 'li' );
	var span	= document.createElement( 'span' ); // to vertically center the thumbnail images
	var img		= document.createElement( 'img' );
	img.src		= thumbnail_image;


	thumbnail.appendChild( span );
	thumbnail.appendChild( img );


	return thumbnail;
}




ImageMachine.prototype.Initialize = function(data) {    var self = this;
    this.data = data;




    if (data.length === 0) {
        if (this.legacy_uri) {
            this.main_image.src = this.legacy_uri;
        } else {
            this.main_image.src = 'graphics/00000001/default.png';
        }




        return;
    }
}

</script>[COLOR=#232323][FONT=Arial][/FONT][/COLOR]

[KNewbrough]

Re: Default image if product image not available

Oops, try this complete function in place of the function I posted earlier:

ImageMachine.prototype.Initialize = function(data) {    var self = this;
    var i, thumbnail;


    this.data = data;


    if (this.main_image === 'undefined') return;


    if (this.thumbnails !== 'undefined') this.Clear_Thumbnails(this.thumbnails);
    if (this.closeup_image !== 'undefined') this.closeup_image.src = '';


    if (data.length === 0) {
        if (this.legacy_uri) {
            this.main_image.src = this.legacy_uri;
        } else {
            this.main_image.src = '[COLOR=#232323]graphics/00000001/default.png[/COLOR]';
        }


        return;
    }


    this.main_image.src = data[0].image_data[this.main_index];


    if (this.closeup_active && this.closeup_div !== 'undefined' && this.closeup_image !== 'undefined' && this.closeup_close !== 'undefined') {
        if (this.onmainimageclick) AddEvent(this.main_image, 'click', function() {
            self.onmainimageclick();
        });
        else AddEvent(this.main_image, 'click', function() {
            self.Closeup_Open();
        });


        if (this.oncloseupimageclick) {
            AddEvent(this.closeup_div, 'click', function() {
                self.oncloseupimageclick();
            });
            AddEvent(this.closeup_backing, 'click', function() {
                self.oncloseupimageclick();
            });
        } else {
            AddEvent(this.closeup_div, 'click', function() {
                self.Closeup_Close();
            });
            AddEvent(this.closeup_backing, 'click', function() {
                self.Closeup_Close();
            });
        }


        this.closeup_image.src = data[0].image_data[this.closeup_index];


        if (this.main_image !== 'undefined') this.main_image.style.cursor = 'pointer';


    }


    if (this.thumb_active && (this.thumbnails !== 'undefined')) {
        for (i = 0; i < data.length; i++) {
            if (this.current_type && (data[i].type_code === this.current_type)) {
                this.main_image.src = data[i].image_data[this.main_index];
                if (this.closeup_active && this.closeup_image !== 'undefined') this.closeup_image.src = data[i].image_data[this.closeup_index];
            }


            thumbnail = this.ImageMachine_Generate_Thumbnail(data[i].image_data[this.thumb_index] ? data[i].image_data[this.thumb_index] : null,
                data[i].image_data[this.main_index] ? data[i].image_data[this.main_index] : null,
                data[i].image_data[this.closeup_index] ? data[i].image_data[this.closeup_index] : null,
                data[i].type_code);
            thumbnail.mm5_thumbnail = data[i];


            AddEvent(thumbnail, 'click', function() {
                var node;


                if (this.mm5_thumbnail) node = this;
                else if (window.event) node = window.event.srcElement;
                else node = null;


                while (node && !node.mm5_thumbnail) {
                    node = node.parentNode;
                }


                if (node) self.onthumbnailimageclick(node.mm5_thumbnail);
            });


            if (data.length > 1) {
                this.thumbnails.appendChild(thumbnail);
            }
        }
    } else {
        if (this.closeup_active && this.closeup_image !== 'undefined') this.closeup_image.src = data[0].image_data[this.closeup_index];
    }




    if (!this.main_image.getAttribute('src', 2) && this.current_type.length) this.main_image.src = data[0].image_data[this.main_index];


    if (this.preload) {
        this.Preload(data, 0);
    }
}

[sylvia8308]

Re: Default image if product image not available

Thank you so much! That did it! I really appreciate your help!


Have a great day.
JS