Sign in Register
Go to solution
Copied to clipboard

Flag this post as spam?

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


  • Nik 1617 posts 7263 karma points MVP 7x 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

    Copy Link
  • Søren Kottal 713 posts 4571 karma points MVP 6x 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.

    Copy Link
  • Nik 1617 posts 7263 karma points MVP 7x c-trib
    Jan 08, 2019 @ 13:53
    Nik
    1

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

    Copy Link
Please Sign in or register to post replies

Write your reply to:

Draft