3 Replies Latest reply: Oct 22, 2010 12:19 PM by 571043 RSS

    Thumbnail advice


      1. I'm new to Oracle Multimedia but am an experienced PL/SQL developer.
      2. Database is 11gR2 SE1 on RHEL.
      3. Images are stored as ORDImage objects.

      I have a set of about 3000 product images from different manufacturers. The images vary widely in size.

      I have a (no doubt common) requirement to display thumbnails of these images on a web page; when the thumbnail is clicked, the user is taken to the product page where a larger, but not full-size, version of the product image is displayed; if the user clicks on the product image, a shadowbox overlay will display the largest version of the image.

      An additional requirement is that the thumbnails and product page images are all sized consistently. For example, all thumbnails must be 100 x 100px and all product page images must be 400 x 400px (I'm pulling these numbers out of the air, the actual sizes will be determined later). Side note: The full-size image will be scaled to a maximum size (to-be-determined) but it does not have to be consistent because the shadowbox tool sizes the image correctly based on the browser window size.

      For example:

      Source image A is 1000 x 600. I need to create a thumbnail that is 100 x 100 and a product page image that is 400 x 400 while maintaining the 1:6 aspect ratio of the source image

      Source image B is 800 x 500. Again, I need to create a thumbnail that is 100 x 100 and a product page image that is 400 x 400 while maintaining the 8:5 aspect ratio of the source image.

      Source image C is 300 x 400. Again (surprise!), I need to create a thumbnail that is 100 x 100 and a product page image that is 400 x 400 while maintaining the 3:4 aspect ratio of the source image.

      My first thought was, "I can do this with CSS." The problem is that I'm not sure how, especially when you consider all the different browser types, never mind mobiles.

      So, my second thought was to create transparent images of the correct size (100 x 100 and 400 x 400), then scale the source image so that it maintains its aspect ratio but fits inside the new transparent image. Then, I would place the product image over the transparent image as a centered watermark. All of these would be stored as ORDImages.

      The end result would be correctly-sized images that maintain the aspect ratio of the source images. Basically the original images scaled down as required and padded with transparent pixels to fill them out to the correct dimensions.

      Any better ideas out there? I'm no image processing whiz to begin with and have no experience with Oracle Multimedia, so any suggestions would be appreciated.

        • 1. Re: Thumbnail advice
          After sleeping on it and kicking things around this morning, I suppose the most correct approach would be to scale the image so that it fits within the maximum size allowed while still maintaining its aspect ratio and then stopping there.

          The actual screen real estate occupied when the image is displayed really should be controlled by CSS (E.G. max-height and max-width properties), though I suspect getting the image vertically and horizontally centered in the allowed real estate will give me a headache.

          Since the website is generated from the database and stored as static files, I could include a style attribute on each image that would add a transparent border to each image as required. That solves both the size and the centering issue, but still feels a little dirty. :-)

          Any other suggestions or input would still be appreciated.

          • 2. Re: Thumbnail advice

            The first requirement you had about sizing the thumbnail and a larger image to an uniform size while maintaining the aspect ratio can be accomplished easily by Oracle Multimedia. The process() and processCopy() methods allow you to specify what size image you want to create and the aspect ratio is maintained when Oracle Multimedia creates the new image. The Oracle Multimedia Reference book (http://download.oracle.com/docs/cd/E11882_01/appdev.112/e10776/toc.htm) has details of using process() and processCopy() in chapter 5.

            If you would like to dynamically size the image based on the space available in the browser, if you could pass the parameters to the process() or processCopy() methods then they can be used to generate thumbnails and images with those sizes.

            I guess it is not clear to me why you need a transparent border. Re-sizing an image can be done simply and directly with the process() or processCopy() methods.

            • 3. Re: Thumbnail advice
              This mostly applies to the thumbnails. How much of it you want to apply to your "product page" image will depend on your environment.

              I would create a separate thumbnail ORDImage column on the table that holds the source ORDImage to use whenever displaying thumbnails. Use ProcessCopy as Melli had mentioned to generate a thumbnail programmatically when you insert the source image data. Melli knows what she is talking about. ;)

              Your inserts will take slightly longer, but since you already have the image data in memory at the time of insert, you won't have to the extra reading to process the thumbnail image. You will incur slightly more storage usage, but you will save CPU time overall since you only perform the thumbnail generation once per image (instead of each time you want to display the thumbnail). Besides, if you are storing full resolution images, you have room for a few 100x100 thumbnails. (The "product page" images may or may not be another story).

              Take this approach, and your DBAs and end users will thank you.

              P.S: Experiment with compression ratings and image formats when making your thumbnails. At 100x100, an image is already pretty small. An aggressive compression ratio may affect the thumbnail calculation time, and may not yield enough benefit in size savings to make it worthwhile. Additionally, image artifacts due to compression will affect the image differently at such a small size. Your end users may or may not care how accurate the thumbnail is, so you may want to present them with choices, just to find out. Visual accuity is a funny thing. So much of this depends on variables specific to your system (your hardware, the images you are loading, your users, how they are using the thumbnails, etc...) Experiment and find your sweet spot.

              Oh, and if you have doubts about this stuff...It may not hurt to store the parameter string used in the ProcessCopy command dynamically (as Melli mentioned) so that it can be changed in the future when (not if) someone changes their mind.

              Good luck. :)

              Edited by: rcdev on Oct 22, 2010 12:13 PM

              Edited by: rcdev on Oct 22, 2010 12:19 PM