Announcement

**lesliekirk** · 07-22-11, 06:41 AM

Re: Production Release 8 CSSUI Template Changes

For the PROD page:

Activate the prod_imagemachine Item

That should add two additional tabs to the screen

Product Display Layout Image Machine
Product Display Layout Image Dimensions

Then you should be able to click both of these tabs to configure the setting. Make sure you have added the

Code:

<mvt:item name="prod_imagemachine" param="head" />

tag in the Page template <head> tag area. Then add the CSSUI tweaks to the code.

**wcw** · 07-22-11, 06:51 AM

Re: Production Release 8 CSSUI Template Changes

Missed step 2. Duh! It seems like Monday when it is really a Friday. I've had two major distractions this week (you know about one of them) which set me back 5 days of getting the Template Data Feed (TDF) ready for the new Google requirements. Maybe next week will be better.

So I did the setting and my images look really bad. I've been using a small thumbnail (no full size) for the main image. The image machine is enlarging those small thumbs and they are blurred. Looks like I'll be doing a bunch of images after I get the TDF updated.

Getting the image machine working is a prerequisite to updating the TDF to show the correct image for each product (including each attribute variant).

**kayakbabe** · 08-04-11, 10:48 AM

Re: Production Release 8 CSSUI Template Changes

deleted, I Found my answer by searching.

**kayakbabe** · 08-04-11, 10:57 AM

Re: Production Release 8 CSSUI Template Changes

Please post the CTGY template changes for PR8, that include the image machine. I'm sure there is the ability to popup a larger image upon mouseover... or maybe show an alternate view on mouse over, or show mulitple small thumbnails... etc.

Specifically I want to have image machine create an image, if I have not uploaded a thumbnail image..

I think an if then statement will work like this:

I"m not sure my storemorph code for getting the the category image machine thumbnail is correct. Is it?

Code:

<mvt:if expr="ISNULL l.all_settings:product:thumbnail">
   <mvt:item name="Category_listing_imagemachine" param="body:thumbnails_product:id;">
<img id="thumbnail_&mvte:product:id;" src="graphics/en-US/cssui/blank.gif" alt="&mvte:product:name;" />
<mvt:else>
  <img src="&mvt:product:thumbnail;">
</mvt:if>

givens: we added the category image machine to the header
givens: we've uploaded a large image for the product.

**pbrynie** · 08-04-11, 03:05 PM

Re: Production Release 8 CSSUI Template Changes

This is the default generated template code for the Category Product List Layout component when it is in "Point + Click" mode and the Image Machine is enabled for the CTGY page (Note: it will generate different code if the Image Machine is not assigned to the page or if it is not enabled):

Code:

