Home

E-commerce Blog

The mystery of the disappearing images in Virtuemart

Blogs - The E-commerce blog

The mystery of the disappearing images in Virtuemart

Written by Marco Conti Thursday, 29 July 2010 15:41

Virtuemart - Multiple
images on a product
description page

Are your Virtuemart extra product images gone from your store? Maybe I have the solution here, but be prepared for a surprise because it's weird.

I am helping one of my ex-students and now partners in my web design activity, with building a Virtuemart store. She called me the other day asking me to help her with a puzzling problem:
Some of her product images in Virtuemart were no longer showing. They did at some point but when she checked again recently they were all gone.

These were not the main product images Virtuemart displays in the category and product views. These were the additional images that Virtuemart displays only on the product view below the main image thumbnail. For those of you that don't know what I am talking about, VM can display a number of images in addition to the main product image. These images are supposed to show different views of the same product and will display below the main thumbnail. When a user clicks on one of them they will be able to see a slide-show of larger versions of the images.

It's a nice feature and one that Virtuemart users should really leverage more. Online, the only way a customer can get an idea of what a product looks like is by looking at the images you present to them. The more views and the better the images are shot, the more of a chance you'll make the sale.

But in this particular case the extra images were gone. Seemingly overnight and for no reason.

I first told my friend to do what I always do when presented with some problem I can't solve on the spot: Google it. And so she did, but what came back were several posts on the Virtuemart Forum with solutions that really did not completely apply to our case.

But even then, they could be useful so I read on. In one of the threads someone said that if you had moved the location of your site and forgot to change the URLs in the VM configuration files (administrator/components/com_virtuemart/virtuemart.cfg.php) but you corrected that oversight the images would come back. Not our case, since changing the URLs in the "config" file was one of the things I drill on all my students whenever we move Virtuemart stores. Also, if the URLs point to an older staging site or any other location that would have prevented us from navigating to the store at all and kept us away from the administration (or load the other site's administration as it's frequently the case). But I figured we would check anyway.

I was right. Our URLs were correct and it made no difference to the images. They were still missing.

Up to that point, I hand't even looked at the site yet. I was busy and about to go into a meeting.
Later on the meeting was blown and my friend asked me to go on a GoToMeeting with her to help her troubleshoot the issue (I use GoToMeeting a lot and I find it a great tool - as a designer and developer I think it saved my life. Or at least my sanity).

I told her I wanted to check it out on my own first or we would have been wasting time until I had a clearer idea of what was going on.

Something I read on the forum made me wonder...
When an image is missing, Firefox often does not show anything where the image should be. Internet Explorer instead displays a box with a red cross.I usually prefer Firefox's behavior because if I screwed up at least no one else knows about it, but in other ways, IE behavior is better because at least you know something is wrong.

I decided to fire up IE and go look at the pages.
The red cross was there, right below the main image (which was showing just fine).

