`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](ftd/common/).
`src`
Type: [`ftd.image-src`](ftd/built-in-types/#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](ftd/variables/#foreign-variables) 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`](ftd/built-in-types/#string)
Required: False
The `alt` attribute specifies alternate [text description of the
image](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#alt).
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`](https://developer.mozilla.org/en-US/docs/Web/CSS/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
