Copied to clipboard

Flag this post as spam?

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


  • Tom Engan 430 posts 1173 karma points
    Mar 05, 2015 @ 16:44
    Tom Engan
    0

    ImageCropper with responsive design (Bootstrap 3)

    Are unsure whether this is the right topic, but need a method, preferably CSS, but also razor or jQuery if no other options exist. The website is built on Umbraco 7.2.2 and Bootstrap 3.3.2 (and MS SQL Express 2014).

    When I upload an image to a page, it creates several crop sizes for the picture. This I got to work with:
    <img src='@Model.Content.GetCropUrl("imageCropper", "thumbW1920H1080")' />

    But what if I want to replace thumbnail "thumbW1920H1080" with smaller images to smaller screens, Tablet and Mobile for effective downloading?

    Someone who has a simple and straightforward method?

  • Alex McCormick 1 post 21 karma points
    Mar 05, 2015 @ 16:59
    Alex McCormick
    0

    Hi Tom,

    There are several jquery plugins that'll let you swap images dependant the users screen width, one is http://jquerypicture.com which I've used previously although I modified it to do backgrounds (couldn't do them straight in the css as it was a CMS system).

    Hope that helps

    Alex

  • Tom Engan 430 posts 1173 karma points
    Mar 05, 2015 @ 17:10
    Tom Engan
    0

    Thanks for the tip, will be checked out in the morning.
    If other have other options, such with CSS or razor, I'll check out them too.

  • Tom Engan 430 posts 1173 karma points
    Mar 10, 2015 @ 10:56
    Tom Engan
    0

    I avoid using 3rd party supplier. Here is my working solution, located in master.cshtml

    <script>

    var thumbsize;

    if (screen.width <= 375) {

    thumbsize = "<img src='@Model.Content.GetCropUrl("imageCropper", "thumbW350H200")'/>";

    } else if (screen.width <= 768) {

    thumbsize = "<img src='@Model.Content.GetCropUrl("imageCropper", "thumbW768H432")'/>";

    } else if (screen.width <= 1024) {

    thumbsize = "<img src='@Model.Content.GetCropUrl("imageCropper", "thumbW1024H576")'/>";

    } else if (screen.width <= 1366) {

    thumbsize = "<img src='@Model.Content.GetCropUrl("imageCropper", "thumbW1366H768")'/>";

    } else {

    thumbsize = "<img src='@Model.Content.GetCropUrl("imageCropper", "thumbW1920H1080")'/>";

    }

    document.getElementById("bgThumb").innerHTML = thumbsize;

    </script>

     

    And the pictures are received with this simple code in a different template:

    <span id="bgThumb" style="100%"></span>

     

    But this does not look pretty, so how can I move codes in the master.cshtml to a .js file, since Razor codes can not be placed directly in the js file?

  • Jeroen Breuer 4866 posts 12165 karma points MVP 3x admin c-trib
    Mar 10, 2015 @ 12:08
    Jeroen Breuer
    1

    Hello,

    You might want to check out Slimsy

    There is also a YouTube video: https://www.youtube.com/watch?v=bQsvGmnYaUU.

    I did a custom implementation in the Hybrid Frameworkhttps://www.youtube.com/watch?v=Enni9r0whCE

    Jeroen

  • Tom Engan 430 posts 1173 karma points
    Mar 10, 2015 @ 12:54
    Tom Engan
    0

    Thanks for the tips. Will take a closer look at them later.

Please Sign in or register to post replies

Write your reply to:

Draft