Image library

VoxelSite includes background and gallery images in assets/library/. The AI uses filename metadata to select images for your site's colors and subject. You can also upload your own.

The bundled image files live on your server.

What's included

The library lives in assets/library/ and contains two collections:

Backgrounds (60 images)

The 60 bundled JPEG backgrounds measure 1456 × 816 px. Use them for wide page backgrounds.

Four categories:

Gallery images (72 images)

The 72 bundled gallery JPEGs measure 1024 × 1024 px. Use them in content sections, grids or portfolios.

Categories span common business types:

How the AI selects images

The AI receives filename metadata about subject, tone, mood and suitable text contrast. Backgrounds include a type such as texture or atmosphere; gallery images include categories such as food-bakery.

Use those details when requesting an image. For example: "Use a warm bakery photo on the about page." Check the selected image and text contrast in preview.

Reviewing image choices

The generation prompt asks the AI to prefer suitable uploads, match image tone and keep text legible. Review the result before publishing:

• Check that the image suits the page content.
• Check text contrast over backgrounds.
• Replace unwanted repeated images.
• Check image descriptions in the HTML alt attributes.

If the choice is wrong, name the uploaded file or library image in your next request.

The filename convention

Library filenames carry metadata for the AI. Use underscores to separate fields and hyphens to join words within a field. Local library additions need no database entry.

Background filenames

vs-bg_{subject}_{type}_{mood}_{tone}_{contrast}.jpeg

Example: vs-bg_amber-bokeh_atmosphere_warm_dark_light-text.jpeg This names an atmosphere image with warm amber bokeh, a dark tone and suggested light text.

Gallery filenames

vs-gal_{subject}_{categories}_{tone}_{contrast}.jpeg

Example: vs-gal_crusty-loaf_food-bakery_dark_light-text.jpeg This names a crusty loaf in the food/bakery category, with dark tones and suggested light text.

How parsing works

The engine splits filenames on underscores. The segment count determines the type:

• 6 segments → background (vs-bg)
• 5 segments → gallery (vs-gal)

Add a correctly named file to the matching library directory. VoxelSite scans local library filenames when preparing a new AI request.

Adding your own images

Choose regular uploads for one site, or add named files to this installation's library.

Option 1: upload as regular assets

Upload photos, logos or product images through Assets. Studio stores them in the private draft at _studio/preview/assets/images/. Pages use the relative assets/images/ path. Check Preview, then publish to expose the files on the live site.

Option 2: add to the library

The shipped library is a read-only authoring resource. Custom library files require a deliberate server-side customization; for normal site work, use Assets. To extend a development installation’s library:

1. Create a JPEG image. Suggested dimensions for new files:

   • Backgrounds: 1920 × 1080 px (16:9)
   • Gallery: 800 × 800 px (1:1)

   These suggestions differ from the bundled files listed above.

2. Name the file following the convention:

   • Background: vs-bg_{subject}_{type}_{mood}_{tone}_{contrast}.jpeg
   • Gallery: vs-gal_{subject}_{categories}_{tone}_{contrast}.jpeg

3. Drop the file into the correct directory:

   • Backgrounds: assets/library/backgrounds/
   • Gallery: assets/library/gallery/

4. Ask Chat to use the image and check the preview.

For a similar look, use muted colors, soft lighting and one main subject. Choose a different style when your site needs it.

Creating images with MidJourney

The library uses MidJourney images. The original prompt examples below retain their version flags. Use them as starting points, then inspect the output before adding a file.

Backgrounds

The original background examples use these parameters:

--ar 16:9 --v 7 --s {stylize}

Use --s 100 for textures and gradients, --s 180 for abstracts and atmosphere.

Textures

Flat surface photographs shot from above. Use them behind text when the contrast remains readable.

