Image Machine Problem: Not Creating Resized Images:

[Siamese-Dream.Com]

Hi there, Everyone:

I have a ticket in with Miva for this, but support has been pretty slow lately (when I have needed it), so I am hoping that someone here might be able to point me in the right direction:

I just set up the Image Machine function in my store (CSSUI Production Release 8 Update 3, Miva Merchant Engine v5.12, Database API: mysql), and uploaded images to a product last night. It worked FINE for the first product.

Then I tried uploading Additional Images to other products, and it did not work.

It appears that the Image Machine upload function is NOT creating the resized images. Aren't those resized (i.e., Main Image and Thumbnails) supposed to be created by the Image Machine Upload at the time that they are uploaded?

When I FTP into my /mm5/graphics/00000001 folder I see the full size Closeup image that I uploaded, but there are no re-sized images in that folder - just the original full sized image.

The permissions for that directory are 755. Do the permissions need to be something else?

Again, it seems strange because it worked the FIRST TIME I uploaded additional images, but did not work after that.

A few things that might have caused some problem:

1) After playing around with it a little bit, I decided to create an image type named "default." I did not assign any images to this type. But after I realized that it was not working any more, I then deleted that image type.

2) After I was successful at creating additional images for the first product, I deleted that product, and then FTP into my folder to delete the images for that product.

3) I have the Legacy Fallback Image: set to full size. Is that a problem?

4) I changed the image dimensions in the Product Display Layout Image Dimensions tab as follows:
- Main Image - Resize to fit within bounding box: 432X360
- Closeup: Enable click to closeup - Resize to fit within bounding box: 720X576
- Thumbnails: Enable additional thumbnails: 75X56

You can view a couple of products that I have tried to upload additional images at these links:

http://www.siamese-dream.com/test-image-machine.html

and

http://www.siamese-dream.com/testxyz.html

Thanks in advance.

[jstandifird]

Re: Image Machine Problem: Not Creating Resized Images:

Hello Mark,

The image machine doesn't create the additional images as soon as they are uploaded. It actually waits until a product is accessed via the storefront for the first time and then the image machine generates the thumbnails.

I found the ticket that was submitted earlier today and tried adding additional images to the test product you created. Then after accessing the product from the front page I checked the Image Management module in Utilities. When you click on one of the links for an image that needed resizing for thumb and zoom, like the mesh top brown image, you can see the list of resized images that were created in the process listed in the Master image pop up window.

I've been working on a little tutorial walk through of the different function of the Image Management Module. I'll post it here for you. Hope it helps to explain it more clearly:

The Image Management module under utilities allows you to view and maintain images that are generated by Additional Images added to your products. When a product has Additional Images added, thumbnails, main image and close up images are generated automatically the first time they are needed by the storefront. These image are not deleted automatically when a product is deleted, a new images is uploaded for a product or new sizes are defined for thumbnails or close-ups and so they can begin to build and take up substantial disk space over time. The Image Management module allows you to find unused images quickly and deleted them, to look for updated images and automatically generate new thumbnails for them, and to delete all resized images individually or en masse.

Check for Updated Images

Checks the time stamp of image files that have been uploaded, by FTP for instance, and updates the main image and resized images for those files. The old resized images are overwritten by this process.

Delete Unreferenced

To the far right of the Image Management screen there is a column labeled Reference Count. If the Reference Count for an image is 0, that means the images is not being used. If you click the Delete Unreferenced button all images with a reference count of zero will be deleted along with the resized versions of those images.

Delete Resized

When you select an image using the check boxes on the left of the Image Management screen the Delete Resized button becomes active. Any image you have selected will have all the resized images for that product deleted. Those images will be regenerated the next time a front end user accesses a page that would require that resized image to display.

Delete Selected

When you select an image using the check boxes on the left of the Image Management screen the Delete Selected button becomes active. Any image you have selected will be deleted along with all of it's resized images.

Image Popup window

All the additional images listed on the Image Management screen are clickable links. When you click them a pop up window appears. You can delete this image and all its resized images by click the Delete Master Image button. When you select a resized image using the check boxes on the left of the Image Management Popup window, the Delete Selected button becomes active. Any resized image you have selected will be deleted, but the Master image will be unaffected. Resized images will be regenerated the next time a front end user accesses a page that would require that resized image to display.

[Siamese-Dream.Com]

Re: Image Machine Problem: Not Creating Resized Images:

Thanks so much for the help and the advice.

The Image Machine really is a nice feature that can save us all a lot of work. I just hope that there is more awareness created about it.

[lesliekirk]

Re: Image Machine Problem: Not Creating Resized Images:

