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.
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
Lang:
ftd
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>
Lang:
ftd
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>
Lang:
ftd
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.
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
Lang:
ftd
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.
