---
title: "How to display a photo gallery | Tutorials - GoodBarber"
description: "Photo gallery A photo gallery shows your own pictures in a section of your app. Upload them from your computer, give them a title and a caption, set their order, and choose a layout that suits them. …"
canonical_url: "https://www.goodbarber.com/tutorials/content/how-to-display-a-photo-gallery/"
lang: en
---

# How to display a photo gallery | Tutorials - GoodBarber

[Back](https://www.goodbarber.com/tutorials/)

# How to display a photo gallery

## Photo gallery

A photo gallery shows your own pictures in a section of your app. Upload them from your computer, give them a title and a caption, set their order, and choose a layout that suits them.

## Add a Photos section

In My App, Structure, click Add a section at the end of the Menu… and choose Photos. Typing gallery finds it too.

Name the section, then click Add.

It joins your menu, still empty.

## Upload your photos

Open it: the Album holds the photos. Click Edit the content.

Add a photo opens your computer's files: select several photos at once.

Wait for the upload to finish… your photos arrive Published, each titled with its file name. Name your files before uploading, or rename them here.

## Titles and captions

Click a title to change it… and add a caption the same way. Both are saved right away.

In the app, a photo opens full screen, with its title and caption.

## Order and visibility

Drag a photo to change its place: your app shows them in this order.

To hide a photo without deleting it, set it to Not listed… it leaves the gallery until you set it back to Published.

With many photos, the list view shows their position. Select several to change their status, or delete them, at once.

## Design your gallery

In Edit the design, Visual Card shows one card per photo, with its title.

Thumbnail format sets the shape of the photos, up to their original shape.

Square makes a grid of square photos… and Ratio, a grid where each photo keeps its shape.

The Toolbar picks the actions offered on a photo: Share, Comments and Favorites. Give the icons a color that shows on your header.

Preview shows them on a photo.

Your photos are live as soon as they're uploaded. A new section reaches your published app once you publish it, with Publish my project.

## Related videos

[ContentHow to manage your app sections](/tutorials/content/how-to-manage-your-app-sections/)

![How to manage your app sections](https://portal.ww-cdn.com/portal_static/images/videos10.ee7c86369426.jpg)

[ContentHow to manage the GoodBarber CMS](/tutorials/content/how-to-manage-the-goodbarber-cms/)

![How to manage the GoodBarber CMS](https://portal.ww-cdn.com/portal_static/images/videos11.9831ea33bee9.jpg)

[ContentHow to copy CMS content](/tutorials/content/how-to-copy-cms-content/)

![How to copy CMS content](https://portal.ww-cdn.com/portal_static/images/videos12.9b67d27c14b9.jpg)

[ContentHow to manage comments](/tutorials/content/how-to-manage-comments/)

![How to manage comments](https://portal.ww-cdn.com/portal_static/images/videos13.c9a28ae5ce12.jpg)

[ContentHow to add categories to your sections](/tutorials/content/how-to-add-categoryfilters-to-your-sections/)

![How to add categories to your sections](https://portal.ww-cdn.com/portal_static/images/videos14.fd4d0e2c775b.jpg)

[ContentHow to add links in CMS sections](/tutorials/content/how-to-add-links-in-cms-sections/)

![How to add links in CMS sections](https://portal.ww-cdn.com/portal_static/images/videos15.a47e688ba735.jpg)

[ContentHow to manage PDF files](/tutorials/content/how-to-manage-pdf-files/)

![How to manage PDF files](https://portal.ww-cdn.com/portal_static/images/videos16.ef1bd6af4ffd.jpg)

[ContentHow to customize your 404 page](/tutorials/content/how-to-customize-your-404-page/)

![How to customize your 404 page](https://portal.ww-cdn.com/portal_static/images/videos17.2b57c18e0e71.jpg)

[ContentHow to create articles](/tutorials/content/how-to-create-articles/)

![How to create articles](https://portal.ww-cdn.com/portal_static/images/videos18.be5273fa02e6.jpg)