Announcement

Collapse
No announcement yet.

Image Machine and Using Toolkit Functions to display an Image type

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Image Machine and Using Toolkit Functions to display an Image type

    Hey Guys! I have a questions about getting images to display from an "image type" as thumbnail on special created template/page.

    Let me explain the setup . . .

    I created a page template that is being used to display 30 new current products added to the store. I'm using a toolkit function to make this happen. The toolkit function I am using is the "last" function (#42). Here's an example of the current code I'm using.

    Code:
                    <mvt:item name="toolkit" param="last|pcount|30" />
                        <mvt:if expr="pcount GT 0">
                            <mvt:foreach iterator="newproduct" array="new">
                            
                            
                                <div class="product-item" style="width:25%">
                                    <div class="padding">
                                        <div class="product-details">
                                            <div class="product-thumbnail">
                                            <mvt:if expr="NOT ISNULL l.settings:newproduct:thumbnails">
                                            
                                                <a href="&mvt:global:sessionurl;Screen=PROD&Product_Code=&mvta:newproduct:code;&Store_Code=&mvta:store:code;">
                                                    <img src="&mvt:newproduct:thumbnails;"/>
                                            <mvt:else>
                                                <a class="thumbnail-not-available" href="&mvt:global:sessionurl;Screen=PROD&Product_Code=&mvta:newproduct:code;&Store_Code=&mvta:store:code;" title="&mvte:newproduct:name;">
                                            </mvt:if>
                                                </a>
                                            </div>    
                    <div class="product-name"><a href="&mvt:global:sessionurl;Screen=PROD&Product_Code=&mvta:newproduct:code;&Store_Code=&mvta:store:code;">&mvt:newproduct:name;</a></div>
                    <div class="product-price">Price: <span class="bold">&mvt:newproduct:formatted_price;</span></div>
    The image type or default type name I would like to use for the thumbnails is "main_front_1". I'm not sure of how to get the thumbnails to display in the above code, I've tried the following to no avail :(

    Code:
                                            <mvt:if expr="NOT ISNULL l.settings:newproduct:imagetype:main_front_1">
                                                    
                                            <img src="&mvt:newproduct:imagetype:main_front_1;"/>
    I would like to do the same thing for my best sellers or top sellers page. the setup on this page is the same as the above but uses the "bestseller_recent" #149 toolkit function. Here's the code you'll find that it is similar to the above.

    Code:
                    <mvt:item name="toolkit" param="bestseller|pcount|ALL|8" />
                        <mvt:if expr="pcount GT 0">
                        <mvt:foreach iterator="bestsell" array="bestseller">
                            <div class="product-item" style="width:25%">
                                <div class="padding">
                                    <div class="product-details">
                                    
                                        <div class="product-thumbnail">
                        <mvt:if expr="NOT ISNULL l.settings:bestsell:thumbnail">
                            <a href="&mvt:global:sessionurl;Screen=PROD&Product_Code=&mvta:bestsell:code;&Store_Code=&mvta:store:code;">
                            <img src="&mvte:bestsell:thumbnail;" alt="&mvte:bestsell:name;" />
                        <mvt:else>
                            <a class="thumbnail-not-available" href="&mvt:global:sessionurl;Screen=PROD&Product_Code=&mvta:bestsell:code;&Store_Code=&mvta:store:code;" title="&mvte:bestsell:name;">
                        </mvt:if>
                            </a>
                                        </div>
                                        
                                        <div class="product-name">
                                        <a href="&mvt:global:sessionurl;Screen=PROD&Product_Code=&mvta:bestsell:code;&Store_Code=&mvta:store:code;">&mvte:bestsell:name;</a>
                                        </div>
                                        <div class="product-price">
                                            Price: <span class="bold">&mvte:bestsell:formatted_price;</span>
                                        </div>
    If I could also get the code to make image machine work on this page would be great as well. Thanks for reading and all of your help in advance.

    - ThePen

    #2
    Re: Image Machine and Using Toolkit Functions to display an Image type

    Installing image machine here should be possible. Doing it in the bestseller array will be slightly trickier because that array doesn't make a product's id available, but we can remedy that with vproduct_find. I've yet to test this setup but I don't see why it wouldn't work.

    You can use the ctgy, srch, or plst imagemachine item (they're all essentially the same). I'll use ctgy_imagemachine here but you can interchange them if you have need to. I'll also be using the item name for a CSSUI store but you can interchange the MMUI one with the same code otherwise if you're on MMUI.

    This goes in the page's head:

    Code:
    <mvt:item name="category_listing_imagemachine" param="head" />
    This goes at the top of your bestseller foreach loop:

    Code:
    <mvt:item name="toolkit" param="vproduct_find|productfound|l.all_settings:bestsell:code" />
    This goes where you'd like the resized image to appear:

    Code:
    <img id="main_image_&mvte:key_product:id;" src="graphics/en-US/cssui/blank.gif" alt="&mvte:bestsell:name;" />
    <mvt:item name="category_listing_imagemachine" param="body:key_product:id" />
    Update everything and open the Category Product List Image Machine tab (or equivalent) and enter this for the Image Element field:

    Code:
    main_image_%product_id%
    Click the Enabled checkbox, make sure your changes saved and check the front end. Assuming it works, you can then modify your dimensions in the Category Product List Image Dimensions tab.
    Kyle Newbrough
    Technical Support / Web Developer
    Miva Merchant

    Comment


      #3
      Re: Image Machine and Using Toolkit Functions to display an Image type

      Hey Kyle,

      Thanks for responding! I'm still having trouble getting it to work here's the code I'm using below, I've assigned and enabled on the Category Product List Image tab as well:

      Code:
      <mvt:item name="html_profile" />
      <head>
          <title>&mvt:store:name;: Top Merch</title>
          <base href="&mvt:global:basehref;" />
          <mvt:item name="head" param="css_list" />
          <mvt:item name="head" param="head_tag" />
          <mvt:item name="category_listing_imagemachine" param="head" />
      </head>
      
      <body class="BEST">
      <div id="site-container">
          <div id="topBar"><mvt:item name="navbar" /></div>
          <header><mvt:item name="hdft" param="global_header" /></header>
          <div id="breadcrumbs"><mvt:item name="breadcrumbs" /></div>
          <div id="content-container">
                  <aside><mvt:item name="category_tree" /></aside>
                  <div id="main-content">
                      <div id="page-header"><mvt:item name="hdft" param="header" /></div>
                      
                      <mvt:item name="toolkit" param="bestseller|pcount|ALL|8" />
                      <mvt:item name="toolkit" param="vproduct_find|productfound|l.all_settings:bestsell:code" />
                          <mvt:if expr="pcount GT 0">
                          <mvt:foreach iterator="bestsell" array="bestseller">
                              <div class="product-item" style="width:25%">
                                  <div class="padding">
                                      <div class="product-details">
                                      
                                          <div class="product-thumbnail">
                          <mvt:if expr="NOT ISNULL l.settings:bestsell:thumbnail">
                              <a href="&mvt:global:sessionurl;Screen=PROD&Product_Code=&mvta:bestsell:code;&Store_Code=&mvta:store:code;">
                              <img src="&mvte:bestsell:thumbnail;" alt="&mvte:bestsell:name;" />
                              <img id="main_image_&mvte:key_product:id;" src="graphics/en-US/cssui/blank.gif" alt="&mvte:bestsell:name;" />
      <mvt:item name="category_listing_imagemachine" param="body:key_product:id" />
                          <mvt:else>
                              <a class="thumbnail-not-available" href="&mvt:global:sessionurl;Screen=PROD&Product_Code=&mvta:bestsell:code;&Store_Code=&mvta:store:code;" title="&mvte:bestsell:name;">
                          </mvt:if>
                              </a>
                                          </div>
                                          
                                          <div class="product-name">
                                          <a href="&mvt:global:sessionurl;Screen=PROD&Product_Code=&mvta:bestsell:code;&Store_Code=&mvta:store:code;">&mvte:bestsell:name;</a>
                                          </div>
                                          <div class="product-price">
                                              Price: <span class="bold">&mvte:bestsell:formatted_price;</span>
                                          </div>
                                        </div>
                                  </div>
                              </div>  
                                          
                      </mvt:foreach>
                     </mvt:if>
      
                      <div id="page-footer"><mvt:item name="hdft" param="footer" /></div>
                  </div>
          </div>
          <div id="bottom-wrap"></div>
          <mvt:item name="hdft" param="global_footer" />
      </div>
      </body>
      </html>
      I'm not sure what I'm doing wrong here, I also tried the same thing on my "new stuff" page (it's suppose to display newly added products) this page isn't displaying images from image machine. Any guidance you can provide would be helpful. Thanks so much.
      Last edited by ThePen; 04-08-14, 03:16 PM.

      Comment


        #4
        Re: Image Machine and Using Toolkit Functions to display an Image type

        If you are not trying to display the swatches on the listing, simply use the tool kit function customimagec which is used when you only know the product code. You would not need to use vproduct_find.
        Bill Weiland - Emporium Plus http://www.emporiumplus.com/store.mvc
        Online Documentation http://www.emporiumplus.com/tk3/v3/doc.htm
        Question http://www.emporiumplus.com/mivamodu...vc?Screen=SPTS
        Facebook http://www.facebook.com/EmporiumPlus
        Twitter http://twitter.com/emporiumplus

        Comment


          #5
          Re: Image Machine and Using Toolkit Functions to display an Image type

          Originally posted by ThePen View Post
          Hey Kyle,

          Thanks for responding! I'm still having trouble getting it to work here's the code I'm using below, I've assigned and enabled on the Category Product List Image tab as well:

          Code:
          <mvt:item name="html_profile" />
          <head>
              <title>&mvt:store:name;: Top Merch</title>
              <base href="&mvt:global:basehref;" />
              <mvt:item name="head" param="css_list" />
              <mvt:item name="head" param="head_tag" />
              <mvt:item name="category_listing_imagemachine" param="head" />
          </head>
          
          <body class="BEST">
          <div id="site-container">
              <div id="topBar"><mvt:item name="navbar" /></div>
              <header><mvt:item name="hdft" param="global_header" /></header>
              <div id="breadcrumbs"><mvt:item name="breadcrumbs" /></div>
              <div id="content-container">
                      <aside><mvt:item name="category_tree" /></aside>
                      <div id="main-content">
                          <div id="page-header"><mvt:item name="hdft" param="header" /></div>
                          
                          <mvt:item name="toolkit" param="bestseller|pcount|ALL|8" />
                          <mvt:item name="toolkit" param="vproduct_find|productfound|l.all_settings:bestsell:code" />
                              <mvt:if expr="pcount GT 0">
                              <mvt:foreach iterator="bestsell" array="bestseller">
                                  <div class="product-item" style="width:25%">
                                      <div class="padding">
                                          <div class="product-details">
                                          
                                              <div class="product-thumbnail">
                              <mvt:if expr="NOT ISNULL l.settings:bestsell:thumbnail">
                                  <a href="&mvt:global:sessionurl;Screen=PROD&Product_Code=&mvta:bestsell:code;&Store_Code=&mvta:store:code;">
                                  <img src="&mvte:bestsell:thumbnail;" alt="&mvte:bestsell:name;" />
                                  <img id="main_image_&mvte:key_product:id;" src="graphics/en-US/cssui/blank.gif" alt="&mvte:bestsell:name;" />
          <mvt:item name="category_listing_imagemachine" param="body:key_product:id" />
                              <mvt:else>
                                  <a class="thumbnail-not-available" href="&mvt:global:sessionurl;Screen=PROD&Product_Code=&mvta:bestsell:code;&Store_Code=&mvta:store:code;" title="&mvte:bestsell:name;">
                              </mvt:if>
                                  </a>
                                              </div>
                                              
                                              <div class="product-name">
                                              <a href="&mvt:global:sessionurl;Screen=PROD&Product_Code=&mvta:bestsell:code;&Store_Code=&mvta:store:code;">&mvte:bestsell:name;</a>
                                              </div>
                                              <div class="product-price">
                                                  Price: <span class="bold">&mvte:bestsell:formatted_price;</span>
                                              </div>
                                            </div>
                                      </div>
                                  </div>  
                                              
                          </mvt:foreach>
                         </mvt:if>
          
                          <div id="page-footer"><mvt:item name="hdft" param="footer" /></div>
                      </div>
              </div>
              <div id="bottom-wrap"></div>
              <mvt:item name="hdft" param="global_footer" />
          </div>
          </body>
          </html>
          I'm not sure what I'm doing wrong here, I also tried the same thing on my "new stuff" page (it's suppose to display newly added products) this page isn't displaying images from image machine. Any guidance you can provide would be helpful. Thanks so much.
          If I'm reading that correctly you have that image display inside a check for the legacy thumbnail which you need to fix.
          <mvt:if expr="NOT ISNULL l.settings:bestsell:thumbnail">
          Mark Hood
          Vermont Gear

          Comment


            #6
            Re: Image Machine and Using Toolkit Functions to display an Image type

            So are you saying I need to remove that if statement?

            Comment


              #7
              Re: Image Machine and Using Toolkit Functions to display an Image type

              I'm not sure how to use it . . . is it possible you can give me a code example of this?

              Comment


                #8
                Re: Image Machine and Using Toolkit Functions to display an Image type

                Originally posted by ThePen View Post
                I'm not sure how to use it . . . is it possible you can give me a code example of this?
                Try this instead and see what you get.
                Code:
                <mvt:item name="html_profile" /><head>
                    <title>&mvt:store:name;: Top Merch</title>
                    <base href="&mvt:global:basehref;" />
                    <mvt:item name="head" param="css_list" />
                    <mvt:item name="head" param="head_tag" />
                    <mvt:item name="category_listing_imagemachine" param="head" />
                </head>
                
                
                <body class="BEST">
                <div id="site-container">
                    <div id="topBar"><mvt:item name="navbar" /></div>
                    <header><mvt:item name="hdft" param="global_header" /></header>
                    <div id="breadcrumbs"><mvt:item name="breadcrumbs" /></div>
                    <div id="content-container">
                            <aside><mvt:item name="category_tree" /></aside>
                            <div id="main-content">
                                <div id="page-header"><mvt:item name="hdft" param="header" /></div>
                                
                                <mvt:item name="toolkit" param="bestseller|pcount|ALL|8" />
                                <mvt:item name="toolkit" param="vproduct_find|productfound|l.all_settings:bestsell:code" />
                                    <mvt:if expr="pcount GT 0">
                                    <mvt:foreach iterator="bestsell" array="bestseller">
                                        <div class="product-item" style="width:25%">
                                            <div class="padding">
                                                <div class="product-details">
                                                
                                        <div class="product-thumbnail">
                                    <a href="&mvt:global:sessionurl;Screen=PROD&Product_Code=&mvta:bestsell:code;&Store_Code=&mvta:store:code;">
                                    <img id="main_image_&mvte:key_product:id;" src="graphics/en-US/cssui/blank.gif" alt="&mvte:bestsell:name;" /></a>
                <mvt:item name="category_listing_imagemachine" param="body:key_product:id" />
                                     </div>
                                                    
                                                    <div class="product-name">
                                                    <a href="&mvt:global:sessionurl;Screen=PROD&Product_Code=&mvta:bestsell:code;&Store_Code=&mvta:store:code;">&mvte:bestsell:name;</a>
                                                    </div>
                                                    <div class="product-price">
                                                        Price: <span class="bold">&mvte:bestsell:formatted_price;</span>
                                                    </div>
                                                  </div>
                                            </div>
                                        </div>  
                                                    
                                </mvt:foreach>
                               </mvt:if>
                
                
                                <div id="page-footer"><mvt:item name="hdft" param="footer" /></div>
                            </div>
                    </div>
                    <div id="bottom-wrap"></div>
                    <mvt:item name="hdft" param="global_footer" />
                </div>
                </body>
                </html>
                Mark Hood
                Vermont Gear

                Comment


                  #9
                  Re: Image Machine and Using Toolkit Functions to display an Image type

                  If that does not work, see the usage below. This tests for a generated image with one or both sides equal to 150 pixels. Change that number if you are using a different size generated image.

                  <mvt:item name="toolkit" param="customimage|ipath|l.all_settings:key_produc t:id||150|150|" />
                  <mvt:if expr="g.ipath AND (NOT ISNULL l.settings:toolkitadditionalimages[1]:generated:image)">
                  &mvt:key_product:name; <br>
                  <img src="&mvte:toolkitadditionalimages[1]:generated:image;" border="0">
                  </mvt:if>

                  You can eliminate the need for vproduct_find by using the customimagec function. You would use l.all_settings:bestsell:code for the variable.
                  Bill Weiland - Emporium Plus http://www.emporiumplus.com/store.mvc
                  Online Documentation http://www.emporiumplus.com/tk3/v3/doc.htm
                  Question http://www.emporiumplus.com/mivamodu...vc?Screen=SPTS
                  Facebook http://www.facebook.com/EmporiumPlus
                  Twitter http://twitter.com/emporiumplus

                  Comment


                    #10
                    Re: Image Machine and Using Toolkit Functions to display an Image type

                    Are you saying to replace the below bold part:

                    <mvt:item name="toolkit" param="customimage|ipath|l.all_settings:key_produc t:id||150|150|" />

                    with this instead?

                    <mvt:item name="toolkit" param="customimage|ipath|l.all_settings:bestsell:code||150|150|" />

                    Is this correct?

                    Thanks : )

                    Comment


                      #11
                      Re: Image Machine and Using Toolkit Functions to display an Image type

                      Hey Mark,

                      I copied and pasted the code in and still no images appeared . . . am I possibly missing something? Please let me know. Thanks : )

                      Comment


                        #12
                        Re: Image Machine and Using Toolkit Functions to display an Image type

                        As above, when using the "code" variable the function is customimagec
                        Bill Weiland - Emporium Plus http://www.emporiumplus.com/store.mvc
                        Online Documentation http://www.emporiumplus.com/tk3/v3/doc.htm
                        Question http://www.emporiumplus.com/mivamodu...vc?Screen=SPTS
                        Facebook http://www.facebook.com/EmporiumPlus
                        Twitter http://twitter.com/emporiumplus

                        Comment


                          #13
                          Re: Image Machine and Using Toolkit Functions to display an Image type

                          I'm sure Bill's code is the better way to go but I would question if your toolkit version is up to date and maybe that has something to do with it?

                          Also make sure you didn't end up with an accidental space in his code when you copied it. The forum added at least one from what I can see.
                          Last edited by Mark Hood; 04-22-14, 09:59 AM.
                          Mark Hood
                          Vermont Gear

                          Comment


                            #14
                            Re: Image Machine and Using Toolkit Functions to display an Image type

                            This isn't working for me at all and I'm not sure why? . . . I don't know if it makes a difference but I'm using the "last" function in toolkit #34, along with customimagec

                            So, how would I display the images using this below?
                            Code:
                            <mvt:item name="toolkit" param="last|pcount|10" />
                            <mvt:if expr="pcount GT 0">
                             <table border="0" width="200">
                            <th>What's New</th>
                            <tr><td align="center">
                            <font size="-1">
                            <mvt:foreach iterator="newproduct" array="new">
                            <a  href="&mvt:global:sessionurl;Screen=PROD&Product_Code=&mvta:newproduct:code;&Store_Code=&mvta:store:code;">
                             &mvt:newproduct:name;</a>
                             <br>
                            &mvt:newproduct:formatted_price; <br><br>
                            </mvt:foreach>
                            </font>
                            </td></tr>
                            </table>
                             </mvt:if>

                            With this code below

                            Code:
                             <mvt:item name="toolkit" param="customimagec|big|g.product_code||300|300|1" />
                            
                            <mvt:if expr="NOT ISNULL l.settings:image:generated:image">
                            <img src="&mvt:global:imageroot;&mvte:image:generated:image;">
                            <mvt:else>
                            <img src="&mvt:global:imageroot;&mvte:image:image:image;">
                            </mvt:if>

                            Comment


                              #15
                              Re: Image Machine and Using Toolkit Functions to display an Image type

                              the variable is l.all_settings:newproduct:code in your array
                              Bill Weiland - Emporium Plus http://www.emporiumplus.com/store.mvc
                              Online Documentation http://www.emporiumplus.com/tk3/v3/doc.htm
                              Question http://www.emporiumplus.com/mivamodu...vc?Screen=SPTS
                              Facebook http://www.facebook.com/EmporiumPlus
                              Twitter http://twitter.com/emporiumplus

                              Comment

                              Working...
                              X