Add image aspect ratio

E-mail notifications

Joakim

Posted on 27/01/2026 13:00:03

Hi,

Our client is running 10.22.6 and we've noticed we lack the image aspect ratio option: Fill. In many cases this was the go to option to keep design consistent over screen sizes.
You've moved this option from the item type and in to file selector. I'm wondering where I would go to add this option?

Thanks,

Replies

Nicolai Pedersen

Posted on 27/01/2026 16:18:49

You cannot.

In Swift 1, “Fill” was essentially a front-end cropping technique: the image was placed inside a fixed aspect-ratio container and CSS would crop the overflow to make it appear consistent across screen sizes.

In Swift 2, we’ve moved to server-side image handling using GetImage. Instead of faking a ratio in CSS, we request the image in the desired ratio (and crop mode) via GetImage, so the image you get back already matches the intended aspect ratio. Swift’s ImageFileViewModel/ToGetImage() flow supports this (ratio + focal point + crop mode).

Where to add the option: you don’t add “Fill” to the item type anymore. The “Fill-equivalent” is configured through the image/file selector settings (ratio) and by ensuring your template calls image.ToGetImage() with the right parameters/metadata, so GetImage outputs the correct ratio/crop.

Can you explain why you need fill? I think ther are new ways to do the same.

How Swift 2’s image ratio handling works (the new approach)

Swift 2 leans on Dynamicweb’s Image Handler (GetImage.ashx) to generate the final image that’s rendered on the page.

The flow is:

Editor selects an image in the file/image selector.
The selection can carry image metadata like:
- Focal point (x/y) for smart cropping
- Aspect ratio (e.g., 16/9, 1/1) via the Ratio property on ImageFileViewModel
- Potentially a crop mode (so we can decide whether we crop to fill the ratio or just fit)
In templates, Swift uses ImageFileViewModel and calls image.ToGetImage(), which builds the GetImage URL and includes width/height/quality, focal point params, ratio, and crop mode when provided.
GetImage then returns an image that is already resized/cropped to the requested ratio, so the frontend layout stays consistent without relying on CSS overflow tricks.

Why this replaces “Fill”:

Swift 1 “Fill” = client-side crop illusion
Swift 2 = real, deterministic output image (ratio/crop decided server-side), which is more consistent across devices and avoids layout surprises.

Fill logic in Swift 1: https://github.com/dynamicweb/Swift/blob/v1.26.8/Swift/Files/Templates/Designs/Swift/Paragraph/Swift_Image.cshtml#L42
Bootstrap ratios: https://getbootstrap.com/docs/5.3/helpers/ratio/#aspect-ratios

Joakim

Posted on 28/01/2026 09:58:38

The issue arises on smaller screens (<desktop), when we have a 2column row with image and text paragraph. The image keeps the ratio but visually it does not look good.
So this would then fall on the editor, to either adjust the text content or chose another(not wanted) ratio to make it visually consistent over screens?

Nicolai Pedersen

Posted on 28/01/2026 13:25:22

This post has been marked as an answer

Got it.

In Swift 2 world that would not be ratio - but layout.

You can force the behavior of fill by adding this CSS - either add it globally to all image columns - alternatively create a new template (Attached) that gives you fill when needed.
Global CSS targetting all image columns:

/* Make the figure fill the column */
[data-dw-itemtype="swift-v2_image"] figure {
    height: 100%;
    overflow: hidden;
}

/* Make the image fill the figure and crop */
[data-dw-itemtype="swift-v2_image"] img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

PlainFill.cshtml

Votes for this answer: 1

Nicolai Pedersen

Posted on 28/01/2026 13:25:42

Joakim

Posted on 28/01/2026 14:28:57

Adding the template will be sufficient in this case.

Thank you!

You must be logged in to post in the forum

Developer forum

Add image aspect ratio

Replies