Copied to clipboard

Flag this post as spam?

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


  • Nik 1304 posts 5550 karma points MVP 3x c-trib
    Jan 07, 2019 @ 16:45
    Nik
    0

    Slimsy - Single image - Different crops

    Hi,

    Is it possible to use Slimsy to switch out crops of an image at different sizes? I can see how to use it for a single crop, but if you wanted to switch between different crops at different screen sizes is this feasible or is it best to write my own behaviour for it?

    Example, on larger sizes I'm be looking to use a letterbox style crop, but on mobile I'm after a more square crop of an image. Tablet might be different as well.

    Thanks

    Nik

  • Søren Kottal 491 posts 3212 karma points MVP 2x c-trib
    Jan 07, 2019 @ 19:10
    Søren Kottal
    100

    Hi Nik

    You could, but you need to define breakpoints and crop sizes manually.

    Like this:

    <picture>
      <source media="(max-width: 799px)" srcset="@Url.GetSrcSetUrls(yourMedia, 300, 200)" sizes="auto">
      <source media="(min-width: 800px)" srcset="@Url.GetSrcSetUrls(yourMedia, 200, 300)" sizes="auto">
      <img src="@Url.GetCropUrl(yourMedia, 200, 300)" srcset="@Url.GetSrcSetUrls(yourMedia, 200, 300)" sizes="auto">
    </picture>
    

    In this example, if the viewport is below 800px, the browser will load an image in a ratio of 3 to 2, above 800px, it would be 2 to 3.

  • Nik 1304 posts 5550 karma points MVP 3x c-trib
    Jan 08, 2019 @ 13:53
    Nik
    1

    Ahh, great idea, yes this could work. :-) Thanks

Please Sign in or register to post replies

Write your reply to:

Draft