Learn full-stack web development using fastn in a week
Learn Now
Using images in documents

How to use images in documents

In this video we will learn how to add images in fastn documents.

Supported Image Formats

fastn supports bunch of image file formats, checkout supported-image-formats to read about it. The link is shared in the description.

What are documents?

All the files with .ftd extensions in your package are called documents. FASTN.ftd and index.ftd documents makes for a complete package. But a package can have n number of other documents as well.

Rendering image in the browser

In this package, I have put all the images in the folder called images.

Now to add these images to the documents, we need to import the assets of this package.

What is assets?

Every package has assets as a foreign variable provided by fastn and this variable can be used to access the images or other files in the package.
-- import: <package-name>/assets

Section ftd.image

Now we can display the image by using the component ftd.image and passing the file path in src. So we will write:
-- ftd.image:
src: $assets.files.images.<image-file-name-with-extension>
After colon we start with $. $ is used for reference to assets.

files here is used to access the files present in the package.

And anything after files, it is the path to the file.

ftd.image does not take any body so to avoid throwing error, so we will wrap this text in the markdown component provided by doc-site.

Properties to image

We can apply various properties to this image, like width, border, shadow, etc.
If you have watched the video where I have explained how to round the corners by using the border-property, border-radius, you know that we can apply it to image also. If not, you can checkout out that video as well. You can find the link in description.
Let's say if we add another folder temp inside the images folder, and put this image file we are using inside it. Then we need to change the path as
-- ftd.image:
src: $assets.files.images.temp.<image-file-name-with-extension>

We can use two separate images for light and dark mode. For that, we just need to add the image with same file name followed by -dark at the same location.

Also, we can give URLs in the src. But it is recommended to download the image and import it through assets.
-- ftd.image:
src: https://upload.wikimedia.org/wikipedia/commons/c/ca/A_Beautiful_Scenery.jpg
This way we can add images in our documents.

Thank you guys, keep watching these videos to learn more about fastn.

Support us by giving a star ⭐ on GitHub and join our fastn community on Discord.
Copyright © 2023 - fastn.com