Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

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


alix32

Recommended Posts

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!

Link to comment
Share on other sites

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 by MrPhil
Link to comment
Share on other sites

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Unfortunately, your content contains terms that we do not allow. Please edit your content to remove the highlighted words below.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...