Want to try fastn for your company's website?

Explore

Get Started

Docs

Community

Blog

undefined

record

or-type

list

ftd.row

ftd.rive (animation)

Container Root Attributes

import

Using export/exposing

Functions

Built-in Functions

Built-in Rive Functions

Built-in Local Storage Functions

Built-in Variables

ftd Events

Rive Events

Use color scheme package

assets

How to make page responsive

Using JS

JS in function

Web Component

Create fastn package

Same argument & attribute types

`ftd.image`

ftd.image is the kernel element used to render images in ftd.

Usage

Input

-- import: fastn.com/assets

-- ftd.image:
src: $assets.files.images.cs.show-cs-1.jpg

Lang:

ftd

Output

Attributes

ftd.image accepts the below attributes as well all the common attributes.

`src`

Type: ftd.image-src

Required: True

The src attribute specifies the path to the image to display. This is the only required attribute. src stores image URLs for both light and dark mode.

Example Using `ftd.image-src` Variable

Consider the following example:

Two images using ftd.image-src type variable

-- ftd.image-src my-images:
light: https://fastn.com/-/fastn.com/images/cs/show-cs-1.jpg
dark: https://fastn.com/-/fastn.com/images/cs/show-cs-1-dark.jpg

-- ftd.image:
src: $my-images
width.fixed.px: 200
height.fixed.px: 115

Lang:

ftd

Output: Two images using ftd.image-src type variable

Switch your color mode (light/dark) using the floating toolbar icon on the bottom right and see the image changing.

In this example, the image URL https://fastn.com/-/fastn.com/images/cs/show-cs-1.jpg is used in the light mode, and https://fastn.com/-/fastn.com/images/cs/show-cs-1-dark.jpg is used in dark mode.

It is also possible to use ftd.image-src with only one field. For example:

One image using ftd.image-src type variable

-- ftd.image-src just-light:
light: https://fastn.com/-/fastn.com/images/cs/show-cs-1.jpg

;; or

-- ftd.image-src just-light: https://fastn.com/-/fastn.com/images/cs/show-cs-1.jpg

-- ftd.image:
src: $just-light
width.fixed.px: 200
height.fixed.px: 115

Lang:

ftd

Output: One image using ftd.image-src type variable

In this case, the same image URL https://fastn.com/-/fastn.com/images/cs/show-cs-1.jpg is returned in both light and dark modes.

Example Using assets Foreign Variable

Instead of passing the image URL directly, it is possible to use the assets foreign variable to access files present in a package.

Check foreign variable in Variable page to know more.

To use the assets variable, import the package as shown below:

Image using assets

-- import: fastn.com/assets

Lang:

ftd

Then, use the files field of assets variable to access files present in the package. For example:

Image using assets

-- import: fastn.com/assets

-- ftd.image:
src: $assets.files.images.cs.show-cs-1.jpg
width.fixed.px: 200
height.fixed.px: 115

Lang:

ftd

The output will look same as above.

Output: Image using assets

In this example, the src attribute of ftd.image component will be set to the URL of show-cs-1.jpg file present in the images/cs folder of the fastn.com package. i.e. URL of <path-to-package>/images/cs/show-cs-1.jpg.

Now, you must be wondering how does it get two different value of image for light mode and dark mode.

When using an assets variable, if an image with the same name but with -dark suffix exists in the package, it will be used for the dark field. For example, if show-cs-1-dark.svg file exists in the images/cs folder, it will be used for the dark field, while show-cs-1.svg will be used for the light field.

`alt`

Type: optional string

Required: False

The alt attribute specifies alternate text description of the image.

Sample code using alt

Input

-- import: fastn.com/assets

-- ftd.image: foo.jpg
alt: Image can't be displayed
color: $inherited.colors.text
padding.px: 10

Lang:

ftd

Output

`fit`

Type: optional string

Required: False

The fit property determines how a ftd.image element should be adjusted to match its container size. It is similar to the object-fit CSS property.

This property offers various options for the content to adapt to the container, such as "maintaining the aspect ratio" or "expanding to occupy the available space fully.".

Sample code using fit

Input

-- import: fastn.com/assets

-- ftd.image: $assets.files.images.cs.show-cs-1.jpg
fit: cover
width.fixed.px: 400
height.fixed.px: 300
color: $inherited.colors.text
padding.px: 10

Lang:

ftd

Output