docs reference

[[images]]

Images

By Sheriff Docs ~ 9 min read

Sheriff makes it easy to add images; pretty much all you need to do is upload an image into the right directory, and then put the markup in your content where you want the image to appear. You can choose between three alignments and several sizes.

File Location

Images for the sheriff portal go here:

site/
└── portals/
    └── sheriff/
        └── public/
            └── images/
                └── my-image.png

site/
└── portals/
    └── sheriff/
        └── public/
            └── images/
                └── my-image.png

For another portal, use that portal's folder:

site/portals/everwind/public/images/
site/portals/goblin/public/images/
site/portals/vekke/public/images/

site/portals/everwind/public/images/
site/portals/goblin/public/images/
site/portals/vekke/public/images/

Do not put images in content/.

Do not create markdown pages for images.

Syntax

You can "link" to any image in your images folder by using wiki syntax. This is almost identical to Mediawiki image syntax, which a few exceptions (size and alignment are positionally swapped).

[[image:filename|size|align|caption]]

[[image:filename|size|align|caption]]

Example:

[[image:House_andergard_emblem.png|thumb|right|Emblem of House Andergard]]

[[image:House_andergard_emblem.png|thumb|right|Emblem of House Andergard]]

The image syntax has four parts:

Part	Required	Example	Meaning
`filename`	yes	`House_andergard_emblem.png`	File path inside `public/images`
`size`	yes	`thumb`	Image size class
`align`	yes	`right`	Image alignment
`caption`	no	`Emblem of House Andergard`	Caption text shown under the image

Filename

The filename is relative to public/images.

If the file is here:

site/portals/sheriff/public/images/emblem.png

site/portals/sheriff/public/images/emblem.png

write:

[[image:emblem.png|thumb|right|House emblem]]

[[image:emblem.png|thumb|right|House emblem]]

If the file is here:

site/portals/sheriff/public/images/houses/andergard/emblem.png

site/portals/sheriff/public/images/houses/andergard/emblem.png

write:

[[image:houses/andergard/emblem.png|thumb|right|House emblem]]

[[image:houses/andergard/emblem.png|thumb|right|House emblem]]

Do not include public/images/ in the image link.

Correct:

[[image:castle.png|thumb|right|Castle]]

[[image:castle.png|thumb|right|Castle]]

Wrong:

[[image:public/images/castle.png|thumb|right|Castle]]

[[image:public/images/castle.png|thumb|right|Castle]]

Sizes

Sheriff supports these image sizes:

Size	Width	Use
`icon`	`32px`	Small symbols, coins, tiny emblems
`mini`	`48px`	Small marks, seals, compact field images
`thumb`	`260px`	Standard article images
`half`	`420px`, max `50vw`	Larger floated images
`full`	`100%`, max `820px`	Maps, banners, wide images

Examples:

[[image:coin.png|icon|center|Anderian Pound]]
[[image:house-emblem.png|mini|center|House emblem]]
[[image:castle.png|thumb|right|Deepwall]]
[[image:portrait.png|half|right|Queen Andera]]
[[image:region-map.png|full|center|Map of the region]]

[[image:coin.png|icon|center|Anderian Pound]]
[[image:house-emblem.png|mini|center|House emblem]]
[[image:castle.png|thumb|right|Deepwall]]
[[image:portrait.png|half|right|Queen Andera]]
[[image:region-map.png|full|center|Map of the region]]

Alignment

Sheriff supports these alignments:

Align	Behavior
`left`	Floats the image left
`right`	Floats the image right
`center`	Centers the image block

Examples:

[[image:relic.png|thumb|left|Ancient relic]]
[[image:portrait.png|thumb|right|Character portrait]]
[[image:map.png|full|center|Regional map]]

[[image:relic.png|thumb|left|Ancient relic]]
[[image:portrait.png|thumb|right|Character portrait]]
[[image:map.png|full|center|Regional map]]

full images are centered by the theme.

Captions

The fourth part is the caption:

[[image:map.png|full|center|Map of Andermark]]

[[image:map.png|full|center|Map of Andermark]]

Caption:

Map of Andermark

Map of Andermark

To render an image with no visible caption, leave the fourth part empty:

[[image:divider.png|full|center|]]

[[image:divider.png|full|center|]]

Standard Article Image

[[image:House_andergard_emblem.png|thumb|right|Emblem of House Andergard]]

[[image:House_andergard_emblem.png|thumb|right|Emblem of House Andergard]]

Use this for most article images.

Map Or Banner Image

[[image:Andermark_current.png|full|center|Andermark in red]]

[[image:Andermark_current.png|full|center|Andermark in red]]

Use full and center for maps, diagrams, banners, and large reference images.

Small Field Images

Use icon or mini for small images inside pattern fields:

currency = [[image:Anderian_Pound.png|icon|center|Anderian Pound]]
emblem = [[image:House_andergard_emblem.png|mini|center|House Andergard]]

currency = [[image:Anderian_Pound.png|icon|center|Anderian Pound]]
emblem = [[image:House_andergard_emblem.png|mini|center|House Andergard]]

Images In Patterns

Patterns can contain image syntax.

For a wide image row, prefix the field name with _:

::: pattern vertical Region
_image = [[image:Andermark_current.png|thumb|center|Andermark in red]]
government = monarchy
leadership = [[House Andergard]]
capitol = [[Deepwall]]
:::

::: pattern vertical Region
_image = [[image:Andermark_current.png|thumb|center|Andermark in red]]
government = monarchy
leadership = [[House Andergard]]
capitol = [[Deepwall]]
:::

_image renders with the visible label image, but the image value spans the full pattern width.

Use this for infobox header images.

Common Mistakes

Including Too Much Path

Wrong:

[[image:site/portals/sheriff/public/images/castle.png|thumb|right|Castle]]

[[image:site/portals/sheriff/public/images/castle.png|thumb|right|Castle]]

Wrong:

[[image:public/images/castle.png|thumb|right|Castle]]

[[image:public/images/castle.png|thumb|right|Castle]]

Correct:

[[image:castle.png|thumb|right|Castle]]

[[image:castle.png|thumb|right|Castle]]

Wrong Filename

These are different filenames:

House_andergard_emblem.png
House Andergard Emblem.png
house_andergard_emblem.png

House_andergard_emblem.png
House Andergard Emblem.png
house_andergard_emblem.png

Use the exact filename.

Missing Pipe Parts

Use all four pipe-separated parts:

[[image:filename|size|align|caption]]

[[image:filename|size|align|caption]]

If there is no caption, keep the final pipe:

[[image:filename.png|thumb|right|]]

[[image:filename.png|thumb|right|]]

Modules Involved

Trailboss - converts image wiki syntax into image HTML.
Stagehand - copies portal public assets into the generated site.