So I right-clicked on the broken image and brought up its properties. That gave me access to the link and I copied and pasted it in Firefox (only because it takes an eternity on my system to bring up a new IE tab, for some reason). In fact, I also copied the URL of the page in anticipation of using Firebug to check out the code (IE also has a decent set of tools for developers, but I find Firebug more familiar.

When I pasted the URL of the broken image in Firefox I received my first surprised: the image displayed just fine. The URL itself looked something like this:

com_virtuemart/show_image_in_imgtag.php? 
filename=%2Fcomponents%2Fcom_virtuemart 
%2Fshop_image%2Fproduct%2FP2130038.JPG

I was looking at the %2F trying to figure out if it was a space or what (I am still ignorant of that detail. A space is %20 but on some server that's different) when I saw the image display on the page.

I switched to the Virtuemart page in Firefox with the broken/invisible image, I refreshed and the image suddenly appeared. I went to IE, on the same page, clicked on refresh and once again the image appeared there too.

Most certainly a weird thing, but I thought I was on to something. I called my friend and told her to bring up the page I was on. Naturally she was incredulous. "You fixed it!" she yelled. "not quite" I responded, but I knew I was close.

I asked her to take me to another product with multiple images. We went there and in IE the extra image was still broken. I had fixed a page but not the site.

I told her to go to the Joomla/Virtuemart administration and clear the Joomla cache (Help>>Clear Cache).

After she did that we both refreshed the page and the image came back on both our screens.

Want to take credit cards on your Virtuemart shop?

You can. And it's easy.
Don't send your customers to another site. Apply today or send us an email and we'll set you up.

At that point I was sure what happened. We often build new sites in some sort of staging directory. This could be a local Apache server or a sub-directory in the hosting account. It's a good policy to use a staging server and put an Apache password on the directory so that:

Curious eyes wont stumble on a half developed site
Hackers won't find a probably unsecured site under construction and zombify it
Search Engines don't start indexing a site half done and in the wrong directory

The htpassword trick is a neat one because for all intents and purposes the staging site does not exist until it's done, but it lets you work in the closest environment possible to a live server.

Naturally, as you get closer to having the site done you have to move it to the top level and test it there. We were at that stage and ready to launch except for the extra images and a few other minor things.

When we moved the site from its staging directory to the top level, naturally we had to edit all the relevant configuration files, Joomla's, Virtuemart's, and replace the old path with the new one.

We had done that, but at the same time we managed to kill the extra images because we forgot to clear the cache. The Virtuemart extra images must be very sensitive to cache issues and they use a dynamic type link (as you can see above) that relies on various scripts to display the image.

Clearly, VM was reading the cache when it tried to display those images and when I called one of them outside the VM framework it displayed by itself, in the process clearing the cache for that image or forcing Virtuemart to acknowledge the new path somehow (I am still a bit unclear on the mechanics of the issue, but it's one of those things I'll take on faith until I can research it further).

When we cleared the cache on the entire site, we basically did a similar thing but globally and it acted on all pages.

I can't go back and post on every VM forum thread where this problem was tackled and I am not saying it will work on everyone's site either. In my experience there are a million ways to screw up your site. This is only one of them.
But I hope I have enough keywords in this article so that anyone looking to fix the same problem will find it and give this method a shot. It may work.

If it does, take the time to let me know. I always enjoy it when a reader comments about their success following an article they read here.

I hope you enjoyed this mystery episode of the disappearing images. It goes to show that even the wrong answers sometimes can put you on the right path and that if you poke around enough you may just find a weird way to fix your problems.

Until next time... Peace!

*cc*

Set as favorite

Bookmark

Email this

Trackback(0)

TrackBack URI for this entry

Comments (8)

Subscribe to this comment's feed

Show/hide comments

This has saved my night!

I had a site which I was due to put live tomorrow and this post has saved my day! Thank you to evryone who has posted here! As with 'Sue' my problem was the lack of the '/' at the end of the url. Thank you, Thank you, and Thank You!

Asho , September 07, 2011

Thank you!

Boy, am I glad I found your site. Saved me time, saved my sanity. Thank you!

Alex , June 12, 2011

Thanks

THANKS so much it really really helps. I have searched all over for a solutions.

REkha , June 07, 2011

same problem - but a little different

Thank you for your solution, but I´ve found out, that my problem is a little different. And I don´t know why.

When I get the path of the missing images from IE, it shows that:
http://www.shop.gluecksstoff.de/components/com_virtuemart/shop_image/product/components/com_virtuemart/shop_image/product/gutschein_text_web.jpg

So anywhere in my code it seems to have the path two times. You know what I mean? Sorry for my bad english. Any idea how to solve it?

Björn Hens , November 22, 2010

Developed localy and put live then lost pictures

The solution is the same. Change nr 1 AND the URL in virtuemart Administration configuration as OZ said smilies/wink.gif

1. after move to another directory/location change the joomla config file.
2. in Joomla backend go to components - virtuemart and click on admin - configuration, it'll try to go to configuration but the url for that ain't right. Just change the url in your browser address field to where it really should go. Now when you hit enter the backend configuration page should come up as normal.
3. Go to security tab and change the url there to what it should be for the new location.
Works like charm every time and takes a fraction of time than every other way I've had to do it before.

Best practice for me!

thx a lot! smilies/grin.gif

Fred , November 15, 2010

Easier solution

I've had the same problem but found an easier solution and images and everything else came back.

1. after move to another directory/location change the joomla config file.
2. in Joomla backend go to components - virtuemart and click on admin - configuration, it'll try to go to confuguration but the url for that ain't right. Just change the url in your browser address field to where it really should go. Now when you hit enter the backend configuration page should come up as normal.
3. Go to security tab and change the url there to what it should be for the new location.
Works like charm every time and takes a fraction of time than every other way I've had to do it before.

Oz

WildFinn , September 29, 2010

Read it and noted!

I just read it for my reference. Maybe it's a thousand way of 1, but it also a solution. Work great man. Keep post your history, i'll be helpful for other & be your personal notice book.

eX , September 17, 2010

same problem - different solution

I had the same problem and it was that I didn't enter site url properly in the Virtuemart >> Admin >> Configuration. I need the "/" after the url of the new site

Sue , August 11, 2010