Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

ThumbNails and WaterMarks OnTheFly


Recommended Posts

the reason I chose mimage to replace image in the html_output.php, was because I saw an mimage being used in the thumb.php

 

It was kind of an off the wall thing to do, but it worked. Now both my thumbnails and popup images have watermarks even if I have the thumbs.php $watermark set to 0.

 

It is a fix at least temporarily. I am also on a shared server and my hosting company is using freebsd 4.8 release. I will look more in depth at what is happening when I have more time and post my findings then.

 

Thanks for the contribution

Link to comment
Share on other sites

  • Replies 87
  • Created
  • Last Reply

Top Posters In This Topic

Hi.

Well, I packed thumb.php with commands to print to a file, and printed, I think, every variable I should concern on. ImageName.thumb is being nicely translated to ImageName.jpg, inside thumb.php.

So I was unable to find why on earth the image is outputted in the end as "ImageName.thumb.jpeg".

 

I think I will leave it that way. Anybody knows any reason not to use filenames like the one stated above ("ImageName.thumb.jpeg")? If it does no harm, it will stay like it is.

 

SGershon

 

PS> FadedLazer...

How did you bipassed the path inversion problem?

If at first you don't succeed, you must be a programmer.

 

Tip Posted: Languageless Reviews

Link to comment
Share on other sites

I installed only the watermark contribution and it seem to work.

The only problem with it is that it shows the watermark in different sizes and different positions on my pictures.

Is there a way to make the watermarks appear exactly in the center of the pictures, and be the same size on all of them(for example, if they appear on the 125x125 thumbnails the watermakrs will appear in the same size on each thumbnail, not very tiny on some and very big on other thumbnails, and if they appear on the bigger popups they will be the same sizes, but bigger in the same ratio the popup is bigger than the thumbnail)?

 

Thank you for your help! :)

Edited by dr_lucas
Link to comment
Share on other sites

The way the code is written at the moment, the watermark image is positioned over the source image top left corner, so if you use various size images, then yes it can appear to move about...

 

If you wish to use a watermark on your thumbnails, which will presumably be all the same size, it'll be easiest to simply move the 'imagecopymerge' line to after the reisize section within images.php - make a small watermark image (same size as a thumbnail) for this and alter it's filename in the code.

 

For putting the watermark in the middle of the picture, you could possibly adjust the position of it based on the height/width of the size images and watermark image...

 

As we take all our own pictures, and keep them pretty much the same size, I never had need for this, however you could use something like

$posx = max(0, ($width - $wmk_width) /2) to calculate a position...

Link to comment
Share on other sites

  • 4 weeks later...

Hi mr eyetee.

 

GD is a part that can be added to the PHP parser, and that knows how to do things with graphics. A Graphics Library, in technical terms.

You can check if your server has GD compiled by looking on the admin of OSC, on the 'server info' section.

 

SGershon

 

PS> Hi all. Sorry if I disappeared for a while. I was called to the reserve duty on the army, and then my twins born with 1.5 month of advance, so I did not touch the comp for a while.

If at first you don't succeed, you must be a programmer.

 

Tip Posted: Languageless Reviews

Link to comment
Share on other sites

Hi,

 

I can't get this to work. I'm only using the thumbs part, no watermark

 

I copied the code exactly and tried the suggestions in this thread and still no luck.

 

The "Thumbnail" shows up blank with the "alt=tag" in the box. When I click the blank image the real image shows just fine.

 

I checked the path of the thumbnail and it's pointed to mysite/catalog/images/imagename.thumb

 

Well the imagename.thumb doesn't exist.

 

Can you tell me what i'm doing wrong???

 

Here's my .htaccess file

RewriteEngine  on

RewriteRule ^(.*)\.thumb  /thumb.php?%{REQUEST_FILENAME}

Options +FollowSymlinks

 

RewriteCond %{HTTP_HOST} aplus-computersonline.com$

