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 1593 posts 7151 karma points MVP 6x c-trib
    Jan 07, 2019 @ 16:45
    Nik
    0

    Slimsy - Single image - Different crops

    Slimsy Feedback
    Umbraco 7

    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 702 posts 4497 karma points MVP 5x 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 1593 posts 7151 karma points MVP 6x 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