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](/built-in-types/#supported-image-formats)
to read about it. The link is shared in the discription.
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
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](/rounded-border/), 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.
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
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](https://github.com/fastn-stack/fastn/)
and join our fastn community on [Discord](/discord/).
Support `fastn`!
Enjoying `fastn`? Please consider giving us a star ⭐️ on
[GitHub](https://github.com/fastn-stack/fastn) to show your support!
[⭐️](https://github.com/fastn-stack/fastn)
Getting Help
Have a question or need help?
Visit our [GitHub Q&A discussion](https://github.com/fastn-stack/fastn/discussions/categories/q-a)
to get answers and subscribe to it to stay tuned.
Join our [Discord](https://discord.gg/a7eBUeutWD) channel and share your
thoughts, suggestion, question etc.
Connect with our [community](/community/)!
[💻️](/community/)
Found an issue?
If you find some issue, please visit our [GitHub
issues](https://github.com/fastn-stack/fastn/issues) to tell us about it.
Quick links:
- [Install `fastn`](install/)
- [Create `fastn` package](create-fastn-package/)
- [Expander Crash Course](expander/)
- [Syntax Highlighting in Sublime Text](/sublime/)
Join us
We welcome you to join our [Discord](https://discord.gg/a7eBUeutWD) community
today.
We are trying to create the language for human beings and we do not believe it
would be possible without your support. We would love to hear from you.
Copyright © 2023 - fastn.com
