ftd.image
ftd.image
is the kernel element used to render images in ftd
.-- import: fastn.com/assets
-- ftd.image:
src: $assets.files.images.cs.show-cs-1.jpg
src
Type: ftd.image-src
Required: True
Thesrc
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.ftd.image-src
Variableftd.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
type variableSwitch 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.
ftd.image-src
with only one field. For example: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
type variableInstead 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 theassets
variable, import the package as shown below:-- import: fastn.com/assets
files
field of assets
variable to access files present in the
package. For example:-- import: fastn.com/assets
-- ftd.image:
src: $assets.files.images.cs.show-cs-1.jpg
width.fixed.px: 200
height.fixed.px: 115
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 anassets
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
Thealt
attribute specifies alternate text description of the
image.alt
-- import: fastn.com/assets
-- ftd.image: foo.jpg
alt: Image can't be displayed
color: $inherited.colors.text
padding.px: 10
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.
fit
-- 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