RewriteCond %{REQUEST_URI} !catalog/

RewriteRule ^(.*)$ catalog/$1

 

Thanks a bunch

Link to comment
Share on other sites

Files ending .thumb do not physically exist ... it's more of a tag thet gets picked up by the .htaccess to redirect the request to thumb.php.

 

Can you access http://yoursite/thumb.php?/local/path/to/image.jpg and does it show a picture? (not this is full path, from root, not a local or relative path)

 

try also http://yoursite/thumb.php?relative/path/to/image.jpg

(note the lack of leading / after the ?)

 

Is there anything showing in your error_log ?

 

This might be a case similar to a previous issue in this thread caused by virtual hosting, where the local path to the image as passed to the script by Apache was not the path the script needed to use to access the file. You can get around this by issuing a string replace within the script to substitute the correct path for the path as passed.

 

Rob

Link to comment
Share on other sites

  • 2 weeks later...

I can't get this contrib to work. The watermark shows up on the thumbnail images, but the "Enlarge Image" link no longer works. And the thumbnails are still the full size images because when I down load them they are full size. And thumbnails in the "What's New" box no longer appear when I click "My Account", but otherwise they show up correctly.

 

Will there be an update to this? Because it seems like a great idea and clean to use GD to do the processing. I love the concept but it just doesn't work for me. :(

Link to comment
Share on other sites

  • 2 weeks later...

I can access both the .jpg and .thumb file directly in IE but the images still are quite slow to load - how do I know if it is loading the .thumbs rather than the .jpg when I load a page? The file properties still show the image as the 60k file size and a save as also saves it as 60k so am just not sure if it is working or not!

 

Thanks

 

Jason

Link to comment
Share on other sites

Heres one - I have the actual functionality of the thumbnail generator working... I can point to blah/blah2/blah.thumb and have it come up.

 

Now, in osCommerce, I can't find

 

if (tep_not_null($width) && tep_not_null($height))

 

in /includes/functions/html_output.php...

my tep_image function goes like this:

 

