Announcement

Collapse
No announcement yet.

Adding the Image Machine to the CSS

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

    Adding the Image Machine to the CSS

    In the doc, Demystifying the Image Machine, Step 5 is to modify the CSS to add:

    .thumbnails { display:block; margin:0; padding:0; width:274px; }
    .thumbnails li { display:block; float:left; margin:4px 4px 0 0; padding:0; width:42px; height:42px; text-align:center; border:1px solid #eee; cursor:pointer; }.thumbnails li span { display:inline-block; height:100%; text-align:center; vertical-align:middle; }.thumbnails li img { vertical-align:middle; }.swatches { display:inline; margin:0; padding:0; }.swatches li { display:block; float:left; margin:4px 4px 0 0; padding:0; width:50px; height:50px; text-align:center; border:1px solid #eee; cursor:pointer; }.swatches li span { display:inline-block; height:100%; text-align:center; vertical-align:middle; }.swatches li img { vertical-align:middle; }.product-image-margin { height:8px; }.closeup { position:absolute; top:75px; padding:10px 10px 5px; background-color:#fff; border:1px solid #333; text-align:center; display:none; z-index:2; min-width:274px; min-height:274px; }.closeup a { cursor:pointer; margin-top:5px; z-index:2; } .closeup_backing { display:none; position:absolute; left:0px; top:0px; background-color:#333; opacity:0.75; filter:alpha(opacity=75); width:100%; }
    I have done that in my css that is in mm5/css/00000001. It is named cssui.css. However, when I go to the PROD, Product Display Layout Image Machine I do not see it in the head template. Not sure of what I am doing wrong.

    My Head Template reads:

    Code:
    <script>
    ImageMachine.prototype.ImageMachine_Generate_Thumbnail = function( thumbnail_image, main_image, closeup_image, type_code )
    {
        var thumbnail    = document.createElement( 'li' );
        var span    = document.createElement( 'span' ); // to vertically center the thumbnail images
        var img        = document.createElement( 'img' );
        img.src        = thumbnail_image;
    
    
        thumbnail.appendChild( span );
        thumbnail.appendChild( img );
    
    
        return thumbnail;
    }
    </script>
    On step 6, the instructions should read:

    Go back to your
    PROD page, and click on the Product Display Layout page, click on Advanced Mode, then browse down in the html to find where your main image is being displayed.
    In any case, I am not seeing the expected results. I am wondering if that is because I imported my product info from a 4.x store using the importer tools.
    ---------------------------------
    Robin McDermott, CQE
    Director of Training
    QualityTrainingPortal.com

    #2
    Re: Adding the Image Machine to the CSS

    Your product data won't affect the storemorph templates directly. But there won't be any additional images in that data coming from that old store. So, if you do not have any image machine images assigned, you also won't see anything on the product screen. You will need to go add some additional images.

    Also since you altered the css file itself and i'm sure you reuploaded it to your webserver, it might be that your browser cache isn't clearing. YOu can fix this two ways. 1) go view the css file on your server and do a force refresh on your browser or 2) clear your browser cache (while not having a browser window on your website).

    As for it not showing on your PROD page admin... The css file is usually loaded into one of the global parts of the templates. In a default store it is usually in the HEAD Tag Content/CSS* that itself is pulled into your page templates with <mvt:item name="head" param="css_list" />
    If your PROD page template is missing <mvt:item name="head" param="css_list" />
    then you probably need to make sure you have it because someone probably deleted it. It is there by default in a new store.

    The globals are really cool, because it makes it easy to alter all the templates at once globally with one change to a global template that is sucked into all separate page templates. if you were to change the name of your css file for instance... you wouldn't have to edit every single template in the admin, you would only have to change it once in the global template.


    You do need to make sure all the required edits are done to your template in order for image machine to work.
    If it is an out of the box new install of the new version, then it's already there.

    Comment

    Working...
    X