<div class="expanded">
	<mvt:foreach iterator="product" array="category_listing:products">
	<div class="product-item" style="width:50%">
		<div class="padding">
			<div class="product-details">
				<div class="product-image">
					<img id="main_image_&mvte:product:id;" src="graphics/en-US/cssui/blank.gif" alt="&mvte:product:name;" />
				</div>
				<ul id="thumbnails_&mvte:product:id;" class="thumbnails"></ul>
				<div id="closeup_div_&mvte:product:id;" class="closeup"><img id="closeup_image_&mvte:product:id;" src="graphics/en-US/cssui/blank.gif" alt="&mvte:product:name;"><div><a id="closeup_close_&mvte:product:id;">close</a></div></div>
				<mvt:item name="category_listing_imagemachine" param="body:product:id" />
				<div class="clear product-image-margin"></div>
				<div class="product-name"><a href="&mvte:product:link;">&mvt:product:name;</a></div>
				<div class="product-code">Code: <span class="bold">&mvt:product:code;</span></div>
				<div class="product-price">Price: <span class="bold">&mvt:product:formatted_price;</span></div>
				<mvt:if expr="l.settings:product:inv_active">
				&mvt:product:inv_long;<br />
				</mvt:if>
				<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="italic">&mvt:product:quantity;</span>
					</mvt:if>
				</div>
			</div>
			<mvt:if expr="l.settings:product:inv_level NE 'out'">
			<div class="purchase-buttons">
				<form method="post" action="&mvte: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="Quantity" value="1" />
				<input type="hidden" name="Attributes" value="Yes" />
				<input type="hidden" name="Store_Code" value="&mvte:store:code;" />
				<input type="hidden" name="Product_Code" value="&mvte:product:code;" />
				<input type="hidden" name="Current_Product_Code" value="&mvte:global:Product_Code;" />
				<input type="hidden" name="Category_Code" value="&mvte:global:Category_Code;" />
				<input type="hidden" name="Offset" value="&mvte:global:CatListingOffset;" />
				<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;" />
				<mvt:item name="buttons" param="AddToBasketE" />
				</form>
				<form method="post" action="&mvte:global:secure_sessionurl;Screen=OINF">
				<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="Quantity" value="1" />
				<input type="hidden" name="Attributes" value="Yes" />
				<input type="hidden" name="Store_Code" value="&mvte:store:code;" />
				<input type="hidden" name="Product_Code" value="&mvte:product:code;" />
				<input type="hidden" name="Current_Product_Code" value="&mvte:global:Product_Code;" />
				<input type="hidden" name="Category_Code" value="&mvte:global:Category_Code;" />
				<input type="hidden" name="Offset" value="&mvte:global:CatListingOffset;" />
				<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;" />
				<mvt:item name="buttons" param="BuyNowE" />
				</form>
			</div>
			</mvt:if>
		</div>
	</div>
	</mvt:foreach>
	<div class="clear"></div>
	<mvt:if expr="g.CatListingOffset OR g.CatListingNextOffset">
	<div class="next-previous">
		<mvt:if expr="g.CatListingOffset GT 0">
		<div class="previous-button">
			<form method="post" action="&mvte:global:sessionurl;">
			<input type="hidden" name="Screen" value="&mvte:global:Screen;" />
			<input type="hidden" name="Store_Code" value="&mvte:global:Store_Code;" />
			<input type="hidden" name="Category_Code" value="&mvte:global:Category_Code;" />
			<input type="hidden" name="Product_Code" value="&mvte:global:Product_Code;" />
			<input type="hidden" name="Search" value="&mvte:global:Search;" />
			<input type="hidden" name="Offset" value = "&mvte:global:CatListingPrevOffset;" />
			<input type="hidden" name="AllOffset" value = "&mvte:global:AllOffset;" />
			<input type="hidden" name="CatListingOffset" value = "&mvte:global:CatListingPrevOffset;" />
			<input type="hidden" name="RelatedOffset" value = "&mvte:global:RelatedOffset;" />
			<input type="hidden" name="SearchOffset" value = "&mvte:global:SearchOffset;" />
			<mvt:item name="buttons" param="Previous" />
			</form>
		</div>
		</mvt:if>
		<mvt:if expr="g.CatListingNextOffset GT 0">
		<div class="next-button">
			<form method="post" action="&mvte:global:sessionurl;">
			<input type="hidden" name="Screen" value="&mvte:global:Screen;" />
			<input type="hidden" name="Store_Code" value="&mvte:global:Store_Code;" />
			<input type="hidden" name="Category_Code" value="&mvte:global:Category_Code;" />
			<input type="hidden" name="Product_Code" value="&mvte:global:Product_Code;" />
			<input type="hidden" name="Search" value="&mvte:global:Search;" />
			<input type="hidden" name="Offset" value = "&mvte:global:CatListingNextOffset;" />
			<input type="hidden" name="AllOffset" value = "&mvte:global:AllOffset;" />
			<input type="hidden" name="CatListingOffset" value = "&mvte:global:CatListingNextOffset;" />
			<input type="hidden" name="RelatedOffset" value = "&mvte:global:RelatedOffset;" />
			<input type="hidden" name="SearchOffset" value = "&mvte:global:SearchOffset;" />
			<mvt:item name="buttons" param="Next" />
			</form>
		</div>
		</mvt:if>
	</div>
	</mvt:if>
</div>

Regards,

**kayakbabe** · 08-07-11, 01:14 AM

Re: Production Release 8 CSSUI Template Changes

In video #10 at 1:30
http://vimeo.com/mivamerchant/videos
Rick made a comment that I've not seen mentioned in the forums. It really made what is happening with image machine versus the old way of miva handling image much more clear to me. The comment was "As soon as we add an image, that will be come the new default image".

Basically the first additional image list will be the default image of your product and replace the old image (Rick calls it the legacy image). WOW! definitions! Yippee! I think I got it now! I didn't go to the conference this year, and I've been seeing mentions of legacy image etc. but it's not labelled anywhere and I"m sure a lot of you conference missers and new to miva coders... probably have the same issues as me figuring this out.

Anyway Rick's comment was my epiphany just thought I'd share that in case others are having problems with figuring out image machine.

I also took away the thought that image machine can replace the old way of miva doing product images completely.

