Images

Getting Started

Images is the official images integration for the Thulite framework. This guide will help you get started with Images already installed. See the manual setup instructions to add Images to an existing Thulite project.

Quick start

To follow this guide, you’ll need an existing Thulite project with Images installed.

Check if Images is installed

Check if Images is installed by running the following command in your project’s root directory:

npm list @thulite/images
pnpm list @thulite/images --depth 1
yarn list @thulite/images --depth=1

This will print the version of the package installed. If nothing is printed, you’ll first need to add Images — proceed with the manual setup instructions.

Add images

Images is installed and it’s time to add some images!

  • Add images to your .md pages by using Markdown or by using the img, picture, or figure shortcode.
  • Add images to your html pages by using the the img, picture, or figure partial.

Next steps

Updating Images

Images is a Thulite integration, and is updated like any @thulite/* integration (or theme):

npm install @thulite/images@latest
pnpm upgrade @thulite/images --latest
yarn upgrade @thulite/images --latest

See the Images changelog for a full list of the changes made in each release.

Troubleshooting Images

Use the project configuration, shortcodes (“img”, “picture”, and “figure”), and partials (“img”, “picture”, and “figure”) reference pages to ensure that images is configured and functioning properly. See the guides in the sidebar for help storing images and customizing your Images setup.

If your answer cannot be found in these docs, please visit the full Thulite Docs for complete Thulite documentation. Your question may be answered by understanding how Thulite works in general, underneath this Images integration.

You can also check for any known Images issues on GitHub, and get help in Thulite Discussions from our active, friendly community!

Credits

All photos on this site are by Vincent van Zalinge.

All illustrations on this site are by Franziska Höllbacher.

This npm package is based on:

Edit this page on GitHub
Next
Manual Setup