What is the Image Library?

The Nodinite Image Library is a centralized database for storing, organizing, and reusing images across your documentation. It replaces the need to upload the same image multiple times or rely on external URLs that may become unavailable.

The Problem It Solves

Before the Image Library, embedding images in articles required:

• Uploading from a local file for every individual article — no sharing between articles
• Pasting from clipboard — one copy stored per article, impossible to update globally
• Using external URLs — risk of broken images if the source server changes
• Re-entering alt text every time — no standardized accessibility metadata
• No searchable gallery — no way to find previously uploaded images

The Image Library addresses all of these limitations with a single, searchable, centrally managed collection.

Key Capabilities

Capability	Description
Upload	Upload PNG, JPEG, GIF, WebP, or SVG images up to 10 MB
Gallery	Browse all images in a tile-based gallery with search and tag filter
Edit metadata	Update name, title, alt text, description, and tags after upload
Copy Reference	Copy the name-based reference token to clipboard for manual insertion
Delete	Soft-delete images; deleted images show a broken image indicator in articles
Search	Full-text search across name, title, description, and alt text
Tags	Organize images with free-form tags; filter the gallery by tag
Size modifiers	Control display size at insertion time without editing the source image
Accessibility	Alt text stored centrally; applied automatically at every insertion point

Name-Based Image References

Images in the library are identified by a unique name slug (e.g., logogoeshere). The name is:

• Lowercase and URL-safe — spaces and special characters are replaced with hyphens on upload
• Unique across the entire Image Library
• Stable across environments — the same name slug refers to the same image in Test and Production

This is why name-based references are preferable to ID-based references: database IDs differ between environments, but names are chosen by the uploader and remain consistent everywhere.

HTML Reference

When inserting an image using the editor toolbar, Nodinite generates the following HTML:

<img src="/api/ImageAssets/name/logogoeshere/File"
     data-ndi-name="logogoeshere"
     alt="Your alt text"
     class="ndi-m"
     style="max-width: 384px; height: auto;">

• src contains the resolved URL used for display in the editor
• data-ndi-name stores the portable name-based reference; on save the editor re-encodes this as {ndi}/logogoeshere in the database
• class="ndi-m" applies the selected size modifier
• style provides an inline fallback for editors that do not load the stylesheet

Markdown Reference

In Markdown articles, images are referenced using the {ndi} token followed by the image name:

![My logo][img-logo][m]

[img-logo]: {ndi}/logogoeshere

The Markdown rendering engine resolves {ndi}/logogoeshere to /api/ImageAssets/name/logogoeshere/File at render time. The size modifier [m] is converted to the CSS class ndi-m before the document is rendered.

Inline Markdown Style

For a single-use insertion, the inline form can also be used:

![My logo]({ndi}/logogoeshere)

Size Modifiers

Both the HTML editor picker and Markdown editor support size modifiers, which add a CSS class to the rendered image to constrain its maximum width. The original image file is never modified.

Modifier	CSS Class	Max Width	Typical Use
Original	(none)	Full width / natural	Full-width architecture diagrams
xxs	ndi-xxs	64 px	Tiny icon-like inline images
xs	ndi-xs	128 px	Small inline thumbnails
s	ndi-s	256 px	Small illustrations
m	ndi-m	384 px	Medium screenshots (default)
l	ndi-l	512 px	Standard documentation screenshots
xl	ndi-xl	768 px	Large diagrams
xxl	ndi-xxl	1024 px	Extra-large architecture diagrams

When the same image needs to appear at different sizes in different articles, apply different size modifiers at each insertion point — the source image in the library is unchanged.

Supported Image Formats

Format	MIME Type	Notes
PNG	image/png	Preferred for screenshots and UI images
JPEG	image/jpeg	Preferred for photographs
GIF	image/gif	Static frame rendering; full animation is a future enhancement
WebP	image/webp	Modern compressed format
SVG	image/svg+xml	Scalable vector format; dimensions stored as not applicable (scalable by nature)

Maximum file size: 10 MB per upload.

Permissions

Operation	Required Permission
View images (gallery, metadata, file)	Authenticated
Upload new images	Administrator or Repository Articles write access
Edit image metadata	Administrator or Repository Articles write access
Delete images	Administrator or Repository Articles write access

All authenticated users can view and insert images from the library. Only users with Articles write access or Administrator rights can upload, edit, or delete images. Read access is intentionally broad — images embedded in articles must be loadable by any logged-in user who can read the article.

Image Lifecycle

When an image is deleted:

• The image is soft-deleted — the binary data is retained in the database but marked as deleted
• Any article referencing the deleted image will display a broken image indicator in the browser
• This is intentional — broken images are visible so writers can identify and fix broken references

To update an existing image (for example, after a UI redesign), delete and re-upload using the same name slug. All existing {ndi}/name references across articles and Custom Metadata fields continue to resolve correctly after re-upload.

Tip

Before deleting an image, search article content for the name slug (e.g., logogoeshere) to find all articles that reference it.

Next Step

Add or manage Article

Related Topics

Images Overview
Custom Metadata
Knowledge base Articles
Repository Model