Expresso.Element.Image (expresso v0.1.0)

Copy Markdown View Source

An element that shows an image

The src option gives the path of the image file, and the path is relative to the working directory of the command, or to the root option of the deck through Expresso.PathTransformer. Expresso.Image reads the file at render time and makes a data URI, so the document of the deck stays one file.

The alt option gives the text of the image for a screen reader. An image with no alt option is decorative, and the render function then writes an empty alt attribute.

The width option gives the width of the image as a CSS width. The render function writes the value into the custom property --image-width on the root tag, and the theme reads that property. An image with no width option takes its natural size, and the theme makes it smaller for a slide that is too small.

Use a length, such as "900px", or a percentage, such as "60%". A percentage is a part of the width of the slide.

The render function writes a percentage as a viewport unit, so "60%" becomes 60vw. CSS resolves a percentage against the container of the image, and that container takes the natural width of the image. Therefore a percentage in CSS makes an image smaller only, and 100% changes nothing. A slide takes the full width of the screen and of the page, so a viewport unit gives the meaning that an author expects.

Expresso.Element.viewport_unit/1 changes a value that is one number and a percent sign only. The number takes each form that CSS permits, so "60%", "33.5%", ".5%", "+60%" and "6e1%" each become a viewport unit. A value such as "calc(50% + 10px)" holds a percentage inside a function, and it goes into the document as it is.

Summary

Types

t()

The struct of an image

Functions

get_assigns(image)

Make the assigns of the render function from the struct

render(assigns)

Make the HTML of an image

Types

t()

@type t() :: %Expresso.Element.Image{
  __spark_metadata__: term(),
  alt: term(),
  at: term(),
  class: term(),
  easing: term(),
  effect: term(),
  el: term(),
  goto: term(),
  morph: term(),
  on: term(),
  signature: term(),
  speed: term(),
  src: term(),
  steps: term(),
  width: term(),
  window: term(),
  window_title: term()
}

The struct of an image

Functions

get_assigns(image)

@spec get_assigns(t()) :: map()

Make the assigns of the render function from the struct

The key overlay holds the attributes of the overlay contract, from Expresso.Overlay.Render.attributes/1, and the style attribute of the width option. The key src holds the data URI of the file, and Expresso.Image.data_uri!/1 raises for a file that it cannot read. The key goto holds the link of the goto option, or nil.

render(assigns)

@spec render(map()) :: Phoenix.HTML.safe()

Make the HTML of an image

With the goto option, the image goes into a link. A screen reader then reads the alt text as the name of the link, so give such an image an alt option.