Model for simple image gallery?

what is the best prismic-way to model a simple image gallery ?

(using legacy builder, because nuxt3)
I have a simple custom type 'photos', which has a slize zone where I made slice 'Gallery'.
In the repeatable zone I have an image field and a title field.

in my frontend I'm rendering this page in which I map over the gallery items, that works.
But I want to be able to go to a detailed page of a gallery item, with it's own url (website.com/photos/uid-of-gallery-item).
I can't add a UID field to the slice.

How do I model for above situation ?
Thanks!

Hey Peter,

This should help:

Although heads up, converting legacy Slices to Slice Machine is still not possible even after we release Nuxt 3 support. I would recommend using Slice Machine anyway and having the extra packages installed to satisfy Slice Machines warnings until Nuxt 3 support is released.

Thanks.

Thanks for your reply. I will look into being able to use slice-machine anyway.

I have looked at the mentioned article before. But it doesn't give an answer to my question.
I see the model is made using a separate thumbnail field, and a large image field.
But how can i link to a detail page of this slice? It doesn't have an id or uid.

It looks like this is only a solution for having both thumbnail and big image url available in an overview, clicking the thumbnail could then show the bigger image in a lightbox or something similar.

I want a route to this specific slice. [websiteaddres]/[page-uid]/[slice-uid]

What is your use case for having the image on a separate page? If it's only to be viewed in large, then the lightbox as you suggest is the best option.

  • to show more details
  • to be able to send a direct link to the image-page
  • search engines to scrape each image page.

It's quite a common use case to have image gallery with overview + detail page for each gallery item with it's own direct url, right ?
Is this possible with Prismic?

It really depends on the user's needs for their gallery.

Images from Prismic are hosted from our imgix server to do automatic compression.

To have a page for each image you would need to download the image into your project and build pages from there, this would cause higher bandwidth consumption on your deployment server though. You save on these costs with imgix.

If you want the image to be under the website's URL structure, you may look into Nuxt Image Extractor.

1 Like