Blogging in Lisp


Image Sizing in elm-ui

Submitted by Bill St. Clair on Thu, 06 Dec 2018 03:53:36 GMT

I've been using Matthew Griffith's wonderful elm-ui package to make the user interface for GabDecker, a TweetDeck-like web app I'm building for I've had inline images since the beginning, scaled to fit the column width. Today I made clicking on one of those image open a dialog with the full-size version, scaled down if necessary to fit the available space.

elm-ui eschews CSS in the source code, usually making it much easier to get what you want. But in this case, I was NOT getting what I wanted, so I wrote my own CSS, and learned about the object-fit property in the process.

Here's the code that's now running:

imageDialog : String -> Model -> Element Msg
imageDialog url model =
        maxw =
            9 * model.windowWidth // 10

        maxws =
            String.fromInt maxw ++ "px"

        maxh =
            9 * model.windowHeight // 10

        maxhs =
            String.fromInt (9 * model.windowHeight // 10) ++ "px"
        -- This is black magic.
        -- It took much play with the CSS to get it right.
        [ centerX
        , centerY
        [ standardButton "" CloseDialog <|
                [ "object-fit" "contain"
                , "max-width" maxws
                , "max-height" maxhs
                , "border" "2px solid black"
                , "width" "auto"
                , "height" "auto"
                , Attributes.src url
                |> Element.html

Add comment   Edit post   Add post

Previous Posts:

How do I run elm-test in Elm 0.19?
CLtL2 on Kludges
iPhone Xs Pricing
New Elm Package: billstclair/elm-port-funnel
Building the Elm compiler
Server Updated to Ubuntu 16.04LTS
XKCD April Fools 2018
JSMaze Returns, in Elm!