On PROD, how do I show a product image made-to-size instead of a scaled main image?

[allenfreeman]

In creating all of my product images (which are building sign graphic .png, not photos), I output three sizes: FULL (which I've import as the main image), DISPLAY which is output to size for use on the PROD page, and THUMB for thumbnails.

I am NOT using legacy images; I'm using the MM9 Images options.

I want to be able to have the user click on the product image on the PROD page and see a big, full-sized main image for a closeup view.

But using the main image on the PROD page distorts it, as it's scaling the big image to fit into the product image window (and also slowing the download of the page, too).

So the question: how might I set up the PROD page to show my DISPLAY sized image as the main product page image, but still have a click of that product image show the FULL main image?

Thanks...

[Mark Stephens]

Name the files in a way that's methodical, such as "productcode.png" and drop them into the same folder. Then you can just use something like this:

<img src="graphics/folder/&mvte:product:code;.png">

The question still remains on how to you make that work with the native MM9 images and gallery-esque click-n-swap action. But maybe you don't need that much horsepower. ??? If you just have the one image with a big "super zoom" you can solve that pretty easily with the above code and then use nearly any kind of zoom script to bring in the large image.

On another note, I'm wondering about what you mean by distortion when down scaling the main image. I don't experience problematic distortion at all. If the proportions are just incorrect when scaled down, you probably just have a minor bit of CSS to modify. That would be the simplest fix.... if I understand your issue correctly.

[allenfreeman]

Thanks for the reply Mark.

From the start I named the image files as you suggest; each of the three image sizes has an end tag of either -FULL.png, -DISPAY.png, or -THUMB.png.

Some of the first images I posted for this site are gifs, but having them still active and without the FULL size in place will allow me to show you the difference in result.

This page has an image used at the size it was created, my 'DISPLAY' size (because this product doesn't yet have a FULL size image uploaded to the server):
http://adasignfactory.com/sign/EP1501.html

And in fact, all of the Category Pages which use my THUMB size in png format come out fine because they are being used at the size they were saved*:
http://adasignfactory.com/category/NURSING-ROOM.html
http://adasignfactory.com/category/CA-Gray.html

But once you go to a PROD page where the png is constricted to fit the FULL main image in the smaller space, the image loses its smooth pixelation:
http://adasignfactory.com/sign/EP2349.html
http://adasignfactory.com/sign/EP4406CA.html

*What's interesting about this is that on the page sections where I can select the Image Type to be used, there is no issue with the sizing distortion. Sections like the Related Products or the Category pages where I can checkbox pick which image to use and can select 'no constraints' for sizing, all is well...

[allenfreeman]

Re-reading your answer, I think I can ask a more clear question: can I get my middle-sized DISPLAY product image to appear in the PROD page (no 'additional images' required), with a click on that product image launching the big main FULL version of that image?

(Seems like that would eliminate all of the image scripting and machining and reduce load times to boot.)

Also, I found another image issue this morning that may be related. In BASK, if I select THUMB as the image option to be shown, no image appears next to any of the product line items. But if I select the main FULL image, a resized one does. I can't understand why...

[Brennan]

I don't think something is setup correctly here. If you using the new image functionality Miva does not scale down the large image. It actually re-sizes and creates smaller versions based on the dimensions you specify. You shouldn't need any naming conventions.

You may want to submit a support ticket and see if we can determine what is wrong.

[allenfreeman]

Actually, I think what you just described IS the problem.

I looked at product http://adasignfactory.com/sign/EP2338.html

...and the product image there has indeed been resized by Miva:
http://adasignfactory.com/mm5/graphi...LL_200x296.png

But png files don't resize well, as they are indexed color files. (Photoshop says to convert indexed color photos to RGB before you change their size.)

I've attached to this reply both my DISPLAY image at 200x296 and Miva's shrunken version of my FULL image at 200x296. That's the image quality difference.

So can you fix your 'shrinker'?

Or is there a way to designate existing images as requested?

[allenfreeman]

Hmm, attaching these here blurs both images. But there is definitely a difference. Your 'shrink' makes all the edges sharp and pixelated; my version is smooth...

[allenfreeman]

I tested the theory above by saving a .jpg of one of the sign image files at my main size (450x666), then adding it as the FULL size image for that product.

The pixelated edges are gone from the Image Machine shrunken sized image used on my product page (the Miva-renamed EP2369_FULL_200x296.jpg):

http://adasignfactory.com/sign/EP2369.html

BUT using jpgs instead of pngs is not a solution here: that jpg is 17K optimized; the same size png is 5K. Using jpegs sitewide would slow the site significantly.

So the $60K question: can the Miva Image Machine be fixed to handle png image resizing correctly?

[allenfreeman]

One last thought: would there be any benefit to deleting all of the current images and re-uploading all of them in a specific way?

I used a csv to designate images to Image Types, and uploaded some of these images by ftp.

In addition to the PROD issue outlined above, I'm also having issues with the thumbnails appearing on the BASK page. (I can get the newest images to appear there but only when I select FULL/main size so the file size is larger than need be, and I can't get any of the old images that aren't designated with a main image to appear there).

Maybe the hodge-podge of upload/Image Types designations has something to do with all of this?

[Ron Frigon]

Have you checked your Upload Settings?

Domain Settings > Domain Details Tab > Upload Settings, near the bottom of the page.

May not help with your issue with .png, but worth checking... Maybe make sure that .png is included in the Image Extension Types and JPEG Image Quality is set to 100%.

Hope this helps.

[allenfreeman]

Thanks Ron, nice idea. But png is in place and 100% is the setting.

[allenfreeman]

I figured out one solution, but it's still not ideal: change the code in the Product Display Layout to make the image class="img-responsive" then radio-button select for Main Image "No constraints".

Doing so keeps .png files "smooth". But that also fills the image area fully, so if you post a larger sized image file than the space really needs so it will add a few K to the page load, and if you use an image smaller than the bounding box it will make these images look blurry (grrr, adding a max-width:100% style to the image didn't stop the expansion).

So I still think the best solution here would to be to have the ability to upload then select exactly which image is to appear in any location in the store, always at 100% max size (not having the Image Machine create various images sizes). That way, optimized images can be created and used every time.

Maybe Miva will review?

[allenfreeman]

If someone could tell me where to max-width style the image so that product images smaller than the bounding box stay at actual size, this would be an acceptable stop-gap solution per the idea above.

The look of the product image filling the bounding box is growing on me (even with the extra few K in file size); but the blurry expansion of an image smaller than the bounding box is not acceptable...

[Brennan]

The trade off to doing that is that you would then need to upload 4 or 5 different size images for each image. That was one of the problems image machine solves is the ability to upload a single zoom image size and have Miva handle the re-sizing for you.

I think the better solution is to improve the quality of resized images. We use the GD image library to do all the image re-sizing and I think that is where the core quality problem lies. I've seen jpegs lose significant quality from the original when resized even at 100%.

I can see if there are any improvements to GD that would help.

For the time being setting the images to no constraints will load the original image and then you can CSS scale it down for the different pages, although it may add a little extra overhead since you are loading larger than needed image sizes.

[allenfreeman]

100% agree Brennan. Improving image quality on the Image Machine resizing would be best. I didn't know how feasible that was, so my suggestion is for "second best". ;)

Can you please tell me WHERE the css can be edited to scale down the images on the PROD page? I can't seem to find the line to keep the MAIN image max-width:100%. Is that css tied to the Image Machine? In the Ready Theme?