Design

Frontend

Fullstack

Create Website

Blog

Why Use fastn for Your Next Frontend?

record

or-type

list

ftd.row

Container Root Attributes

import

Using export/exposing

Functions

Built-in Functions

Built-in Rive 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

-- 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

-- 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

-- 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

-- 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

-- 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

-- import: fastn.com/assets

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

Lang:

ftd

Output

Support `fastn`!

Enjoying fastn? Please consider giving us a star ⭐️ on GitHub to show your support!

⭐️

Getting Help

Have a question or need help?

Visit our GitHub Q&A discussion to get answers and subscribe to it to stay tuned.

Join our Discord channel and share your thoughts, suggestion, question etc.

Connect with our community!

💻️

Found an issue?

If you find some issue, please visit our GitHub issues to tell us about it.

Quick links:

Join us

We welcome you to join our Discord community today.

We are trying to create the language for human beings and we do not believe it would be possible without your support. We would love to hear from you.

Docs

ftd.image

`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

-- 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

-- 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.

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

-- 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

-- 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

-- 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

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

`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

-- import: fastn.com/assets

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

Lang:

ftd

Output

Support `fastn`!

Enjoying fastn? Please consider giving us a star ⭐️ on GitHub to show your support!

⭐️

Getting Help

Have a question or need help?

Visit our GitHub Q&A discussion to get answers and subscribe to it to stay tuned.

Join our Discord channel and share your thoughts, suggestion, question etc.

Connect with our community!

💻️

Found an issue?

If you find some issue, please visit our GitHub issues to tell us about it.

Quick links:

Join us

We welcome you to join our Discord community today.

We are trying to create the language for human beings and we do not believe it would be possible without your support. We would love to hear from you.

ftd.image

Attributes

src

Example Using ftd.image-src Variable

Example Using assets Foreign Variable

alt

Support fastn!

Getting Help

Found an issue?

Quick links:

Join us

ftd.image

Attributes

src

Example Using ftd.image-src Variable

Example Using assets Foreign Variable

alt

Support fastn!

Getting Help

Found an issue?

Quick links:

Join us

`ftd.image`

`src`

Example Using `ftd.image-src` Variable

`alt`

Support `fastn`!

`ftd.image`

`src`

Example Using `ftd.image-src` Variable

`alt`

Support `fastn`!