Aspect ratio, layout priority, and clipping in KFImage

[JetForMe]

I’m having an issue where I can't get KFImage to set the aspect ratio of the loaded image without blowing up both the placeholder and the loaded image. If I don't specify .aspectRatio on KFImage, then everything mostly works: Prior to loading, the placeholder is okay. But after loading, the loaded image is non-uniformly scaled.

To clip an image to a particular aspect ratio, and allow the parent to dictate the size, you make an image resizable, aspect fill, and set the layout priority to -1. This works well.

But trying to set the layout priority on KFImage seems to have no effect. I think that’s what’s causing my issues.

I’d sure appreciate some help. Thanks!

Trying to fix this by adding .aspectRatio to KFImage blows up both images. Here's a copy of my Stack Overflow question, with screenshots and code:

---

I’m having some issues with KFImage. It works fine with the placeholder image, until the remote image is loaded. It seems to be some interaction between .aspectRatio() and .layoutPriority(-1).

I have a kind of card with an image, and a couple text blocks beneath it. I want the image to be clipped to a view that has a specific aspect ratio, and whose width is dictated by the container (in the real app these live in a grid, and size will vary from device to device. I want the image to grow, rather than the spacing to grow).

Here’s what I get with the placeholder (the bubbles) and the loaded image (the aspect ratio test image). The placeholder image is 654 x 768, and the loaded image is 1080 x 1920. The aspect ratio of the placeholder is properly maintained, and it is clipped to the desired aspect ratio.

But as you can see, the loaded image is scaled non-uniformly to fit in the same aspect-ratio as the placeholder. The normal solution to that is to add .aspectRatio(.fill). But if I do that on KFImage, it blows up everything:

Here’s the code. Note the .aspectRatio(contentMode: .fill) on KFImage is commented out. If you uncomment it, you get the second image above.

import SwiftUI

import Kingfisher


struct
SellerShowCell: View
{
    let     title           :   String
    let     secondary       :   String?
    var     startTime       :   Date?           =   nil
    var     thumbnailURL    :   URL?            =   nil
    
    var
    body: some View
    {
        VStack(alignment: .leading, spacing: 0.0)
        {
            ZStack(alignment: .topLeading)
            {
                //  Thumbnail background…
                
                ZStack
                {
                    KFImage(self.thumbnailURL)
                        .cancelOnDisappear(true)
                        .placeholder
                        {
                            ZStack
                            {
                                Color(.black)
                                Image("image_placeholder_background")
                                    .resizable()
                                    .aspectRatio(contentMode: .fill)
                                    .layoutPriority(-1)
                            }
                        }
                    .resizable()
//                  .aspectRatio(contentMode: .fill) //  Uncommenting this ruins the placeholder and allows the loaded image to dictate the parent size
//                  .layoutPriority(-1)              //  This does not have any obvious effect on KFImage
                }
                .aspectRatio(158.0 / 220.0, contentMode: .fit)
                .cornerRadius(16.0)
                
                Text("A Note")
                    .foregroundColor(.white)
                    .padding(8.0)
                    .background(Color.purple)
                    .clipShape(Capsule())
                    .padding([.top, .leading], 10.0)
            }
            
            //  Title…
            
            Text("\(self.title)")
                .multilineTextAlignment(.leading)
                .lineLimit(2)
                .font(.custom("Helvetica", size: 16.0).weight(.semibold))
                .foregroundColor(.black)
                .padding(.top, 12.0)
            
            //  Secondary…
            
            if let secondary = self.secondary
            {
                Text("\(secondary)")
                    .multilineTextAlignment(.leading)
                    .font(.custom("Helvetica Neue", size: 12.0).weight(.medium))
                    .foregroundColor(Color("secondary-color"))
                    .padding(.top, 12.0)
            }
        }
        .border(Color.green)
    }
}

struct SellerShowCell_Previews: PreviewProvider {
    static var previews: some View {
        ZStack {
            Color("main-tab-background")
                .ignoresSafeArea()
            VStack(spacing: 20.0)
            {
                SellerShowCell(title: "Here is a caption of sufficient length to be a couple of lines",
                                secondary: "Secondary Text",
                                thumbnailURL: nil)
                    .padding(.horizontal, 80)
                SellerShowCell(title: "Here is a caption of sufficient length to be a couple of lines",
                                secondary: "Secondary Text",
                                thumbnailURL: URL(string: "https://i.imgur.com/iH7Xe20.jpg")!)
                    .padding(.horizontal, 80)
            }
        }
    }
}

[onevcat]

Hi, @JetForMe

When applying resizable or aspectRatio to the KFImage, it under the hood just sets it to the SwiftUI.Image after the loading finished and the actual Image shown. So I suggest you to confirm with a plain image first to make sure whether this is a KFImage issue or just not well-designed SwiftUI layout.

For your purpose, I guess try the GeometryReader, which might be the correct tool to handle an image layout:

[onevcat]

Oh,

The screenshot is basically a rough idea. You may still need to adjust and determine how this GeometryReader work with others (it provides the whole available space as a proxy, so in the screenshot above the SingleViewDemo.body takes the full height)

I pasted the code above for you as a reference.

    var body: some View
    {
        GeometryReader { proxy in
            VStack(alignment: .leading, spacing: 0.0)
            {
                ZStack(alignment: .topLeading)
                {
                    //  Thumbnail background…
                    ZStack
                    {
                        KFImage(self.thumbnailURL)
                            .cancelOnDisappear(true)
                            .placeholder
                            {
                                ZStack
                                {
                                    Color(.black)
                                    Image("image_placeholder_background")
                                        .resizable()
                                        .aspectRatio(contentMode: .fill)
                                }
                            }
                            .resizable()
                            .aspectRatio(contentMode: .fill)
                            .frame(width: proxy.size.width, height: proxy.size.width * 220 / 158)
                    }
                    .cornerRadius(16.0)
                    .border(Color.red)
                    
                    Text("A Note")
                        .foregroundColor(.white)
                        .padding(8.0)
                        .background(Color.purple)
                        .clipShape(Capsule())
                        .padding([.top, .leading], 10.0)
                }
                
                //  Title…
                
                Text("\(self.title)")
                    .multilineTextAlignment(.leading)
                    .lineLimit(2)
                    .font(.custom("Helvetica", size: 16.0).weight(.semibold))
                    .foregroundColor(.black)
                    .padding(.top, 12.0)
                
                //  Secondary…
                
                if let secondary = self.secondary
                {
                    Text("\(secondary)")
                        .multilineTextAlignment(.leading)
                        .font(.custom("Helvetica Neue", size: 12.0).weight(.medium))
                        .foregroundColor(.red)
                        .padding(.top, 12.0)
                }
            }
            .border(Color.yellow)
        }
        .frame(width: 200)
        .border(Color.green)
    }

[JetForMe]

My view works fine for a regular image. The problem is not resizable or aspectRatio, it's layoutPriority. In this sense, KFImage doesn't work the same as a regular Image.