Thanks so much for the help and the advice.

The Image Machine really is a nice feature that can save us all a lot of work. I just hope that there is more awareness created about it.

I think the "retrofit" is what might be causing it lack of awareness - BUT - I think I'd get a little irritable if an update were to go in and replace the template code I might have in a store. Too bad that there isn't a way to just insert the required code during an update.

[Siamese-Dream.Com]

Re: Image Machine Problem: Not Creating Resized Images:

Too bad that there isn't a way to just insert the required code during an update.

Alas, so true...

But one thing is that it doesn't seem like most Merchant store owners even KNOW that you can have larger "popup" images (and that they can be automatically sized for the main image and the "thumbnail" size images.

I certainly didn't. I thought that only thing Image Machine would do is switch out the Main Image depending on the attribute selected.

[Rick Wilson]

Re: Image Machine Problem: Not Creating Resized Images:

We used to auto insert the code and we'd regularly break around 3% of our store owners sites, so we decided that's just too risky since real money is on the line.

We're always thinking of ways we can make it easier to update the code, but it's not a simple answer.

[Siamese-Dream.Com]

Re: Image Machine Problem: Not Creating Resized Images:

Agreed that automatically inserting the code during updates is a bad idea...

I was thinking more along the lines of Miva sponsoring a contest, something like, Best Implementation of Image Machine (or something like that - work with me here), just to get the word out about what image machine can do. Just so that more people KNOW about the new features. Then maybe the winner would share their implementation of the code.

anyway, that was more along the lines of what I was thinking - less technical, but more marketing oriented.

[Siamese-Dream.Com]

Re: Image Machine Problem: Not Creating Resized Images:

Well, unfortunately, I am still not able to CONSISTENTLY generate the resized images.

For instance, i created this page:

http://www.siamese-dream.com/mesh-poncho.html

Then I added 4 images in the Additional Images tab, then I accessed the page through the storefront, and no images appear.

Then I double check in the Utilities -> Image Management module, and when i click on the names of the images I uploaded for this product, in the popup window it doesn't list any resized images. It just lists the main image.

So for whatever reason, when I access that product page via the storefront, it is not creating resized images for me. It's as if I need someone ELSE to access that product's storefront page first to generate the images.

[Siamese-Dream.Com]

Re: Image Machine Problem: Not Creating Resized Images:

Am I missing something from my code? And do I need to activate the Utilities -> Product Image Custom Fields module as well to get the Image Machine to work correctly?

Here is my code in the product display layout tab. Maybe I am missing some code???

<mvt:if expr="(g.AffiliateData:code EQ 'news')">
<span class="affiliate-welcome"><b>Welcome Back Preferred Customers:</b> You will get an Automatic <b>10% Discount</b> off your merchandise, which will be applied during the Checkout Process.</span>
<hr height="1">
</mvt:if>
<h1>&mvt:product:name;</h1>

<mvt:comment>start toolkit productincategory here </mvt:comment>

<mvt:item name="toolkit" param="productincategory|incatcount|g.Product_Code " />
<mvt:if expr="incatcount GT 0">
<mvt:foreach iterator="incategory" array="incategories">
<mvt:if expr="pos1 EQ 1">
<mvt:item name="toolkit" param="breadcrumb|b_count|l.all_settings:incategor y:code" />
<mvt:if expr="b_count GT 0">
Back To: <a href="/">Home</a>
<mvt:foreach iterator="breadcrumb" array="breadcrumbs">
&nbsp;>&nbsp;
<mvt:if expr="g.Category_Code EQ l.settings:breadcrumb:code">
<b> <a href="/&mvte:breadcrumb:code;.html">
&mvt:breadcrumb:name;</a></b>

<mvt:else>
<a href="/&mvte:breadcrumb:code;.html">
&mvt:breadcrumb:name;</a>
</mvt:if>
</mvt:foreach>
</mvt:if>

<br >
</mvt:if>

</mvt:foreach>
</mvt:if>

<mvt:comment> end toolkit productincategory here </mvt:comment>
<div class="product-details-1">
<mvt:if expr="NOT ISNULL l.settings:product:image">
<div class="product-image">


<img id="main_image" src="graphics/en-US/cssui/blank.gif" alt="&mvte:product:name;" name="holder" />
<ul id="thumbnails" class="thumbnails"></ul>
<div id="closeup_div" class="closeup"><img id="closeup_image" src="graphics/en-US/cssui/blank.gif" alt="" /><div><a id="closeup_close">Click Photo to Close This Window</a></div></div>
<mvt:item name="product_display_imagemachine" param="body:product:id" />
<br />
&mvt:product:customfield_values:customfields:inclf ile;
<br />

