How to display a round image in elm with elm-ui?

Question

I´m playing around with elm-ui and I´m trying to achieve a (in my opinion) easy task but I´m struggling.
I would like to display a round image like we all know it from contact forms on iOS or several other platforms.

As far as I know there are two libraries called elm-ui:
- mdgriffith/elm-ui
- gdotdesign/elm-ui
I´m using the first one.

I was playing around with Element.Border but that just added a border in the background.

import Element exposing (image)
import Element.Border as Border

image
  [ Border.rounded 50
  , Border.width 5
  ]
  { src = "img.png"
  , description = "Some text..."
  }

I also tried to use a svg to display a circle and fill it with the image as background. But now I struggled by setting the background to anything else than a color.

import Element exposing (html)
import Svg exposing (svg)
import Svg.Attributes exposing (cx, cy, fill, height, r, width)

html
  (svg
      [ width "100"
      , height "100"
      ]
      [ circle
          [ cx "50"
          , cy "50"
          , r "50"
          , fill "orange" -- That´s where I would like to insert my image.
          ]
          []
      ]
  )

I´m coming from the .Net world and there with WPF´s XAML I would use the svg as an opacity mask on the image.

How can I achieve that in ELM?
Thank you for your help!

Maybe [elm-collage](https://package.elm-lang.org/packages/timjs/elm-collage/latest/) is a good option to look into. It exposes a higher level API than SVG. — michid, Dec 16 '19 at 08:33

score 7 · Accepted Answer · answered Jan 09 '20 at 08:55

I got an answer to the question on Elm Discourse.

It´s quite simple, by adding a Border.rounded and clip.

image
    [ centerX
    , centerY
    , Border.rounded 50 
    , clip
    ]
    { src = "https://cdn.cnn.com/cnnnext/dam/assets/191024091949-02-foster-cat-large-169.jpg"
    , description = "A Cat"
    }

The guy how answerd also provided an Ellie Example.

How to display a round image in elm with elm-ui?

1 Answers1