Anyone have details on the Slimsy appsettings options?

Questions
1

I did some searching and there does not seem to be detailed documentation on the Slimsy package so I was hoping someone could tell me all the different AppsSettings options, there values, and there meanings? Some are listed in readme on the github but, to me, they are not really clearly explained.

Thanks.

2

I don’t think anybody has an actual overview. You should probably ask your question the other way around: ask how to achieve what you’re trying to do.

3

So right now I am trying to figure out what the following do

UseCropAsSrc
TagHelper: ImageDimensions

4

I’ve used an AI to help answer this question, but this was also my understanding so I believe this should be correct:

UseCropAsSrc

The UseCropAsSrc option in Slimsy for Umbraco determines whether the src attribute of the <img> tag uses the crop URL or the original image URL.

In detail:

  • When UseCropAsSrc = true:

    • The src attribute will use the cropped image URL generated by Umbraco’s ImageCropper.
    • This is useful when you’re using responsive images and want the fallback (non-srcset supported browsers) to still get the cropped version.

  • When UseCropAsSrc = false:

    • The src attribute will use the original image URL (i.e., not cropped).
    • Only the srcset and sizes attributes will contain the cropped/resized variants.
    • This might be useful if you’re relying on srcset to handle all responsive sizing, and want the base src to be the original.

Example use case:

If you’ve defined a crop called "square":

@Html.SlimsyImage(mediaItem, "square", new Slimsy.Models.SlimsyImageOptions { UseCropAsSrc = true })

This will render something like:

<img src="/media/1001/image.jpg?crop=auto&width=300" 
     srcset="/media/1001/image.jpg?crop=auto&width=300 300w, /media/1001/image.jpg?crop=auto&width=600 600w" 
     sizes="(max-width: 600px) 100vw, 600px" />

If UseCropAsSrc = false, then:

<img src="/media/1001/image.jpg"
     srcset="/media/1001/image.jpg?crop=auto&width=300 300w, /media/1001/image.jpg?crop=auto&width=600 600w" 
     sizes="(max-width: 600px) 100vw, 600px" />

TL;DR:

UseCropAsSrc = true ensures the src uses the cropped version, not the original. It’s generally safer to leave it true if you’re relying on specific crops, so users without responsive image support still get the intended dimensions.

TagHelper: ImageDimensions

The ImageDimensions property on the Slimsy TagHelper in Umbraco is used to explicitly set the width and height attributes on the rendered <img> tag.

Including the width and height attributes on <img> tags helps prevent layout shifts during page load by reserving the correct space for the image before it fully loads.

Example usage:

<slimsy-img media-item="@Model.Image" crop-alias="square" image-dimensions="true" />

Behavior:

  • ImageDimensions = true:
    • Slimsy will attempt to get the dimensions of the cropped image (based on the crop alias you’re using), and insert them as width and height attributes in the output HTML.

Example output:

<img src="/media/1001/image.jpg?crop=auto&width=300" 
     width="300" 
     height="300"
     ... />
  • ImageDimensions = false (or not set):
    • The width and height attributes will be omitted.

Usage:

  • Set ImageDimensions = true when your crop dimensions are fixed or known, and you want to improve layout stability.
  • Leave it off if:
  • You’re using dynamic crops that vary by request.
  • You want full control over layout via CSS or JavaScript.

Hope that helps!