<iframe src="https://www.facebook.com/plugins/like.php?href=siamese-dream.com/&mvt:product:code;.html&amp;layout=button_count&am p;show_faces=false&amp;width=75&amp;action=like&am p;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:75px; height:21px;" allowTransparency="true"></iframe>
</div>
<mvt:else>
<div class="image-not-available product-image"></div>
</mvt:if>
<mvt:comment>
<div class="product-code">Code: <span class="bold">&mvt:product:code;</span></div>
</mvt:comment>
<mvt:comment>
<mvt:if expr="l.settings:product:weight NE 0">
<div class="product-weight">Shipping Weight: <span class="bold">&mvt:product:weight;</span> &mvt:store:wtunits;</div>
</mvt:if>
</mvt:comment>

<mvt:comment> remove Inventory statement
<div id="inventory-message">
<mvt:if expr="l.settings:product:inv_active">
&mvt:product:inv_short;
</mvt:if>

</div>
</mvt:comment>
<mvt:comment>
<div class="product-quantity">Quantity in Basket:
<mvt:if expr="l.settings:product:quantity EQ 0">
<span class="italic">None</span>
<mvt:else>
<span class="bold">&mvt:product:quantity;</span>
</mvt:if>
</div>
</mvt:comment>
</div>
<div class="product-details-2">
<form method="post" action="&mvt:global:sessionurl;Screen=BASK">

<input type="hidden" name="Old_Screen" value="&mvte:global:Screen;" />
<input type="hidden" name="Old_Search" value="&mvte:global:Search;" />
<input type="hidden" name="Action" value="ADPR" />
<input type="hidden" name="Store_Code" value="&mvte:store:code;" />
<input type="hidden" name="Product_Code" value="&mvte:product:code;" />
<input type="hidden" name="Category_Code" value="&mvte:global:category_code;" />
<input type="hidden" name="Offset" value="&mvte:global:Offset;" />
<input type="hidden" name="AllOffset" value="&mvte:global:AllOffset;" />
<input type="hidden" name="CatListingOffset" value="&mvte:global:CatListingOffset;" />
<input type="hidden" name="RelatedOffset" value="&mvte:global:RelatedOffset;" />
<input type="hidden" name="SearchOffset" value="&mvte:global:SearchOffset;" />
<div class="product-price"><span id="price-value" class="bold">Price: &mvt:product:formatted_price;
<mvt:comment> Add volume Price Table</mvt:comment>
<mvt:item name="cim_vol" param="table" />

</span></div>
<div class="product-attributes"><mvt:item name="product_attributes" param="product:id" /></div>
<mvt:if expr="l.settings:product:inv_level NE 'out'">
<div class="purchase-buttons">Quantity: <input type="text" name="Quantity" value="1" class="product-quantity-input textfield" /> <mvt:item name="buttons" param="AddToBasket" /></div>
<mvt:else>
Out Of Stock:<br>
<mvt:item name="toolkit" param="render|WAITLIST" />
<br />
</mvt:if>
</form>
<mvt:comment>This is where description was</mvt:comment>
<mvt:item name="toolkit" param="render|RRPROD" />
</div>
<div class="clear"></div>
<div><br>&mvt:product:descrip;</div>

[skepticwebguy]

Re: Image Machine Problem: Not Creating Resized Images:

