View customization

A view says how your site wants its wall to look. It is optional. A program that does not know it shows the default wall. The schema is view.schema.json.

Where to put it

All four places take the same shape.

Where	How
Manifest	the view field
Recipe	the view field
Level 1 page	<script type="application/json" data-wall-view>{ ... }</script> (the first one counts; invalid JSON is ignored)
Level 3	new Wall({ view, hooks })

If the same setting is given in more than one place, the order is: options of new Wall first, then the page, manifest or recipe, then the defaults. hooks is code, so it exists only on Level 3. It can choose which actions an item shows, change a button label, and replace the lines of the panel or the card label. The wall still draws everything and applies the limits below.

Example

"view": {
  "actions": {
    "favourite": { "label": "Favourite", "labelActive": "Favourited", "icon": "♡", "iconActive": "♥", "placement": "primary", "state": "favourited" },
    "cart": { "label": "Add to cart", "placement": "primary", "order": 2 },
    "compare": { "label": "Compare", "placement": "more" }
  },
  "panel": { "fields": ["title", "meta.price", "description"], "side": ["tags"], "metaLabels": { "price": "Price" } },
  "wall": { "rows": 4, "radius": 3, "card": { "width": 0.3, "height": 0.3 }, "labelFields": ["title", "meta.price"], "indicator": "favourite" },
  "theme": {
    "colors": { "accent": "#c9334f", "panel": "rgba(8, 8, 11, 0.85)" },
    "environment": { "preset": "night", "stars": true, "dim": 0.4 }
  },
  "strings": { "signin_on_site": "Sign in on :site first" }
}

Transport and display are separate. actions.<id> in the manifest says how a request is sent (URL, method, auth). view.actions.<id> only says how the button looks.

actions

By action id.

Field	Meaning
label, labelActive	Button text, and the text while the action is on. At most 24 characters.
icon, iconActive	One or two characters before the label. At most 4 characters.
placement	primary (in the column, at most 3), more (behind “More”) or hidden (no button).
order	Sort key. Lower comes first. Equal keys keep the order of the manifest.
style	primary (always filled) or secondary (filled only while the action is on).
confirm	true asks for a second press. false does not turn it off where the wall requires it.
state	Key in item.state that says the action is on. Default liked for like, else the action id.
count	Item field or item.state key with a number, shown after the label.

panel

Field	Meaning
fields	Lines of the info panel, in order: title, subtitle, creator, collection, description, likes, tags, badges, meta (every pair as Label: value) or meta.<key> (one pair). At most 8. Absent: title, creator, likes and description.
side	Which links the column beside the picture shows: creator, collection, tags. Default all three.
metaLabels	Labels for the keys of item.meta. Each at most 24 characters.

wall

Field	Meaning
rows	Rows of cards.
radius, arc	Distance of the wall from the viewer in metres, and how far around it goes in degrees.
card.width, card.height	Size of a card in metres.
label	hover (default) shows the label of the focused card, none shows nothing.
labelFields	Lines of that label: title, subtitle, creator, count or meta.<key>. At most 3.
badges	false stops item.badges[0] being drawn on cards. Default true.
indicator	Action id whose state draws the mark on the card. Default like. null: no mark.

theme

Field	Meaning
colors	bg, surface, surfaceHi, text, textSoft, muted, accent, accentStrong, accentText, panel. Hex (#abc or #aabbcc). panel may also be rgba(r, g, b, a).
font	A CSS font family.
environment	preset (studio, night, plain), colours top, horizon, bottom, floor (hex), stars (boolean), panorama (an image URL around the viewer) and dim (how much the panorama is darkened).

strings

An object of texts by key. They replace the built-in texts of the wall. Placeholders such as :site are filled in by the wall.

Limits

Setting	Allowed
wall.rows	whole number, 1 to 5
wall.radius	1.8 to 4.0
wall.arc	60 to 150
wall.card.width	0.25 to 0.6
wall.card.height	0.25 to 0.7
wall.rows × (card.height + 0.06)	at most 2.2 m. Extra rows are dropped.
wall.card.width	at least 0.1 × wall.radius. A narrower card is widened.
wall.labelFields	at most 3
panel.fields	at most 8
action label, labelActive, and metaLabels values	at most 24 characters
action icon, iconActive	at most 4 characters
theme.environment.dim	0 to 0.8
theme.environment.panorama	http or https only. The adapters drop any other value.
colours	hex only (panel also rgba(...))

The wall clamps a value outside these limits to the nearest allowed one and writes a [diazoma] view: warning to the console. It also moves a text colour that is hard to read on its background (contrast below 4.5:1) toward black or white. The validator reports a value outside the limits as a failure.

What a view cannot change

• Leaving VR, opening a page of the site and any action with mode: "deeplink" always ask for a second press.
• Text sizes are not configurable.

How the wall uses the actions

• Buttons are the actions the site declares, narrowed by item.actions when an item has it. A site that declares no action gets no action button. Without placement, the first two actions are in the column and the rest are behind “More”.
• follow follows the item’s collection from the column beside the picture. It becomes a column button only when the view gives it a placement.
• An answer with a state updates item.state, the button and the mark on the card.
• A 401, 403 or 419 answer shows the signin_on_site text. When the manifest has auth.login, the button then opens that page, with a second press. Any other failure shows the action_failed text.

Tip

The full list of text keys is in the wall’s default strings, packages/wall/src/strings/en.js.