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:
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.
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:
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
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
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&cropmode=percentage&quality=90&width=1159&heightratio=0.2381363244176013805004314064&slimmage=true&rnd=130694614130000000" data-img-alt="look-and-see1.jpg"><img class="image" src="/media/1021/look-and-see1.jpg?crop=0,0,0,0&cropmode=percentage&quality=90&width=1159&heightratio=0.2381363244176013805004314064&slimmage=true&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&cropmode=percentage&quality=90&width=1159&heightratio=0.2381363244176013805004314064&slimmage=true&rnd=130694614130000000" data-img-alt="look-and-see1.jpg"><img class="thumbnail" src="/media/1021/look-and-see1.jpg?crop=0,0,0,0&cropmode=percentage&quality=90&width=1159&heightratio=0.2381363244176013805004314064&slimmage=true&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&cropmode=percentage&quality=90&width=1159&heightratio=0.2381363244176013805004314064&slimmage=true&rnd=130694614190000000" data-img-alt="look-and-see2.jpg"><img class="image" src="/media/1022/look-and-see2.jpg?crop=0,0,0,0&cropmode=percentage&quality=90&width=1159&heightratio=0.2381363244176013805004314064&slimmage=true&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&cropmode=percentage&quality=90&width=1159&heightratio=0.2381363244176013805004314064&slimmage=true&rnd=130694614190000000" data-img-alt="look-and-see2.jpg"><img class="thumbnail" src="/media/1022/look-and-see2.jpg?crop=0,0,0,0&cropmode=percentage&quality=90&width=1159&heightratio=0.2381363244176013805004314064&slimmage=true&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&cropmode=percentage&quality=90&width=1159&heightratio=0.2381363244176013805004314064&slimmage=true&rnd=130694614290000000" data-img-alt="look-and-see3.jpg"><img class="image" src="/media/1023/look-and-see3.jpg?crop=0,0,0,0&cropmode=percentage&quality=90&width=1159&heightratio=0.2381363244176013805004314064&slimmage=true&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&cropmode=percentage&quality=90&width=1159&heightratio=0.2381363244176013805004314064&slimmage=true&rnd=130694614290000000" data-img-alt="look-and-see3.jpg"><img class="thumbnail" src="/media/1023/look-and-see3.jpg?crop=0,0,0,0&cropmode=percentage&quality=90&width=1159&heightratio=0.2381363244176013805004314064&slimmage=true&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'); } } }Cheers,
Craig
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.
That was it. Applying "style="max-width:100%"" fixed it.
Thank you so much (again!)
Craig
No worries, this one caught me out as well! I added note on the Slimsy page also for upgrades.
is working on a reply...