Do you have the "product_display_imagemachine" item added to your PROD page? Also, on the PROD page, there should be a tab called "Product Display Layout Image Machine." The "Enabled" checkbox in that tab should be checked. Also on the "Product Display Layout Image Machine" tab, there are several CSS wrappers. If you change your CSS you must also change those wrappers to match. Ensure that you added the new CSS based on the template changes (see User's Guide link below for further details). Also, under Global Settings > Upload Settings, ensure that you have listed ALL the image file types you're trying to upload (jpg, jpeg, png, gif).

Note: Never upload additional images by the same name as ones you have previously uploaded. It won't overwrite them. You must first go to Utlilities > Image Management and delete the images you want to re-upload.

Check that you made ALL the template changes to your PROD page and CSS file. For complete details, see "Appendix A: Template Changes for Additional Images and Swatches" starting on page 144 of Miva Merchant User's Guide PR8.

[Siamese-Dream.Com]

Re: Image Machine Problem: Not Creating Resized Images:

Thanks so much, Skepticwiseguy:

Do you have the "product_display_imagemachine" item added to your PROD page? Also, on the PROD page, there should be a tab called "Product Display Layout Image Machine." The "Enabled" checkbox in that tab should be checked. Also on the "Product Display Layout Image Machine" tab, there are several CSS wrappers. If you change your CSS you must also change those wrappers to match. Ensure that you added the new CSS based on the template changes (see User's Guide link below for further details). Also, under Global Settings > Upload Settings, ensure that you have listed ALL the image file types you're trying to upload (jpg, jpeg, png, gif).

It turns out that for some reason I need to add thumbnail and full size images to the Legacy image fields (that are now on the main Product tab).

If I don't have those filled out with image paths to real images, then it won't generate the resized images.

[Miss Kate]

Re: Image Machine Problem: Not Creating Resized Images:

I am at wits end at this point. I have spent all day trying to get swatches to work in my store. At one point today I deleted the item and started over again thinking maybe something was corrupted.

I have an item called Burp Cloths. I followed the instructions on the December PR8 final release and added the information changes as instructed. Actually there is a typo when replacing the code in the Product Attribute template. The very first code on page 216 of the User's Guide should read <table> but it reads table>

That wasn't hard to figure out when I was copying & pasting the code from the pdf file into the PROD page, Product Display Layout template and the Product Attribute template after reformatting the code in Microsoft Word. I also downloaded my cssui.css file from the website (so I knew I had the latest version) and opened it in Microsoft Expression Web 4 which I have done multiple times to make changes. I have gone over the replaced code line by line to make sure it was correct and also replaced it by another copy and paste at one point.

At one point today my regular-sized images generated swatches and I have them loaded as images in my attributes page. However, when I attempt to put the regular-sized images in Additional Images, I get a blank space for each of these and the clickable link Burp Cloths above the 'swatches'. In order to get the swatch item to show up I need to click the blank space and then click on the link Burp Cloths (which I have no idea why this is clickable). Also, according to the User's Guide, using the Swatch Drop-Down option type should coordinate the swatches the same as clicking on one of the drop-down options. It doesn't.

If I want the swatches to show up, I have to use an image of less than 300px wide. All of my regular-sized images are 300px which I have used since I built the website back in 2003. All of my thumbnails are 100px wide. All have varying heights but are in keeping with aspect ratio. I have tried a variety of combinations. I used the auto-generated resized images (which are much smaller than what I would consider thumbnail) and since they are going up in size, they aren't readable. If I used 200px wide images, the image was at least better seen but the image was less than optimal compared to the 300px wide image and I would not want customers to view the resized item with it being hazy.

Is there possibly something amiss with the December final release PR8 User's Guide coding? I even took a line of coding out for wishlist in the Product Display Layout from an Emporium Plus module so the code would be exactly what is printed on pages 208 & 209.

[skepticwebguy]

Re: Image Machine Problem: Not Creating Resized Images:

…I was copying & pasting the code from the pdf file into the PROD page, Product Display Layout template and the Product Attribute template after reformatting the code in Microsoft Word.

Did reformatting the code in Microsoft Word change all the straight quotes to curly quotes?

[Miss Kate]

Re: Image Machine Problem: Not Creating Resized Images:

I'm not sure. I didn't even think of that. I will have to look later today & get back on this. I didn't notice any difference at the time.

[skepticwebguy]

Re: Image Machine Problem: Not Creating Resized Images:

Check that you have added the appropriate image type in Global Settings > Domain Settings > Upload Settings > Image Extension Types. There, I have listed: gif,jpg,jpeg,png

I have JPEG image quality set to 70%. The default is 100% which generates unnecessarily large images.

If you are uploading additional images with the same names as have been previously uploaded, you need to use Utilities > Image Management > Check for Updated Images to replace the old with the new. Utilities > Image Management is a useful tool.

Check your PROD page on the tab "Product Display Layout Image Machine" and insure that the "Enabled" and "Preload Images" are checked and that the ID elements in your CSS file match the ID elements listed on that tab.

Check the "Product Display Layout Image Dimensions" tab on your PROD page and insure "Resize to fit within bounding box" is selected. In the width and height box beside it, I have set 300 (width) and 1000 (high). Since all my images very in height (but not width) I've set a ridiculously high height to ensure that the image aspect ratio of the auto-generated images is not squashed or stretched (i.e. none of my images would ever be 1000 px high, so this ensures they will never be squashed like they might be if I had set this to 400 px high and accidentally uploaded an image that was 420 px high.) The same thinking applies to the "Enable additional thumbnails" settings. I've set mine to 50 px wide and 300 px wide (knowing that all uploaded thumbs will never exceed 300 pc wide, so I know that auto-generated thumbs will never be reduced in height by these settings). Once these setting are set, you must also changed your CSS settings to match (otherwise your CSS will conflict).