If you only use the image machine additional image tab for your product, the "first one in the list will be the default image of your product". Also image machine will generate thumbnails of your product. DUH!!! This little tidbit made things clear. I was immersed in the old miva image and thumbnail way of doing things. So all my questions on how to create a thumbnail on the fly are pretty much moot. (All I gotta do it make sure my templates use the image machine for CTGY, PLST, and all the other places where I'll need it).

**kayakbabe** · 08-07-11, 04:59 AM

Re: Production Release 8 CSSUI Template Changes

Please post the CSSUI SRCH search screen template changes that include image machine. (Actually it would be really nice if you'd update the LSK for all the templates, I looked and no image machine stuff is in there jul 27 2011 dated lsk.)

**lesliekirk** · 08-07-11, 09:38 AM

Re: Production Release 8 CSSUI Template Changes

Originally posted by kayakbabe View Post

Please post the CSSUI SRCH search screen template changes that include image machine. (Actually it would be really nice if you'd update the LSK for all the templates, I looked and no image machine stuff is in there jul 27 2011 dated lsk.)

Yeah - that and the tweaks for MMUI - it's been requested ;)

**pbrynie** · 08-08-11, 08:48 AM

Re: Production Release 8 CSSUI Template Changes

The Image Machine is responsible for generating the additional thumbnails and closeup views for a product. It is not necessary to assign the Image Machine to CTGY, SRCH, or PLST to display an image that has been added to a product's Additional Images tab. As long as an additional image has been assigned an image type, you can access it through the Category Product List Layout, Product List Layout, and Search Results Layout components.

Steps to display a product's additional image without using the Image Machine:

1) Create an image type
2) Add an additional image to a product and assign it the image type you just created
3) Edit CTGY and on the Category Product List Layout tab, set the Image field to the image type

Regards,

**lesliekirk** · 08-08-11, 08:52 AM

Re: Production Release 8 CSSUI Template Changes

How do you prevent an Image Type from assigning itself to the PROD when you do a flat file import?

Leslie

**pbrynie** · 08-08-11, 09:11 AM

Re: Production Release 8 CSSUI Template Changes

Originally posted by lesliekirk View Post

How do you prevent an Image Type from assigning itself to the PROD when you do a flat file import?

Leslie

If I'm understanding your question, when you import a product data flat file, the additional images' column names are the image type codes. This means that in order to add an additional image to a product via flat file it must be assigned to an image type.

Regards,

**lesliekirk** · 08-08-11, 11:16 AM

Re: Production Release 8 CSSUI Template Changes

Okay - here's my "for example" (and it's probably not how I should have done it) - I wanted to have a specific image (smaller thumbnail) assigned to the BASK screen layout, so I created the Image Type: Basket Thumbnail - and populated my import file accordingly. When I did the import the Image Type: Basket Thumbnail was assigned to the Product and displayed on the PROD screen. Not the results I was hoping for.

Leslie

**pbrynie** · 08-08-11, 12:46 PM

Re: Production Release 8 CSSUI Template Changes

Originally posted by lesliekirk View Post

Okay - here's my "for example" (and it's probably not how I should have done it) - I wanted to have a specific image (smaller thumbnail) assigned to the BASK screen layout, so I created the Image Type: Basket Thumbnail - and populated my import file accordingly. When I did the import the Image Type: Basket Thumbnail was assigned to the Product and displayed on the PROD screen. Not the results I was hoping for.

Leslie

Keep in mind that the image you want shown in the basket doesn't need to be a separate smaller image than your main product images. The Basket Contents component will re-size any additional product image you choose to a thumbnail.

So the question in this case is: do you not want your "Basket Thumbnail" image to be displayed on PROD because it is a thumbnail size image, or is it just a full-sized image that you don't want displayed anywhere other than the basket?

If you don't want it on PROD because it's a thumbnail size image, and would be a tiny duplicate of another full-sized image, then all you need to do is assign that "Basket_Thumbnail" image type to the full-sized version and then install the Product Image Custom Fields module under Utilities. Then edit BASK and check the "Basket_Thumbnail" image type. That image will then be available to you using:

Code:

&mvt:item:imagetypes:Basket_Thumbnail;

You can then edit BASK and use the Basket Contents Image Dimensions tab to set the size of the image. There is no need to have a full-sized and thumbnail sized version of the same image.

In the case of you just not wanting this particular image to be displayed on PROD, there is another post that talks about how to suppress images on PROD by their image type a few posts back in this thread.

Regards,

**GDesigns** · 08-08-11, 01:50 PM

Re: Production Release 8 CSSUI Template Changes

am I the only one that is getting a headache, here?

**Mark Hood** · 08-09-11, 05:44 AM

Re: Production Release 8 CSSUI Template Changes

Originally posted by GDesigns View Post

am I the only one that is getting a headache, here?

Nope

Announcement

Production Release 8 CSSUI Template Changes

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment