Skip to main content

Implementation Details

Dynamic resizing

Event Propagation

Stopping event propagation is required on most on-click events on gallery items, to prevent clicks on e.g. an NSFW overlay heading to the artwork link or causing other on-click events to fire.

Div row calculations

Each time the gallery is refreshed (due to items being added, the screen being resized, etc), calculations are performed to lay out the gallery precisely. The main flow is like this.

For each row in the gallery, there is a base height value. This can be modified by the viewing user, but sets the baseline for calculating the size of each artwork in a row.

For each element in the gallery, a target width to display it at is calculated based on the base height of the div and the aspect ratio of the artwork. If the row already has elements, and adding a new element would take it over the maximum row width for the gallery, a decision is made:

  • If the new item would push the row's width a certain amount over the maximum width (based on a threshold percentage), then it is added to the next row instead of being added to the current one, and the row's height is increased to make it fit the gallery width.

  • If the new item would not push the row's width over the threshold, it is added to the current row, and the row's height is reduced to make it fit the gallery width.

These calculations proceed until all elements are done.

Last row exception

The last row in the gallery has an extra rule; to avoid it showing images at excessively high sizes, it has an additional threshold for calculating its height. The base height for it cannot go over this threshold (1.2 or so) multiplied by the base height.

Back to top