Seamless flat texture photograph shot from directly above, perfectly
orthographic perspective with no angle or distortion, studio lighting
with soft even diffusion. {DESCRIPTION} filling the entire frame edge
to edge, {SURFACE DETAIL}, no objects, no context, texture only
--ar 16:9 --v 7 --s 100
--no text, words, letters, logos, watermarks, people, faces, hands,
    objects, furniture, room, depth of field, bokeh, angle, perspective

Example: Replace {DESCRIPTION} with "warm sandstone surface with fine grain" and {SURFACE DETAIL} with "natural weathering patterns, soft yellow-ochre tones."

Gradients

Smooth color transitions with no shapes or objects. Pure abstract color fields.

Editorial photography style, minimal composition, premium aesthetic,
no people. Soft gradient transitioning from {COLOR A} to {COLOR B}
to {COLOR C}, smooth continuous color flow, no shapes, no objects,
pure abstract {warm|cool} color field, {FEELING}
--ar 16:9 --v 7 --s 100
--no text, words, letters, logos, watermarks, people, faces, hands,
    objects, furniture, landscape

Example: "...from deep amber to soft ochre to warm cream, smooth continuous color flow, no shapes, no objects, pure abstract warm color field, luxurious and calm."

Abstracts

Artistic shapes and organic forms. More visual interest than gradients, but still work as backgrounds.

Editorial photography style, soft lighting, minimal composition,
premium aesthetic, no people. {DESCRIPTION}, {TONES AND COLOURS},
{TEXTURE/MOVEMENT}, no context, isolated against soft {light|dark}
background
--ar 16:9 --v 7 --s 180
--no text, words, letters, logos, watermarks, people, faces, hands,
    UI elements, furniture, room

Example: "...flowing silk fabric caught mid-motion, deep burgundy and bronze tones, liquid rippling texture with soft highlights, no context, isolated against soft dark background."

Atmosphere

Environmental scenes with light, weather or open space.

Editorial photography style, soft lighting, minimal composition,
premium aesthetic, no people. {DESCRIPTION}, {LIGHTING AND MOOD},
{COLOUR PALETTE}, {FEELING}
--ar 16:9 --v 7 --s 180
--no text, words, letters, logos, watermarks, people, faces, hands,
    UI elements, furniture, room

Example: "...early morning fog over still water, golden hour side lighting with long shadows, muted amber and grey palette, contemplative and serene."

Gallery images

The original gallery examples use this preamble and these parameters:

Editorial photography, soft natural lighting, muted desaturated tones
with slightly warm color grade, minimal composition, no people.
{SPECIFIC SUBJECT DESCRIPTION}, {LIGHTING DETAIL}, {MOOD/FEELING},
editorial {CATEGORY} photography
--ar 1:1 --v 7 --s 150
--no text, words, letters, logos, watermarks, people, faces, hands,
    UI elements, clutter

Additional negative prompts by category:

• Product shots (skincare, tools): add , branding to negatives
• Drink shots: add , bottles if focusing on glassware

Example (food/bakery): "Editorial photography, soft natural lighting, muted desaturated tones with slightly warm color grade, minimal composition, no people. Freshly baked sourdough loaf on a wooden board, warm side lighting casting gentle shadows, rustic and inviting, editorial food photography --ar 1:1 --v 7 --s 150 --no text, words, letters, logos, watermarks, people, faces, hands, UI elements, clutter"

Post-processing

After generating in MidJourney:

1. Resize to your chosen dimensions. The suggestions above are for new additions.
2. Adjust colors to fit your site.
3. Export as JPEG and check quality and file size.
4. Name the file using the library convention.

Consistency tips

The bundled images use muted colors, soft lighting and simple compositions. The original prompts exclude people and embedded text.

Use similar choices when extending this library. Check each file for unwanted text, logos or visual defects before adding it.

Overriding with your own images

Upload your photos through Assets, then ask Chat to replace a named library image with an uploaded file. Check the preview before publishing. If the replacement is wrong, include the exact file path in your next request.