Block
Image
A picture on the page — a logo, a signature, a stamp — sized and placed like any other block.
What it is for
An Image block shows one picture. The picture itself lives in your workspace's uploads and the block points at it, so the same file can be reused across blocks and templates without uploading it again. The picture can be fixed (the same in every document: a logo, a signature) or from data (a different one for each record: a product photo on each card of a catalogue).
Choose something else when:
- you want a coloured box or a ruled line rather than a picture — use a Rectangle or a Line;
- you want a scannable code — use a QR code or a Barcode;
- you want a chart — there is no chart block; see "A chart from your own system" below.
Add and edit it
- Pick Image in the block palette (group Media; searching "picture" or "logo" finds it). A fresh image block prompts you to choose a picture: the picker shows your uploads as thumbnails with a filter box, plus an Upload image… button for a new file.
- Once a picture is picked, the picker gets out of the way — it shows the picture small, its name and pixel size, a Replace… button, and a Clear button to take it back out of the block. The upload library only reopens when you click Replace… (or Cancel to close it again).
- Double-click the picture on the canvas to jump to the picker in the side panel; Replace image… in the block's menu (⋮) — or on right-click — does the same thing.
- Select a picture and it gets three handles on the canvas — right edge, bottom edge and the bottom-right corner — and dragging any of them resizes it, with the size in millimetres shown beside it. Width and height can also be typed under Size (mm). Use the anchor (pin) button if you want the picture at an exact spot on the page instead of in the flow; an anchored picture gets all eight handles and can be dragged anywhere on the page.
The first picture you pick into a fresh image block sizes the box to the picture's own proportions, so it does not arrive squashed into a default shape. Swapping the picture afterwards keeps the width you set and works the new height out from it.
What can be uploaded. PNG or JPEG, no larger than 10 MB — the two picture formats PDF and Word
files can include. A GIF, WebP or SVG picture, or a phone's HEIC photo, is refused with that reason,
and so is a file renamed to .png whose contents are another format: save it as PNG or JPEG first. A
GIF logo in a Word document you migrate is converted to PNG on the way in (its first frame, if it is
animated). Web addresses are never fetched: you cannot point an Image at a link to a picture on
the internet and have it loaded — upload the picture instead (more under "Settings").
Settings
| Setting | What it does | Default and notes |
|---|---|---|
| Source | Fixed picture shows the same picture in every document. From data takes each record's picture from a field of your data. | Fixed picture. |
| Image | The picture this block shows (fixed). Upload a new file or pick one you have already uploaded. | None — a fresh block asks you to choose. |
| Fit | Contain fits the whole picture inside the box with space around it. Cover fills the box and crops the overflow. Fill (stretch) stretches it to the box and will squash a picture whose shape differs from the box. | Contain. |
| Focus | Only with Cover: which part of the picture stays in view when it is cropped. | Centre. |
| Align | Left, Center or Right: which side the picture sits on when it is narrower than the space available. | Left. Does nothing while the picture is as wide as the space it sits in. |
| Size (mm) — width and height | The box in millimetres, with a lock between the two fields that keeps them proportional. Reset to original size puts the box back to the picture's own dimensions (never wider than the page allows). A width of Auto means the full available width. | Locked. |
| Source URL | Shown only when a migrated document brought a web address in with it. Clear it once you have uploaded the picture yourself. | — |
Like every block, an image also has the Box section (margin, border, padding, fill) and Visibility.
Fit and focus
"Contain" is the safe choice — it never crops and never distorts. With "Cover", a Focus control appears under Fit: a small copy of the picture with a point on it. The part of the picture around that point is the part that stays in view — move the point onto a face or a product and the crop keeps it. Drag the point, or press anywhere on the picture to put it there; with the point selected, the arrow keys move it 1% at a time (hold Shift for 10%), Home and End jump to the left or right edge, and Page Up and Page Down to the top or bottom. "Across" and "Down" show the same position as percentages you can type, and Centre puts the point back in the middle, which is where every picture starts. The canvas, the template thumbnails and the PDF, Word and HTML files all crop around the same point. A whole drag is one step for Undo; press Escape before letting go to put the point back. The point is kept when you switch to Contain or Fill, and applies again as soon as you switch back to Cover.
Proportions: the lock
Width and height stay proportional by default: change one and the other follows. The lock button between the two fields turns that off, and holding Shift while dragging a handle on the canvas flips it for that one drag. With the lock off and "Contain", a box that does not match the picture's proportions simply leaves blank space around it. The lock belongs to each picture and is saved with the template; it only changes how the picture resizes while you edit and adds nothing to the exported files. The lock and Reset to original size both need the picture's own dimensions, and say exactly which of four things is going on when they cannot work: no picture chosen yet, the picture is still being measured, it could not be measured, or the width is set to Auto.
Align versus the box width
A picture aligns only inside space wider than itself. If the box is as wide as the page's text area, Align has nothing to move; set a narrower width and Left, Center or Right take effect.
Pictures from data
A picture can take a different picture for every record. Put the picture inside a section that repeats for each record (a Repeat) or in a table's repeating rows, select it, and set Source to From data:
- Field — choose the field of your data that holds the picture. The record's own fields come
first (
item › photo), then fields of the whole document (shop › logo, the same picture on every card). Only text fields are offered. Nothing changes until you choose one — until then the fixed picture keeps printing. - Add a picture field — when your list has no field for pictures yet, this adds one (called
photounless you name it) to every record of the list and uses it straight away. One step for Undo. - Sample records — a line such as "2 of 4 sample records have a picture. The other 2 show the fallback picture." Show each record lists the sample records (the first 50) and why each one has no picture when it does not: empty, a web address, a format other than PNG or JPEG, or not a picture in this workspace. Each record has its own Sample picture list of your uploaded PNG and JPEG pictures, so you can see the card with real pictures without typing anything. That choice changes the sample data you are looking at, never the template's design.
- Fallback picture — optional: the picture a record shows when its own is missing or cannot be used. The canvas tags it "Fallback". When you switch an existing picture to From data, the picture it already had becomes its fallback.
- If a record has no picture — shown when there is no fallback: Show "Picture unavailable" (the default), or Leave the space empty. An empty space still keeps its size; the canvas outlines it and labels it "No picture for this record", and the exported files leave it blank.
- Write an expression instead — for a picture chosen by a formula rather than one field. It must
be written inside
{{ }}, for example{{ $data.item.photo }}; anything else is refused with that reason.
What a picture value may be. The id of a PNG or JPEG picture uploaded to this workspace (the
Sample picture list stores exactly that), or a small PNG or JPEG sent inline as
data:image/png;base64,…. A web address is never loaded, on the canvas or in any file — upload
the picture instead; a record whose value is a web address gets the fallback picture, or the marker
or empty space. The preview of a download says how many records had no usable picture. Switching
Source back to Fixed picture removes only the link to your data: the fit, focus point, size
and alignment stay.
A chart from your own system
There is no chart block: Ristmark does not draw charts from your numbers, and a chart in a document cannot be edited here. Draw the chart in the system that holds the numbers, save it as a PNG, and send it in as a picture from data:
- Add an Image where the chart goes and set Source to From data. For one chart per document, place it outside any Repeat and choose a field of the whole document. For one per record, place it inside the Repeat and choose a field of the record.
- Size the box to the chart's proportions and leave Fit on "Contain", so it is never cropped or squashed.
- When you generate, put each chart in that field as
data:image/png;base64,followed by the PNG's bytes in base64, at most 1 MB per chart. A chart you uploaded to this workspace can be sent by its id instead. A web address to a chart service is never loaded: that record gets the fallback picture, or the "Picture unavailable" marker.
The chart is a picture in every output: it is included the same way in PDF, Word and HTML files.
Its words are part of the picture, so they cannot be edited or searched; draw it with enough pixels to stay sharp at the printed size.
Examples
Each example is a complete template stored with this documentation and checked automatically. The fixed-picture examples point at a stand-in picture id — in your own template you choose one of your uploads.
A company logo
The example is image-1: an Image 40 mm wide and 15 mm high, Fixed picture, Contain, lock on,
above the line "Acme Trading SIA". Expected page: the logo at its true proportions in a 40 × 15 mm
box (blank space either side if it is not exactly that shape), then the company name. Dragging the
corner changes width and height together because the lock is on.
Catalogue pictures from data
The example is image-2: a Repeater over $data.products (each record called product), each copy a
Row with a 30 mm column holding an Image and an Auto column holding the name and price. The Image's
Source is From data, Field product › photo, Fit Cover with Focus set a little above the middle
(30% down), a fallback picture, and If a record has no picture left at the marker. Sample data (the fixture carries a tiny inline PNG for the first two photos):
{ "products": [
{ "name": "Oak table", "price": 480, "photo": "<a PNG sent inline or the id of an upload>" },
{ "name": "Reading lamp", "price": 59.9, "photo": "<a PNG sent inline or the id of an upload>" },
{ "name": "Gift card", "price": 25 }
] }
Expected page: three cards. The first two show their own pictures, cropped to 30 × 30 mm around the focus point; "Gift card" has no picture so it shows the fallback picture (the Sample records line says "2 of 3 sample records have a picture"). If there were no fallback, it would show "Picture unavailable".
A signature
The example is image-3: "Yours sincerely," then a 50 × 20 mm Image, Contain, Align Right,
lock on, then "Janis Ozols" right-aligned. Expected page: the signature picture sits at the right
edge above the name. It is the same Image block as the logo; only Align differs.
Output differences
- PDF, Word and HTML: PNG and JPEG pictures are included in all three, cropped around the same focus point.
- A picture that is missing is never silently blank: the page shows a red dashed marker, in the editor and in the exported file alike. The same happens if the upload it points at was deleted — the side panel says so too.
- A picture that came in from a migration may carry a web address rather than an upload. An HTML file loads it from that address, but a PDF or Word file does not: it prints a marker with the address in its place. Upload the file itself to include it everywhere. If a block has both, the upload wins.
- A WebP picture a migrated Word document carried, or a GIF or WebP uploaded before the PNG-or-JPEG rule, is left out of PDF and Word files: a PDF prints a small marker, a Word file a marker line. The canvas shows the same marker, reading Image (not PNG or JPEG). An HTML file still includes the picture. Replace it with a PNG or JPEG copy to include it everywhere.
- The lock adds nothing to the exported files.
Troubleshooting
- A red dashed marker where the picture should be. No picture is chosen, the upload was deleted, or the format is not PNG or JPEG. Open the picker (double-click the picture) and choose or upload a PNG or JPEG.
- The picture is squashed. Fit is on Fill (stretch), or the lock is off and Contain is not involved. Switch to Contain (never distorts) or Cover (crops, never distorts).
- Cover cut off the face or product. Move the Focus point onto the part that must stay in view.
- Align does nothing. The picture is as wide as its space. Set a narrower width first.
- A product shows "Picture unavailable" or the fallback. Its value is empty, a web address, not a PNG or JPEG, or not a picture in this workspace. Show each record under the Source setting says which and why. Web addresses are never loaded — upload the picture.
- My GIF/SVG/HEIC upload was refused. Only PNG and JPEG are accepted. Save it in one of those formats first.
- The width and height will not stay proportional. The lock may be off, or the width is Auto, or the picture could not be measured; the lock's tooltip says which.