Theme Sandbox

Sample Post

Install the updated theme CSS and gallery JavaScript first. Copy everything below this introduction into a Bear Blog draft, not into a code block. The HTML is intentional: it supplies the layout classes Markdown images cannot express. Keep the HTML blocks intact, without blank lines inside their containers.

Sample photographs come from Picsum. Replace them with your own Bear Blog image URLs when ready.

Ordinary Markdown image

This image and ordinary captions should keep the original theme styling.

A mountain valley

Natural-size figure with caption

Mountains across a rocky landscape
A natural-size image with the existing centered caption style.

Standalone portrait, square, and wide figures

A traveler in a portrait-oriented waterside scene
Portrait: centered, uncropped, and height-limited.
A mountain valley cropped to a square
Square: a landscape photograph framed as a 1:1 crop.
A wide mountain landscape
Wide: fills the content width with a capped height.

Vertical stack

The first mountain view in a vertical stack
First photograph.
The second mountain view in a vertical stack
Second photograph.

Horizontal pair with automatic columns

The script detects two images and adds the two-column hint.

Mountain valley on the left Mountain scenery on the right

Horizontal trio with captions

Three columns on desktop become two on mobile.

A mountain valley
Valley.
A mountain ridge
Ridge.
A waterside scene
Water.

Four images use automatic columns rather than the two/three-image hints.

Valley in the first gallery cell Ridge in the second gallery cell Water in the third gallery cell Landscape in the fourth gallery cell

Portrait beside two vertically stacked landscapes

The explicit two-column hint stays in place even though there are three figures.

Tall waterside photograph spanning both rows
One portrait spanning two rows.
Upper landscape beside the portrait
Top of the landscape stack.
Lower landscape beside the portrait
Bottom of the landscape stack.

Wide photograph above a horizontal pair

A wide landscape spanning two columns
Wide photograph across both columns.
Lower-left mountain valley
Lower left.
Lower-right mountain ridge
Lower right.

Portrait-only horizontal stack

Both figures span two rows, even without landscape images to establish the row height.

Left portrait in a portrait-only pair
Left portrait.
Right portrait in a portrait-only pair
Right portrait.

Mixed portrait, wide, and square mosaic

Portrait with a bottom-biased crop
Portrait, focused at the bottom.
Wide landscape in the mosaic
Wide across two columns.
Square mountain valley in the mosaic
Square crop.
Regular landscape in the mosaic
Regular landscape.

Aspect classes directly on images

These spans work without figure wrappers or captions.

Bare portrait image spanning two rows Bare wide image spanning two columns Bare square image Bare regular landscape image

Crop focus comparisons

The same source photograph uses top, center, and bottom focus. Classes work on either the figure or its image.

Waterside scene cropped from the top
Top focus on the figure.
Waterside scene cropped from the center
Center focus on the image.
Waterside scene cropped from the bottom
Bottom focus on the figure.

Try arrows, dots, keyboard activation, swipes, and resizing after changing slides. Navigation wraps at both ends.

Mountain valley on the first slide
Slide 1: landscape, fitted without cropping.
Tall waterside scene on the second slide
Slide 2: portrait, fitted without cropping.
Wide landscape on the third slide
Slide 3: wide photograph.

This second carousel should work independently of the first.

Mountain scenery on the first automatic-track slide
First slide, no track wrapper in the source.
Valley on the second automatic-track slide
Second slide, using a div caption.

Each slide is a group of photographs. Grid captions and crop classes should still work.

Left square photograph on the grouped slide
Slide 1, left.
Right square photograph on the grouped slide
Slide 1, right.
Portrait on the mixed grouped slide
Slide 2, portrait.
Top landscape on the mixed grouped slide
Slide 2, upper landscape.
Bottom landscape on the mixed grouped slide
Slide 2, lower landscape.
First photograph in a vertical stack inside a slide
Slide 3, upper wide photograph.
Second photograph in a vertical stack inside a slide
Slide 3, lower wide photograph.

No arrows or dots should be added for a single slide.

A single mountain photograph
A one-slide gallery needs no navigation.

Live test checklist