This module helps you deal with images.
An Image.
Change the width and height parameters.
View of an Image in an <img>
tag.
You can pass to it a list of html attributes that will be added in the tag.
It will keep the image aspect ratio.
View of an Image inside a <svg>
tag using the
<image>
tag.
-- This Source Code Form is subject to the terms of the Mozilla Public
-- License, v. 2.0. If a copy of the MPL was not distributed with this
-- file, You can obtain one at http://mozilla.org/MPL/2.0/
module Image
exposing
( Image
, resize
, viewImg
, viewSvg
)
{-| This module helps you deal with images.
@docs Image
@docs resize
@docs viewImg, viewSvg
-}
import Html as H exposing (Html)
import Html.Attributes as HA
import Svg exposing (Svg)
import Svg.Attributes as SvgA
-- MODEL #############################################################
{-| An Image.
-}
type alias Image =
{ url : String
, width : Int
, height : Int
}
-- UPDATE ############################################################
{-| Change the width and height parameters.
-}
resize : ( Int, Int ) -> Image -> Image
resize ( width, height ) image =
{ image | width = width, height = height }
-- VIEW ##############################################################
{-| View of an Image in an `<img>` tag.
You can pass to it a list of html attributes that will be added in the <img> tag.
It will keep the image aspect ratio.
-}
viewImg : List (H.Attribute msg) -> Image -> Html msg
viewImg attributes image =
let
htmlAttributes =
(maxSizeAttribute ( image.width, image.height ))
:: (HA.src image.url)
:: attributes
in
H.img htmlAttributes []
{-| View of an Image inside a `<svg>` tag using the
[`<image>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/image) tag.
-}
viewSvg : List (Svg.Attribute msg) -> Image -> Svg msg
viewSvg attributes image =
let
svgAttributes =
attributes
++ [ SvgA.xlinkHref image.url
, SvgA.pointerEvents "none"
, SvgA.width <| toString image.width
, SvgA.height <| toString image.height
]
in
Svg.image svgAttributes []
-- VIEW HELPERS ######################################################
{-| Html.Attribute msg setting the max size while keeping aspect ratio.
-}
maxSizeAttribute : ( Int, Int ) -> H.Attribute msg
maxSizeAttribute ( width, height ) =
HA.style
[ ( "width", "auto" )
, ( "height", "auto" )
, ( "max-width", toString width ++ "px" )
, ( "max-height", toString height ++ "px" )
]