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.files refers to your fastn project root folder.
.static refers to your <static> folder you created inside your fastn project.
.sample.jpg is the image inside <static> folder.

You can add as many image assets into your fastn project you wish to and refers them as we seen above.

image

How to add image?

How to link image from fastn assets?

How to link image from `fastn` assets?