Photo Gallery

Your photos, sharp, on your own site

The Photo Gallery shows your photos on your website as rows, an even grid, columns, a row that scrolls sideways, or one photo at a time. Each photo is kept at full resolution exactly as you sent it, so it stays sharp on any screen, and a visitor can open any photo large, step through the rest and zoom in.

Add your photos

1. Open the Content tab. The Photos card is there.
2. Press Add photos, or drop them on the card. Pick as many as you like at once. JPEG, PNG, WebP, AVIF and GIF all work, and HEIC in Safari, up to 100 MB each. A bar shows how far the upload has gone.
3. Put them in order. Drag a photo to a new place in the grid of small pictures. With a keyboard, Move earlier and Move later do the same.
4. Click a photo to give it its own settings. Under the grid you can write its title and caption, say what a screen reader should read, give it its own crop and corners, and click on the photo to choose the point that stays in view when it is cropped.

Start from a template

Every Photo Gallery starts from a template: Contact sheet, Studio grid, Masonry wall, Night gallery, Filmstrip or Exhibition, each in a dark and a light version. The Templates tab, first in the editor, shows them all. One click puts a template on your widget straight away. Your photos and words stay; only the look changes, and Undo takes it back.

Arrangement, and how each photo looks

On the Design tab, Arrangement chooses the layout:

1. Rows, each photo its own shape, nothing cropped. Every row is fitted to the width at about the Row height you choose.
2. An even grid. Set the Columns, and Crop every photo to one shape. A crop is a view of the photo, never a cut file.
3. Columns, each photo its own shape. A masonry wall, photos stacked in columns at their own heights.
4. One row that scrolls sideways. Visitors swipe or use the arrows.
5. One photo at a time. A slideshow with arrows and dots. Moves on by itself turns the photos on their own, with a Pause button always shown. Anyone whose device asks for less motion sees it still.

Under the same tab you set the space between photos, corner radius, what happens under the pointer, and the titles: shown on the photo or under it, or only under the pointer.

A photo opened large

With A click opens it large on, a click on a photo opens it full screen, with arrows, swipe and zoom up to the full original. By default the photo grows out of the one that was clicked and shrinks back into it when it closes; How it opens can be set to At once instead, and visitors who ask for less motion get a short fade.

1. Edit the opened photo with its own tools. Above the preview, the View switch has Gallery and Opened photo. Choose Opened photo and the preview shows a photo opened large, with the tools for its background, title, caption, count, close button, zoom button and arrows.
2. Go back to the gallery. Choose Gallery on the same switch, and the preview and the tools are the gallery's again.

Turn off right-click saving stops the casual save. Anyone can still take a screenshot.

Two screens: Desktop and Mobile

Above the preview is a switch with two choices, Desktop and Mobile. Every design setting is kept for each of them separately, so the widget can be laid out one way on a computer and another on a phone. A tablet is drawn from the Desktop settings. The photos are shared by both.

A click on any part of the widget in the preview opens that part's own tools, and every section of tools has its own Undo.

Your files

Every photo you upload is kept in your account, not in one widget, so you can use it again anywhere. In the Photos card, Your files lists everything you have uploaded before; pick photos from there and they are added with nothing uploaded twice. Your account page shows how much space your files take.

Publish and put it on your site

1. Press Publish changes, at the top right. It lists what you changed and asks once. Publish sends it.
2. Copy the code. The window that says your widget is live has the embed code and a Copy code button. The same code is on the Settings tab, and on the dashboard as Copy embed on the widget's card.
3. Paste it once, where the widget should appear. It is a frame and a short script together; keep both. A page that already has the code picks up every later publish within a minute. Embedding on your site shows where to paste it on each website builder.

If something goes wrong

A photo did not upload. The message under the Photos card says which one and why. A file over 100 MB, or a kind of file that is not a photo, is turned away; the others still go.

A face is cut off in the grid. Click that photo on the Content tab, then click on the face in its picture. That point stays in view however the photo is cropped.

Anything else: hello@dreamwidget.com, and tell us the widget's name.