Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Craig100 1136 posts 2522 karma points c-trib
    Feb 27, 2015 @ 19:45
    Craig100
    0

    Generated undefined 404

    Having just rebuilt a site from Umv 7.2.1 to 7.2.2 and upgraded Slimsy from Slimmage 0.2 to 0.4.1 I have only one remaining oddity and that is on a slider. Before I start, I need to say that, for this page, both versions produce exactly the same HTML. However, the newer version gallery doesn't appear to initiate and there's an odd 404 in the Chrome console: 

    GET http://localhost:49168/look-and-see/undefined 404 (Not found)   jquery-2.1.3.min.js:3

    All the other images are of the form: /media/1021/look-and-see1.jpg

    I'm assuming slimmage is the culprit due to what is inside the 404 error (screenshot follow [I hope!]):-

    The partial responsible is this (same on both systems):-

    @inherits Umbraco.Web.Mvc.UmbracoTemplatePage
    @{
        var POMList = Model.Content.GetPropertyValue<IEnumerable<IPublishedContent>>("pomGallery");
    }
          <div class="advanced-slider" id="responsive-slider">
            <ul class="slides">
                @foreach(var pic in POMList){
                <li class="slide">
                    <img class="image" src="@pic.GetResponsiveCropUrl("POMHero")" alt="@pic.Name">
                    <img class="thumbnail" src="@pic.GetResponsiveCropUrl("POMHero")" alt="@pic.Name">
                </li>     
                }
            </ul>
        </div>

    Any guidance appreciated.

    Craig

  • Jeavon Leopold 3072 posts 13628 karma points MVP 10x admin c-trib
    Feb 27, 2015 @ 19:55
    Jeavon Leopold
    0

    Hi Craig,

    Did you get the updated slimmage.js from the Slimsy download or from the slimmage GitHub page?

    Also could you post the html (from view source) being rendered?

    Thanks,

    Jeavon

  • Craig100 1136 posts 2522 karma points c-trib
    Feb 27, 2015 @ 21:28
    Craig100
    0

    I downloaded Slimsy as a whole from GitHub about 24hrs ago and then reuploaded the JS files from GitHub earlier today, once the .map file was available.

    The gallery works fine if I just use @pic.Url instead of @pic.GetResponsiveCropUrl("POMHero")

    I double checked the crops exist, are spelt correctly and have been to each image and resaved them in the media section, hoping it regenerates the crops.

    HTML output:-

         <div class="advanced-slider" id="responsive-slider">
            <ul class="slides">
                <li class="slide">
                    <noscript data-slimmage="true" data-img-class="image" data-img-src="/media/1021/look-and-see1.jpg?crop=0,0,0,0&amp;cropmode=percentage&amp;quality=90&amp;width=1159&amp;heightratio=0.2381363244176013805004314064&amp;slimmage=true&amp;rnd=130694614130000000" data-img-alt="look-and-see1.jpg"><img class="image" src="/media/1021/look-and-see1.jpg?crop=0,0,0,0&amp;cropmode=percentage&amp;quality=90&amp;width=1159&amp;heightratio=0.2381363244176013805004314064&amp;slimmage=true&amp;rnd=130694614130000000" alt="look-and-see1.jpg"></noscript>
                    <noscript data-slimmage="true" data-img-class="thumbnail" data-img-src="/media/1021/look-and-see1.jpg?crop=0,0,0,0&amp;cropmode=percentage&amp;quality=90&amp;width=1159&amp;heightratio=0.2381363244176013805004314064&amp;slimmage=true&amp;rnd=130694614130000000" data-img-alt="look-and-see1.jpg"><img class="thumbnail" src="/media/1021/look-and-see1.jpg?crop=0,0,0,0&amp;cropmode=percentage&amp;quality=90&amp;width=1159&amp;heightratio=0.2381363244176013805004314064&amp;slimmage=true&amp;rnd=130694614130000000" alt="look-and-see1.jpg"></noscript>
                </li>     
                <li class="slide">
                    <noscript data-slimmage="true" data-img-class="image" data-img-src="/media/1022/look-and-see2.jpg?crop=0,0,0,0&amp;cropmode=percentage&amp;quality=90&amp;width=1159&amp;heightratio=0.2381363244176013805004314064&amp;slimmage=true&amp;rnd=130694614190000000" data-img-alt="look-and-see2.jpg"><img class="image" src="/media/1022/look-and-see2.jpg?crop=0,0,0,0&amp;cropmode=percentage&amp;quality=90&amp;width=1159&amp;heightratio=0.2381363244176013805004314064&amp;slimmage=true&amp;rnd=130694614190000000" alt="look-and-see2.jpg"></noscript>
                    <noscript data-slimmage="true" data-img-class="thumbnail" data-img-src="/media/1022/look-and-see2.jpg?crop=0,0,0,0&amp;cropmode=percentage&amp;quality=90&amp;width=1159&amp;heightratio=0.2381363244176013805004314064&amp;slimmage=true&amp;rnd=130694614190000000" data-img-alt="look-and-see2.jpg"><img class="thumbnail" src="/media/1022/look-and-see2.jpg?crop=0,0,0,0&amp;cropmode=percentage&amp;quality=90&amp;width=1159&amp;heightratio=0.2381363244176013805004314064&amp;slimmage=true&amp;rnd=130694614190000000" alt="look-and-see2.jpg"></noscript>
                </li>     
                <li class="slide">
                    <noscript data-slimmage="true" data-img-class="image" data-img-src="/media/1023/look-and-see3.jpg?crop=0,0,0,0&amp;cropmode=percentage&amp;quality=90&amp;width=1159&amp;heightratio=0.2381363244176013805004314064&amp;slimmage=true&amp;rnd=130694614290000000" data-img-alt="look-and-see3.jpg"><img class="image" src="/media/1023/look-and-see3.jpg?crop=0,0,0,0&amp;cropmode=percentage&amp;quality=90&amp;width=1159&amp;heightratio=0.2381363244176013805004314064&amp;slimmage=true&amp;rnd=130694614290000000" alt="look-and-see3.jpg"></noscript>
                    <noscript data-slimmage="true" data-img-class="thumbnail" data-img-src="/media/1023/look-and-see3.jpg?crop=0,0,0,0&amp;cropmode=percentage&amp;quality=90&amp;width=1159&amp;heightratio=0.2381363244176013805004314064&amp;slimmage=true&amp;rnd=130694614290000000" data-img-alt="look-and-see3.jpg"><img class="thumbnail" src="/media/1023/look-and-see3.jpg?crop=0,0,0,0&amp;cropmode=percentage&amp;quality=90&amp;width=1159&amp;heightratio=0.2381363244176013805004314064&amp;slimmage=true&amp;rnd=130694614290000000" alt="look-and-see3.jpg"></noscript>
                </li>     
            </ul>
        </div>    

    The slider initiation JS (Look and See Page Slider):-

         // Slider Initialisers
          var sliderActive = false;
          window.slimmage.readyCallback = function () {     
            if (sliderActive == false) {
                sliderActive = true;
                // Home Page Slider
                if ($('.bxslider').length > 0) {
                    var autoVal = false;
                    if ($('.bxslider li').length > 1) {
                        autoVal = true;         
                    }
    
                    $('.bxslider').bxSlider({
                        mode: 'fade',
                        auto: autoVal,
                        pager: false,
                        captions: false
                    });
                }
    
                // Look and See Page Slider
                if ($('#responsive-slider').length > 0) {
                    $('#responsive-slider').advancedSlider({
                        width: 1170,
                        height: 277,
                        responsive: true,
                        skin: 'text-thumbnail-pointer',
                        shadow: false,
                        effectType: 'swipe',
                        slideshow: false,
                        pauseSlideshowOnHover: true,
                        swipeThreshold: 30,
                        slideButtons: false,
                        thumbnailType: 'scroller',
                        thumbnailWidth: 224,
                        thumbnailHeight: 154,
                        thumbnailButtons: true,
                        thumbnailSwipe: true,
                        thumbnailScrollerResponsive: true,
                        minimumVisibleThumbnails: 2,
                        maximumVisibleThumbnails: 5,
                        keyboardNavigation: true
                    });
                }
    
                // Product Detail Slider
                // Init function in productslider.js
                if ($('#showcase0').length > 0) {
                    initProductDetailSlider('#showcase0');
                }
            }
          }
    window.slimmage = { verbose: false }; is the first bit of JS and is above slimmage.min.js in the page footer.

    Cheers,

    Craig

  • Jeavon Leopold 3072 posts 13628 karma points MVP 10x admin c-trib
    Feb 28, 2015 @ 09:51
    Jeavon Leopold
    101

    All looks ok, in your console window does it report that it has slimmed images?

    Could you inspect one of the img elements and see what the url in the Dom is and also what size the element is?

    Also could you check that you have max-width:100% on the images.

  • Craig100 1136 posts 2522 karma points c-trib
    Mar 02, 2015 @ 11:04
    Craig100
    0

    That was it. Applying "style="max-width:100%"" fixed it. 

    Thank you so much (again!)

    Craig

  • Jeavon Leopold 3072 posts 13628 karma points MVP 10x admin c-trib
    Mar 02, 2015 @ 14:14
    Jeavon Leopold
    0

    No worries, this one caught me out as well! I added note on the Slimsy page also for upgrades.

Please Sign in or register to post replies

Write your reply to:

Draft