Copied to clipboard

Flag this post as spam?

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


  • Mark Bro 15 posts 86 karma points
    Jul 24, 2014 @ 00:57
    Mark Bro
    0

    Responsive images using Image Cropper & Umbraco 7.1.4

    Hi guys,

    I have been working through the following article to implement responsive images using image cropper, slimmage on U7.1.4

    Responsive images using U7.1.4

    Everything has been working well and I am able to crop the images as shown in step 5, however when I add the noscript data-slimmage and /noscript tags my image disappears.

    <a href="@Umbraco.Media(item.image).Url" title="@item.imageDescription">
                <noscript data-slimmage>
                <img src="@Umbraco.TypedMedia((int)item.Image).GetCropUrl(width:152, height: 152, ratioMode:ImageCropRatioMode.Height, 
            furtherOptions:"&slimmage=true")" alt="@item.Name"/> 
                </noscript>
            </a>
    

    I have noticed that the data-slimmage is blank and the data-img-src is not defined as in the article's example in step 8.

    enter image description here

    Any thoughts on what the cause is?

    Also, is there a way to specify the width and height as property values on the GetCropUrl?

    thanks.

  • Jeavon Leopold 3072 posts 13628 karma points MVP 10x admin c-trib
    Jul 24, 2014 @ 09:21
    Jeavon Leopold
    0

    Hi Mark,

    I'm guessing you are not using SlimResponse hence why you are generating the noscript tags yourself?

    The reason the images are disappearing is probably that you haven't added slimmage.js to your template yet?

    I go through this tutorial in detail in this video that might help you work out your issues and also show you how to specify width and height.

    Jeavon

  • Mark Bro 15 posts 86 karma points
    Jul 24, 2014 @ 20:56
    Mark Bro
    0

    Thanks for the quick response Jeavon.

    Yes you are correct, I am adding the tags manually rather than using SlimResponse. Interestingly enough I have included the slimmage.js to my template but will investigate further.

    Just out of curiosity when using GetResponsiveImageUrl are you still able to pass in the furtheroptions to access the imageprocessor methods like you do using the GetGropUrl? Since I was unsure, that was the reason i didn't install the slimsy package.

    Cheers,

    Mark

  • Mark Bro 15 posts 86 karma points
    Jul 25, 2014 @ 01:32
    Mark Bro
    0

    Hi Jeavon,

    You were right!, I had an issue with the .js file. Now getting the data-img-src and true value.

    enter image description here

    I still have a problem when I add the noscript tags however. The image is displaying in it's maximum size and is still not responsive. I see the data-pixel-width="1760"> is the actual image size rather than the width of 270 I specified.

    Is this an indication that slimmage isn't implemented correctly?

  • Jeavon Leopold 3072 posts 13628 karma points MVP 10x admin c-trib
    Jul 25, 2014 @ 08:30
    Jeavon Leopold
    0

    Hi Mark,

    No, you can't pass in furherOptions to Slimsy due to some issues with the way dynamics executes the methods but you can just add the variable at the end end e.g.

    <img src="@GetResponsiveImageUrl(100,100)&filer=comic">
    

    The fact the image is showing full width sounds like it might be working, do you have a % width on your image? You could try style="width:25%" to test

    Remember it is likely that your image won't actually ever render at the 270 you specified as the size is calculated from the size that the CSS makes the img, the values you pass in are setting the ratio and the size that a visitor with no js would see

    Jeavon

  • Mark Bro 15 posts 86 karma points
    Jul 25, 2014 @ 21:09
    Mark Bro
    1

    Thanks for all your help Jeavon, think I'm beginning to understand how this all works.

    Cheers,

    Mark

Please Sign in or register to post replies

Write your reply to:

Draft