Skip to content

Demo vault

Every screenshot and code block on this page comes from the bundled demo vault.

Download the English demo vault

Quick start ​

Put three image lines next to each other and they become one gallery row — no parameters, no file restructuring.

The smallest usable note ​

markdown
![Fjord](assets/photo/01-fjord.jpg)
![Ridge](assets/photo/02-ridge.jpg)
![Valley](assets/photo/03-valley.jpg)

Three consecutive lines with no blank line between them become one equal-height gallery row in reading view:

Three photos of different ratios share one gallery row, top and bottom edges aligned

The originals are 3:2, 3:4 and 4:3. The plugin derives each cell's width from one shared row height: the landscape gets wider, the portrait narrower, and the top and bottom edges line up exactly. Nothing is stretched and nothing is cropped.

Scroll through a whole page ​

That is one ordinary note scrolling end to end: a gallery, a right-hand float with wrapping text, a crop comparison and two image groups with different rhythms — and the source contains no pixel sizes at all. Click the poster to play the clip.

Two more ​

markdown
![Road](assets/photo/04-road.jpg)
![Castle](assets/photo/10-castle.jpg)

Two images side by side get a row height of about one third of the column, taller and more detailed than three. The count, the ratios and the column width together decide the row height — you never specify a number.

Three common operations ​

I want toHow
Give one image its own rowSeparate it with prose or a heading, or write ag:isolate
Choose how many images per rowWrite ag:rows=2,2 on the first image of the group
Change a single image's widthDrag its bottom-right corner in Live Preview; releasing writes ag:width

Next ​