<@U01JTGH1UMD> Hi, im trying to use your Zoomable ...

# multiplatform

[Vaibhav Jaiswal]

@Albert Chang Hi, im trying to use your Zoomable library, but the sample shows image only when its loaded
How can i also handle showing placeholder, error fallback too, I dont want zooming when those are used
i'm also unable to get the aspect ratio the way im tring it

@Composable
fun MediaZoomableImage(
    url: String,
    placeholder: Painter? = null,
    error: Painter? = placeholder,
    contentDescription: String,
    modifier: Modifier = Modifier,
    contentScale: ContentScale = ContentScale.Fit
) {
    setSingletonImageLoaderFactory { context ->
        ImageLoader.Builder(context)
            .crossfade(true)
            .dispatcher(Dispatchers.Default)
            .build()
    }

    Zoomable {
        AsyncImage(
            model = url,
            contentDescription = contentDescription,
            modifier = modifier,
            contentScale = contentScale,
            placeholder = remember { placeholder },
            error = remember { error },
        )
    }

}

[Vaibhav Jaiswal]

This works, but i have empty space issue as I have not used Modifier.aspectRatio()

[Vaibhav Jaiswal]

Update:

@Composable
fun MedialZoomableImage(
    url: String,
    placeholder: Painter? = null,
    error: Painter? = placeholder,
    contentDescription: String,
    modifier: Modifier = Modifier,
    contentScale: ContentScale = ContentScale.Fit
) {
    setSingletonImageLoaderFactory { context ->
        ImageLoader.Builder(context)
            .crossfade(true)
            .dispatcher(Dispatchers.Default)
            .build()
    }

    val painter = rememberAsyncImagePainter(
        model = ImageRequest.Builder(LocalPlatformContext.current)
            .data(url)
            .size(coil3.size.Size.ORIGINAL)
            .build(),
        placeholder = placeholder,
        error = error,
        contentScale = contentScale
    )
    Zoomable {
        val size = painter.intrinsicSize
        Image(
            painter = painter,
            contentDescription = contentDescription,
            modifier = modifier.conditional(
                size != Size.Unspecified,
                Modifier.aspectRatio(size.width / size.height)
            ),
            contentScale = contentScale
        )
    }
}

crashes with Size is Unspecified

[Albert Chang]

You can show whatever you want depending on the state of the painter:

val painter = rememberAsyncImagePainter(...)
when(painter.state) {
    AsyncImagePainter.State.Empty -> ...
    is AsyncImagePainter.State.Loading -> ...
    is AsyncImagePainter.State.Error -> ...
    is AsyncImagePainter.State.Success -> {
        val size = painter.intrinsicSize
        Zoomable {
            Image(
                painter = painter,
                contentDescription = null,
                modifier = Modifier
                    .aspectRatio(size.width / size.height)
                    .fillMaxSize()
            )
        }
    }
}

[Vaibhav Jaiswal]

I tried this too, still crashed with "size is unspecified"

[Albert Chang]

It shouldn’t, unless you are doing it wrong.

[Vaibhav Jaiswal]

This is how i did it

val painter = rememberAsyncImagePainter(url)

Crossfade(painter.state, modifier){
    when(it){
        AsyncImagePainter.State.Empty -> Unit
        is AsyncImagePainter.State.Error -> {
            error?.let { errorPainter ->
                Image(
                    painter = errorPainter,
                    contentDescription = contentDescription,
                    modifier = Modifier.fillMaxSize(),
                    contentScale = contentScale
                )
            }
        }
        is AsyncImagePainter.State.Loading -> {
            placeholder?.let { placeholderPainter ->
                Image(
                    painter = placeholderPainter,
                    contentDescription = contentDescription,
                    modifier = Modifier.fillMaxSize(),
                    contentScale = contentScale
                )
            }
        }
        is AsyncImagePainter.State.Success -> {
            Zoomable {
                val size = it.painter.intrinsicSize
                Image(
                    painter = it.painter,
                    contentDescription = contentDescription,
                    modifier = Modifier.fillMaxSize().aspectRatio(size.width / size.height),
                    contentScale = contentScale
                )
            }
        }
    }
}

[Albert Chang]

In that case I believe it’s a Coil bug. Please file an issue to Coil with a repro.

[Vaibhav Jaiswal]

I removed the aspect ratio modifier and now its working pretty good, i dont see any extra space issue as written in the README

Zoomable {
        AsyncImage(
            model = url,
            contentDescription = contentDescription,
            modifier = modifier,
            contentScale = contentScale,
            placeholder = remember { placeholder },
            error = remember { error },
        )
    }