Dropl
Get started

Projects layout

Turn a showcase into a portfolio, with a page for each project and its own photos, description, and details.

A Projects showcase is a portfolio. Instead of one set of photos, it holds projects: each one has a title, a subtitle, a description, a cover, its own photos and videos, and details like square footage or the year it was finished. On the website, visitors see a card for each project and open its page right inside the embed.

Your clients can add and edit projects too, from the dashboard or their phone.

Create a Projects showcase

  1. In Media, click New showcase.
  2. Under Type, choose Projects.
  3. Give it a title, like "Our work", and click Create showcase.

You can switch a showcase between Gallery and Projects in Display while it's empty. Once it has photos, videos, or projects, the type stays as it is.

Add projects

  1. In the showcase, click Add project.
  2. Type a title and, if you want, a subtitle (like "Custom Home · Zebulon, NC") and a description.
  3. On the project's page, add photos and videos the same way as in a gallery: drag them in, or use Choose photos and Add videos.

Each project's page also has:

  • Change cover: pick which photo shows on the project's card. Without a choice, the first photo is the cover.
  • Categories: tag projects so visitors can filter them, like "Kitchens" or "Decks". Create categories from Manage categories on the showcase.
  • Advanced: the project's web address name (its slug), used in links like /work/lakeside-kitchen.

Drag projects in the list to change their order, or use the ⋯ menu next to each one. To move photos between projects, select them and click Move to project.

A project only shows on the website once it has at least one photo or video ready. Until then, the list says Not on your website yet.

Note: Deleting a project deletes its photos too. Its videos stay in the site's library.

Project details

Project details are the facts every project in the showcase fills in, like "Square feet" or "Year finished". Owners, Admins, and Members define them once per showcase; clients fill in the values on each project.

Open the showcase's ⋯ menu and choose Project details. Each showcase can have up to 8 details. The types are Short text, Number, Single select, Year, Date, and Link:

  • Number details can have a unit, like "sq ft", shown after the value.
  • Select details pick from a list of options you define, like the project type.
  • Turn on Show on project cards to show a detail under the title on each card, for up to 2 details.

Click Review and save to see the changes before they're saved. Removing a detail, or an option that projects use, clears those values; the review says how many projects are affected before anything is saved.

Embed it

Click Get embed code in the showcase. The default snippet shows a card for every project. Clicking a card opens the project in the embed, and the browser's back button returns to the list:

<div data-dropl-showcase="k3p9vlm2"></div>
<script src="https://www.dropl.io/embed/showcase.js" async></script>

Under Show, you can also pick:

  • Only … projects: just the projects in one category, without filter tabs.
  • One project's page: a single project, for a page about that project. The snippet adds a data-project attribute with the project's slug:
<div data-dropl-showcase="k3p9vlm2" data-project="lakeside-kitchen"></div>
<script src="https://www.dropl.io/embed/showcase.js" async></script>

If the website already has a page for each project, type its address in Link cards to your own project pages, with {slug} where the project's slug goes. Cards then link to those pages instead of opening the project in place. The snippet adds a data-project-url attribute:

<div data-dropl-showcase="k3p9vlm2" data-project-url="/work/{slug}"></div>
<script src="https://www.dropl.io/embed/showcase.js" async></script>

The address can be a path on the same website, like /work/{slug}, or a full https:// link. On each of those pages, embed that project with data-project.

Tip: Changing a project's slug changes its address. Update any links or data-project snippets that use the old one.