Skip to content
Zenith Docs

Images

When it comes to images, Zenith can help you in two ways: optimize the images you provide and generate some images automatically. In this guide you will learn how to use both of these features.

Static images

Static images are ones that you provide and use in the resume. They are automatically optimized to reduce the file size and improve the loading time of the resume.

Where are images used?

Content collections

Images can be defined using the image property in the following content collections:

  • basics - used to display your picture in the top section of the resume.
  • education - used to display the logo of an institution you studied at.
  • favorites - used to display visual representation (e.g. logo, thumbnail, cover) of your favorite item. Image will be displayed only in the web resume and only if you provide the image property to the <Favorite /> element when rendering the collection entry.
  • jobs - used to display the logo of am organization you worked at.
  • metadata - used in the openGraph.image property to provide and Open Graph for the page.
  • projects - used to display the logo of a project you worked on.
  • references - used in the author.image property to provide an image of the reference author.

To learn more about image size and ratio recommendations for those collections check the content collections reference.

Components

  • <Img /> - it’s the base component used for icons rendering. It receives the image as the src property. You likely won’t use it directly, until you decide to create a custom component that uses images.

How to use images?

In content collections

In content collections the image property must be a string containing one of the following:

  • Relative path - a path starting with ./ or ../ pointing to the image located anywhere in the repository. We recommend placing images imported this way directly in the directory they’re used.
  • Absolute path - a path starting with / pointing to the image located in the public directory.
  • Authorized URL - an URL address pointing to the image hosted on a server. For security reasons, you need to authorize URL source in order to import images from it.
---
# One of those syntaxes can be used.
image: './relative-image.png'
image: '/public-image.png'
image: 'https://authorized-url.com/image.png'
---
Some markdown content...

In components

To pass an image to a component, you can use an absolute path or authorized URL described above. Additionally you can use an import statement to import an image from a relative path.

---
import Img from '@/components/img.astro';
import relativeImage from './relative-image.png';
---


<Img src={relativeImage} />
<Img src="/public-image.png" />
<Img src="https://authorized-url.com/image.png" />

When are images loaded?

Most components receiving an image (or an collection entry with an image) also receive a loading property. It can be set to lazy or eager to determine how the image should be loaded.

  • lazy - image will be loaded when it becomes visible in the viewport.
  • eager - image will be loaded immediately.

In the web resume, the default image loading strategy is lazy. For the rest of environments, images are loaded eagerly as they will be needed when generating assets based on the page content.

Generated images

Favicons

Favicon is an image displayed next to the page title in places like browser tab, bookmarks, or search results. As different platforms require different sizes and formats of this image, Zenith can generate them for you.

Generating favicons

The first set of favicons was generated automatically when you installed project’s dependencies. To generate a new one using your data, go to the favicons.data.json, customize the values, and run the following command:

Terminal window
npm run generate:favicons

What is generated?

When running the command, all generated images are placed at public/generated/favicons directory, and an src/web/components/metadata/generated/favicons.astro file is created. Both are ignored by Git, as favicon generation command runs automatically for each build.

Open Graph

Open Graph (OG) allows you to make your resume link more attractive when sharing it in social media or communicators (read more). In Zenith, you can specify data for your Open Graph in the metadata collection entries.

When it comes to the Open Graph image, you can bring your own using one of the paths described earlier, or use a generated one.

Open Graph image generation

1. Image templates

All files used for Open Graph image generation are placed within the src/pages/og directory.

As you can see in the index.astro file located there, this type of page uses an <OpenGraph /> component to provide data for the generated image and apply all styling components. You can customize this file to match your needs and create additional ones to introduce more image variants.

2. Generating images

To generate Open Graph images, run the following command:

Terminal window
npm run generate:og
3. Using images

All generated images are placed in the public/generated/og directory and named according to their template name (e.g. index.astro becomes index.png). To use them in the metadata collection entry, provide a path to the image starting with /generated/og/.

Note that the public/generated/og directory is ignored by Git, as the Open Graph image generation command runs automatically for each build.