// The HTML image wrapper function
 function tep_image($src, $alt = '', $width = '', $height = '', $parameters = '') {
// Rob04 - kick in on-the-fly thumbnail generator if required image is thumbnail
// and supplied image is larger.
   if ($image_size = @getimagesize($src)) {
       if (($width < 101 || $height < 81) && ($image_size[0] > 101 && $image_size[1] > 81 )) {
           $image = str_replace(".jpg",".thumb",$image);
       }
   }   
// 101 & 81 refer to settings in thumb.php 
// EndRob04
   if ( (($src == '') || ($src == DIR_WS_IMAGES)) && (IMAGE_REQUIRED == 'false') ) {
     return false;
   }

 

or without the function:

 

// The HTML image wrapper function
 function tep_image($src, $alt = '', $width = '', $height = '', $parameters = '') {
   if ( (($src == '') || ($src == DIR_WS_IMAGES)) && (IMAGE_REQUIRED == 'false') ) {
     return false;

 

Whats the deal? I must be putting the code in the wrong place...

You Can Really Taste The W00t!

Link to comment
Share on other sites

I Got it working, quite by accident.

My code is from $Id: html_output.php,v 1.44 2002/08/02 13:16:49 hpdl Exp $,

but should work in later versions, since html_output.php doesn't seem to change much, if at all...

 

 

CODE

 

// The HTML image wrapper function

function tep_image($src, $alt = '', $width = '', $height = '', $parameters = '') {

if ( (($src == '') || ($src == DIR_WS_IMAGES)) && (IMAGE_REQUIRED == 'false') ) {

return false;

}

 

// alt is added to the img tag even if it is null to prevent browsers from outputting

// the image filename as default

$image = '<img src="' . $src . '" border="0" alt="' . htmlspecialchars($alt) . '"';

 

if (tep_not_null($alt)) {

$image .= ' title=" ' . htmlspecialchars($alt) . ' "';

}

// Rob04 - kick in on-the-fly thumbnail generator if required image is thumbnail

// and supplied image is larger.

if ($image_size = @getimagesize($src)) {

if (($width < 101 || $height < 81) && ($image_size[0] > 101 && $image_size[1] > 81 )) {

$image = str_replace(".jpg",".thumb",$image);

}

}

// 101 & 81 refer to settings in thumb.php

// EndRob04

if ( (CONFIG_CALCULATE_IMAGE_SIZE == 'true') && ((!$width) || (!$height)) ) {

if ($image_size = @getimagesize($src)) {

if ( (!$width) && ($height) ) {

$ratio = $height / $image_size[1];

$width = $image_size[0] * $ratio;

} elseif ( ($width) && (!$height) ) {

$ratio = $width / $image_size[0];

$height = $image_size[1] * $ratio;

} elseif ( (!$width) && (!$height) ) {

$width = $image_size[0];

$height = $image_size[1];

}

} elseif (IMAGE_REQUIRED == 'false') {

return false;

}

}

 

 

if ( ($width) && ($height) ) {

$image .= ' width="' . $width . '" height="' . $height . '"';

}

 

if (tep_not_null($parameters)) $image .= ' ' . $parameters;

 

$image .= '>';

 

return $image;

}

 

////

 

 

I was just moving the Rob04 code around line by line (the old way - as in like, change line, upload, check in browser, check image size, repeat ad infinitum) - and all of a sudden, the images came up as like 3kb. I didn't even do my standard glory dance/voila/celebration thing... instead I just started laughing. smile.gif

You Can Really Taste The W00t!

Link to comment
Share on other sites

I spoke too soon. My thumbnails come up great, but, when you click "enlarge", it brings up the thumbnail image, rather than the full one - so, you can barely tell what is in the picture...

 

Maybe I should add a rewrite condition to .htaccess or something...

You Can Really Taste The W00t!

Link to comment
Share on other sites

Hi,

after re-reading this forum and the reame files many times, i have finally got this contrib working.

I tried various rewriting of the path (i am on a virtual hosting plan too) and got various results (red herrings but they helped) - but it wasnt until i realised that the only .htaccess file you need is the one in teh image directory you are pulling your files from - and this .htaccess file must have TWO rewrite's lines to work with both image.php and thumb.php.

 

add the .htaccess file to the directory with your jpg images in it - say /catalog/images

 

.htaccess file looks like:

RewriteEngine  on
RewriteRule	^(.*)\.jpg  /catalog/image.php?%{REQUEST_FILENAME}
RewriteRule	^(.*)\.thumb  /catalog/thumb.php?%{REQUEST_FILENAME}

 

I was missing the plot ! My htaccess was working fine for creating a watermark on my large images, but wasnt showing me my thumb images at all.

I was not expecting (dunno why) to be able to directly go to http://myserver.com/catalog/images/image1.thumb - but with the .thumb rewrite in the same .htaccess file - these started showing up and everything worked fine exactly as in the original posted contrib. - except for confusion about the .htaccess files.

Ive been pulling my hair out on this.

So to recap - you should be able to use one .htaccess file for both the image watermark on the big image and the thumb (watermarked or not as you choose in thumb.php).

 

no guarantee that it works for you though !

Regards

Mark Brindle

Link to comment
Share on other sites

  • 3 weeks later...

There is one thing I have an issue with, now, though.

 

When I click the link to enlarge the image on product_info.php?products_id=xxxx, it gives me this cool 100*80 picture, enlarged to 800*600 (original size of the picture, IIRC) - and its all horrible and fuzzy, as you would expect.

 

How would I get around this? Is there a piece of javascript or something I should insert in the page containing the code to bring up the popup window to stop the script from parsing the photo, sizing it to 100*80 and displaying a stretched-to-800*600-version?

 

(As in, when the popup windows pops up, it displays the original image, rather than the enlarged thumbnail)?

 

Perhaps I have the code once again in the wrong place... since I only really want it to generate thumbnails on index and search pages. The product pages would probably be better off with a High Quality image, no?

You Can Really Taste The W00t!

Link to comment
Share on other sites

Hi Matthew, thanks for the PM, I'm replying here as then it's available for anybody else having trouble too.

 

Firstly, check you can still goto http://your.server/catalog/images/yourimage.jpg (note, JPG) and see the full-size image you are expecting.

 

If not, then probably the rewrite rules are upset, and you are redirecting all jpgs to the thumbnail prog too - check all .htaccess files - any in that directory and in all above it too.

 

If that works, displaying the correct image, then it's the code added to function tep_image() that's messed up. It's designed to replace .jpg with .thumb only if the requested size of the image is thumbnail sized or smaller (and then only if the actual image is bigger). Check the IFs and positioning in that area.

 

regards

 

Rob.

Link to comment
Share on other sites

AH! Found it.

 

My code was in the wrong place, indeed. (See my post on page 4 of this)

 

I did have

 

////
// The HTML image wrapper function
 function tep_image($src, $alt = '', $width = '', $height = '', $parameters = '') {
   if ( (($src == '') || ($src == DIR_WS_IMAGES)) && (IMAGE_REQUIRED == 'false') ) {
     return false;
   }

// alt is added to the img tag even if it is null to prevent browsers from outputting
// the image filename as default
   $image = '<img src="' . $src . '" border="0" alt="' . htmlspecialchars($alt) . '"';

   if (tep_not_null($alt)) {
     $image .= ' title=" ' . htmlspecialchars($alt) . ' "';
   }

// Rob04 - kick in on-the-fly thumbnail generator if required image is thumbnail
// and supplied image is larger.
   if ($image_size = @getimagesize($src)) {
       if (($width < 101 || $height < 81) && ($image_size[0] > 101 && $image_size[1] > 81 )) {
           $image = str_replace(".jpg",".thumb",$image);
       }
   }  
// 101 & 81 refer to settings in thumb.php 
// EndRob04

   if ( (CONFIG_CALCULATE_IMAGE_SIZE == 'true') && ((!$width) || (!$height)) ) {
     if ($image_size = @getimagesize($src)) { 
       if ( (!$width) && ($height) ) {
         $ratio = $height / $image_size[1];
         $width = $image_size[0] * $ratio;
       } elseif ( ($width) && (!$height) ) {
         $ratio = $width / $image_size[0];
         $height = $image_size[1] * $ratio;
       } elseif ( (!$width) && (!$height) ) {
         $width = $image_size[0];
         $height = $image_size[1];
       }
     } elseif (IMAGE_REQUIRED == 'false') {
       return false;
     }
   }


   if ( ($width) && ($height) ) {
     $image .= ' width="' . $width . '" height="' . $height . '"';
   }

   if (tep_not_null($parameters)) $image .= ' ' . $parameters;

   $image .= '>';

   return $image;
 }

////

 

but I changed it to

 

////
// The HTML image wrapper function
 function tep_image($src, $alt = '', $width = '', $height = '', $parameters = '') {
   if ( (($src == '') || ($src == DIR_WS_IMAGES)) && (IMAGE_REQUIRED == 'false') ) {
     return false;
   }

// alt is added to the img tag even if it is null to prevent browsers from outputting
// the image filename as default
   $image = '<img src="' . $src . '" border="0" alt="' . htmlspecialchars($alt) . '"';

   if (tep_not_null($alt)) {
     $image .= ' title=" ' . htmlspecialchars($alt) . ' "';
   }

   if ( (CONFIG_CALCULATE_IMAGE_SIZE == 'true') && ((!$width) || (!$height)) ) {
     if ($image_size = @getimagesize($src)) { 
       if ( (!$width) && ($height) ) {
         $ratio = $height / $image_size[1];
         $width = $image_size[0] * $ratio;
       } elseif ( ($width) && (!$height) ) {
         $ratio = $width / $image_size[0];
         $height = $image_size[1] * $ratio;
       } elseif ( (!$width) && (!$height) ) {
         $width = $image_size[0];
         $height = $image_size[1];
       }
     } elseif (IMAGE_REQUIRED == 'false') {
       return false;
     }
   }

   if ( ($width) && ($height) ) {
     $image .= ' width="' . $width . '" height="' . $height . '"';
   }

// Rob04 - kick in on-the-fly thumbnail generator if required image is thumbnail
// and supplied image is larger.
   if ($image_size = @getimagesize($src)) {
       if (($width < 101 || $height < 81) && ($image_size[0] > 101 && $image_size[1] > 81 )) {
           $image = str_replace(".jpg",".thumb",$image);
       }
   }  
// 101 & 81 refer to settings in thumb.php 
// EndRob04

   if (tep_not_null($parameters)) $image .= ' ' . $parameters;

   $image .= '>';

   return $image;
 }

////

 

I moved the Rob04 code closer to the bottom and voila, it worked!

 

Rob, might I suggest putting in the readme file where it says:

just before: if (tep_not_null($width) && tep_not_null($height))

 

Put something along the lines of "some older distributions may have this line

 

    if (tep_not_null($parameters)) $image .= ' ' . $parameters;

instead - if your distribution has this line, put the code there instead" :)

 

It may help some of those who have been having problems getting it to work one-way or the other... who knows :)

You Can Really Taste The W00t!

Link to comment
Share on other sites

  • 1 month later...

This contribution sounds really great, but I am convinced it does not work as of yet for the majority of anyone trying to use it. The reason is probably not the coding, but the directions are so unclear that you might as well code your own.

 

1. First, in the readme where it reads:

 

 

RewriteEngine  on
RewriteRule	^(.*)\.jpg  /[full path to your image.php directory]/image.php?%{REQUEST_FILENAME}

 

 

 

it should be noted that the "[" and the "]" need to be removed in addition to putting your full path to image.php. At least I think that is what one is supposed to do from reading this forum.

 

2. Is there a thumb.htaccess that was supposed to be included in this contribution? What about a thumb.php? I see rumor of both in this forum, but who knows. The one I downloaded is the 1.2 version, but I also tried to get the 1.1 version working without success. both had only one file with an .htaccess extension (water.htaccess.)

 

Maybe it works, and like I say, it is a great feature that lots of people invested a lot of time into, but how about a concise readme.txt file? I am not trying to knock your efforts, but the documentation really needs work. Please? Spare us the headaches?

"Your focus is your reality"

Link to comment
Share on other sites

This contribution sounds really great, but I am convinced it does not work as of yet for the majority of anyone trying to use it.

.......

The ne I downloaded is the 1.2 version, but I also tried to get the 1.1 version working without success.  both had only one file with an .htaccess extension (water.htaccess.)

 

You really confused me for a while... I wasn't aware that there was a 1.1 or 1.2 version! My contribution is at:

http://www.oscommerce.com/community/contributions,1839

which doesn't mention [ brackets or have mussing thumb.php files. (And I just downloaded it to make sure!)

 

Having had a look though, I found this:

http://www.oscommerce.com/community/contributions,2431

which is a modification to mine "by ORIENT | September 9, 2004", posted as a seperate contrib. I believe this is the one you are taking about. I've not checked it yet, but will do so in the course of today, and see if I can put together a new version including his additions and some additional features I have thought about here, after having it in use for so long. (and with hopefully a readme you will be happy with :D )

 

If you are impatient, I'd suggest you download my 1.0 and see if that works for you. It at least will have the "missing" files you are looking for.

 

best wishes,

 

Rob.

Link to comment
Share on other sites

That is great news. Yes, it was not your contribution which had the missing files and I had not realized that. I think I will wait for your next version (eagerly awaiting too, because it sounds totally rad.) I have another question too. I already installed another thumbnail generator for now, but it requires that both the height and width are specified in the control panel, therefore making the images in the admin distorted so that they stretch or compress to these specified dimensions. It is fine on the website front end, but looks screwy in the administration section. Does your contribution work differently so that the when the pictures are viewed via the control panel, they appear with their correct proportions?

 

Your contribution really sounds like the solution I an many others need, so I am really looking forward to it. Thank you for your generous contribution of your skills!

"Your focus is your reality"

Link to comment
Share on other sites

I tried your version to see if I could get it working. I had some success, but definitely it is not working and I think it is a problem with my server. I followed your readme (which is 100x better than the contribution which was based on yours, by the way. It is accurate.)

 

My images are mostly broken links, but on some of my images, I see my watermark. However, it is not transparent, and covers the image with an opacity of 100% in the upper-left corner. I am not sure why it only works on some images, but trying only to install the thumbnailing part of your contribution also does not work for me. Mostly it returns broken links, but some images appear, and like I say, I think it is a problem on my server. I had problems with a similar contribution which does not use .htaccess to perform the actions. In that contribution's readme file, it says that I need to have gd > 1.6 to perform some of the available functions included in that contribution such as re-sampling and transparent .gif images. I think I have a version of gd which is greater than 1.6, but I was unable to use the transparency functions and re-sampling part of the other contribution. Here is my gd information from my phpinfo.php script on my server:

 

gd

GD Support enabled

GD Version 1.6.2 or higher

FreeType Support enabled

FreeType Linkage with freetype

JPG Support enabled

PNG Support enabled

WBMP Support enabled

 

Do you see a problem with my settings and your contribution? I am not sure why I am having troubles with your contribution, or the other contribution I installed, which is "OnTheFly_GDThumbs_1_5" by Nate Welch. Have you seen this contribution? What are the differences (besides the fact that yours uses .htacces and includes watermarks?)

 

Thanks for the great support. I was really excited to see that you had responded in less than one day to my earlier queston!

"Your focus is your reality"

Link to comment
Share on other sites

Thanks for the kind words...

 

re broken images ...

 

Firstly, check you can access an image directly:

http://www.yoursite.tld/catalog/images/whatever.jpg
http://www.yoursite.tld/catalog/images/whatever.thumb

 

If those don't work, try going via the image file

http://www.yoursite.tld/image.php?/local/path/to/catalog/images/whatever.jpg
http://www.yoursite.tld/thumb.php?/local/path/to/catalog/images/whatever.jpg

 

if the latter ones work, then it's likely a problem with the .htaccess

check your logs - some people have had issues with virtual hosting providers whereby the path .htaccess passed to the php routine was not the same path as necessary to access the file. You will have to add in a replace routine at the start of each php to substitute the correct path for the incorrect portion. Check backwards in this thread for details.

 

If all the above http examples work, but acessing images in the catalog doesn't,then it's an issue with the oscommerce function you have amended... double check everything...

 

(This is actually the main benefit of using the .htaccess - however you call up the images, from inside osc, directly, or from some other website (we use ebay!) you still get the ability to use thumbnails and watermarks!)

 

 

As far as transparency goes, my routines use solid black as the transparency colour - is your design on a black background? I can't help w.r.t. required versions of GD... I use FreeBSD, and the package it's got installed is "php4-gd-4.3.9" which I think is just the php version!

 

All our images tend to be the same size, but the thumbnails are scaled in proportion, so should look ok. I will test it with multiple sizes when I get the next version done, though.

 

I've not looked at the other contrib you mentioned, but will do so. Not had chance to do any morework on mine today, either, I'm afraid. Been bogged down by an internal fileserver playing up...

 

Regards

 

Rob

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...