"Sale" text or image over product image in product listing

[alix32]

Hi,

 

In the product listing and for all products on sale, I'd like to have a "sale" written on the product's image.

 

Has anyone got an idea of how to do this?

 

Many thanks!

[MrPhil]

I can think of a couple of ways:

 

1. Make a copy of all your product images, and Photoshop/GIMP a "Sale!" text over them. This involves no coding, but is a lot of manual work to do. When you're done with the sale, you need to restore all the old product images (without "Sale!" in them). Perhaps you could set up an automated process using GIMP's macro language to add the "Sale!", and a shell script to swap in/out the "Sale!" versions of images. That's some coding (outside of osC), but could make the work level bearable.

 

2. Modify osC so that all product images are "background". Set up a <div style="width: nnnpx; height: nnnpx; background: url(path/product_image.jpg);"></div>. When you want "Sale!", you insert a foreground GIF image with just that text and a transparent background, in the <div>. You could have a number of different overlays to suit your needs ("Sale", "Reduced", "Closeout", "Only 3 Days Left!", etc.). This of course involves considerable code modification in osC, but is more elegant and in the long run, less work. Note that you can have only one foreground overlay in use at a time, so you would have to create new overlays for each combination of text you want.

 

Note that you could put text over the image, as an overlay, but that generally won't look as good as angled large text in an image.

 

I don't know if there are any existing add-ons to help with either of these methods.

Edited June 18, 2010 by MrPhil

[alix32]

I can think of a couple of ways:

 

1. Make a copy of all your product images, and Photoshop/GIMP a "Sale!" text over them. This involves no coding, but is a lot of manual work to do. When you're done with the sale, you need to restore all the old product images (without "Sale!" in them). Perhaps you could set up an automated process using GIMP's macro language to add the "Sale!", and a shell script to swap in/out the "Sale!" versions of images. That's some coding (outside of osC), but could make the work level bearable.

 

2. Modify osC so that all product images are "background". Set up a <div style="width: nnnpx; height: nnnpx; background: url(path/product_image.jpg);"></div>. When you want "Sale!", you insert a foreground GIF image with just that text and a transparent background, in the <div>. You could have a number of different overlays to suit your needs ("Sale", "Reduced", "Closeout", "Only 3 Days Left!", etc.). This of course involves considerable code modification in osC, but is more elegant and in the long run, less work. Note that you can have only one foreground overlay in use at a time, so you would have to create new overlays for each combination of text you want.

 

Note that you could put text over the image, as an overlay, but that generally won't look as good as angled large text in an image.

 

I don't know if there are any existing add-ons to help with either of these methods.

 

Hi!

 

Thanks a lot for taking the time to reply.

Your first option is actually something I never thought of although it sounds bleeding obvious :) Well in my situation it is as I only have about 20 products on sale so great for short term solution. In the longer term I will look into this 2nd option.

 

Thanks again