image
ds.image can be used to add images inside your fastn pages.How to add image?
To add an image inside your
page component just use ds.image as shown below:
-- ds.image: Add image caption here link: <add link> src: <add image path here> alignment: center width: fill-container
Lang:
ftd
Example 1:
Input
-- ds.image: This is image caption link: https://fastn.com src: $assets.files.static.image-placeholder.jpg This is addition body content for above image. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores.
Lang:
ftd
Output
This is image caption
This is addition body content for above image. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores.
Example 2:
Input
-- ds.image: Image width 300 pixels link: https://fastn.com src: $assets.files.static.image-placeholder.jpg width.fixed.px: 300 This is addition body content for above image. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores.
Lang:
ftd
Output
Image width 300 pixels
This is addition body content for above image. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores.
Example 3:
Input
-- ds.image: Image width 300 pixels and right aligned link: https://fastn.com src: $assets.files.static.image-placeholder.jpg width.fixed.px: 300 alignment: right This is addition body content for above image. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores.
Lang:
ftd
Output
Image width 300 pixels and right aligned
This is addition body content for above image. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores.
Example 4:
Input
-- ds.image: Image width 300 pixels and left aligned link: https://fastn.com src: $assets.files.static.image-placeholder.jpg width.fixed.px: 300 alignment: left This is addition body content for above image. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores.
Lang:
ftd
Output
Image width 300 pixels and left aligned
This is addition body content for above image. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores.
How to link image from fastn assets?
Let’s say you have created a folder name
<static> into your fastn project. And you added a image sample.jpg inside it.-- ds.image: src: $assets.files.static.sample.jpg
Lang:
ftd
-
In above code snippet
$assets.filesrefers to yourfastnproject root folder. -
.staticrefers to your<static>folder you created inside yourfastnproject. -
.sample.jpgis the image inside<static>folder.
fastn project you wish to and refers them as we seen above.
Stay in touch with everything you need
Copyright ©2022. Fastn Inc.
