Ui.Media

UI Content: Media

This module contains helpers to insert images and other media content into your page layout, with built-in features for web accessibility. The image constructor applies the .image Bulma element class, which is helpful for positioning and images and provides a set of fixed and responsive size modifiers. Other media content types that are not supported by Bulma are assigned class names for custom styling.

Media Elements

image :

{ path : String

, altText : String

}

-> Element msg

Construct image content (typically from a JPEG or PNG source), with alt text for screen readers

{ path = "http://bulma.io/images/placeholders/128x128.png"
, altText = "This is a placeholder"
}
  |> Ui.Media.image
  |> Ui.Modifier.add "is-128x128"
  |> Ui.render


--> <figure class="image is-128x128">
--    <img src="http://bulma.io/images/placeholders/128x128.png" alt="This is a placeholder" />
--  </figure>

HTML tags: <figure> > <img />
ARIA roles: figure > img (element defaults)
Element class: .image
Available modifiers: size (fixed, responsive)
Bulma CSS reference: http://bulma.io/documentation/elements/image/

svg :

{ path : String

, fallback : String

, altText : String

}

-> Element msg

Construct SVG content, with a raster image fallback for older browsers and alt text for screen readers

{ path = "logo.svg"
, fallback = "logo.png"
, altText = "Company Logo"
}
  |> Ui.Media.svg
  |> Ui.render


--> <figure class="svg-object">
--    <object data="logo.svg" type="image/svg+xml">
--      <img src="logo.png" alt="Company Name" />
--    </object>
--  </figure>

HTML tags: <figure> > <object> > <img />
ARIA roles: figure > img (element defaults)
Element class: .svg-object
Available modifiers: none
Bulma CSS reference: none (.svg-object is not a Bulma element class)

video :

{ sourceList : List ( String, String )

, hasControls : Bool

}

-> Element msg

Construct video content, with an automatically generated error message as a fallback. Several source files may be listed to ensure that the video is playable in all modern browsers. The second string in each tuple gives the media type code of the file. The hasControls argument indicates whether controls should be displayed in the video frame.

{ sourceList =
  [ ("movie.mp4", "video/mp4")
  , ("movie.ogg", "video/ogg")
  ]


, hasControls = True


}
  |> Ui.Media.video
  |> Ui.render




--> <figure class="video">
--    <video controls role="application">
--      <source src="movie.mp4" type="video/mp4" />
--      <source src="movie.ogg" type="video/ogg" />
--      <p>Video file 'movie.mp4' cannot be loaded. Verify that your browser
--      is up to date and can play 'video/mp4' files.</p>
--      <p>Video file 'movie.ogg' cannot be loaded. Verify that your browser
--      is up to date and can play 'video/ogg' files.</p>
--    </video>
--  </figure>

HTML tags: <figure> > <video> > <source />
ARIA roles: figure (element default) > application
Element class: .video
Available modifiers: none
Bulma CSS reference: none (.video is not a Bulma element class)

audio :

{ sourceList : List ( String, String )

, hasControls : Bool

}

-> Element msg

Construct audio content, with an automatically generated error message as a fallback. Several source files may be listed to ensure that the audio is playable in all modern browsers. The second string in each tuple gives the media type code of the file. The boolean argument indicates whether controls should be displayed.

{ sourceList =
  [ ("horse.ogg", "audio/ogg")
  , ("horse.mp3", "audio/mpeg")
  ]


, hasControls = True


}
  |> Ui.Media.audio
  |> Ui.render




--> <figure>
--    <audio controls role="application">
--      <source src="horse.ogg" type="audio/ogg" />
--      <source src="horse.mp3" type="audio/mpeg" />
--      <p>Audio file 'horse.ogg' cannot be loaded. Verify that your browser
--      is up to date and can play 'audio/ogg' files.</p>
--      <p>Audio file 'horse.mp3' cannot be loaded. Verify that your browser
--      is up to date and can play 'audio/mpeg' files.</p>
--    </audio>
--  </figure>

HTML tags: <figure> > <audio> > <source />
ARIA roles: figure (element default) > application
Element class: .audio
Available modifiers: none
Bulma CSS reference: none (.audio is not a Bulma element class)

Adding a Caption

withCaption :

{ id : Int

, text : String

}

-> Element msg

Add a figure caption to a media element. The id argument is a unique integer that is used to generate an id attribute for the caption so that it can be identified for screen readers as labelling the media element.

{ path = "http://bulma.io/images/placeholders/128x128.png"
, altText = "This is a placeholder"
}
  |> Ui.Media.image
  |> Ui.Modifier.add "is-128x128"
  |> Ui.Media.withCaption
    { id = 1
    , text = "This image is 128 px by 128 px."
    }


  |> Ui.render


--> <figure class="image is-128x128" aria-labelledby="caption-1">
--    <img src="http://bulma.io/images/placeholders/128x128.png" alt="This is a placeholder" />
--    <figcaption id="caption-1">This image is 128 px x 128 px.</figcaption>
--  </figure>

HTML tags: <figure> > <figcaption>
ARIA attribute: aria-labelledby (caption is identified as the visible label for the figure element)

danielnarey/elm-modular-ui/1.0.0

Ui.Media

UI Content: Media

Media Elements

Adding a Caption

Modules