I've been working on a website that uses Mijoshop (the Joomla e-Commerce and shopping cart component built using Opencart). Problems occurred when I wanted to use product images as CSS background images, rather than HTML images. The client had uploaded a bunch of images that contained spaces within the file names, making them unsuitable to be used in the CSS background-image property (which just left empty white spaces where the images should have appeared(. There were so many that it just wasn't feasable to rename them manually, so I needed to figure out an automated solution, which became a three step process:
- Install an Opencart script that future proofed the problem of file names containing images from this point on.
- Renaming the existing images already used on the server
- Modifying the SQL tables to match the newly renamed files names
Step 1 - Future proof Mijo Shop
I found this opencart ocmod script that removes spaces from any images uploaded. It worked great and was easy to install directly using the extensions installer from Mijoshop main menu. The file can be found here.
Whilst this ensured that any images uploaded from this point on wouldn't have any spaces withn the filenames, this script didn't fix the problem for any images already uploaded into the Opencart catalog. The next step in this solution addresed that problem.
Step 2 - rename the existing files
I found a handy program called Rename-it! which made easy work of btach removing all spaces in the exisiting files. I tested this locally on desktop rather than applying it directly to the server. Rename-It! is free, easy to use, and also didn't install any crappy third party bloat software. Too easy!
Step 3 - Match the database filenames with existing files
The tables in the website database need to match the newly renamed files. We can do this with a simple SQL find and replace script that removes the spaces in the filenames. make sure to change the table name and column name to match those used by your website
SET image = REPLACE(column_name, ' ', '');