Gallery Categories with Navigation

[Norm]

I am trying to combine a sidebar navigation with different categories of signage and a gallery displaying on the same page with the relevant gallery of images that change with nav item selections. Cannot seem to find out how to do this in docs or community searches. see attached screen shot of an example from another web site that I am trying to create.

[famousmag]

Hey @Norm,

Normally you have a variable or hidden input (eg selectedCat) to hold the selected category id.

Then on the gallery source server connect you have a parameter input (eg. selcat) .

Then n category click,

1. set the selectedCat= category_id
2. load serverconnect and set parameter selcat= selectedCat

Now, it depends on if you want the gallery to show all the gallery if no category is selected toy have to make the GET_selcat optional (if is given show only this category otherwise show all categories)

Unfortunately I’m away from pc to send you screenshots but if you send me I can help more if you need it.

Hope it helps.

[Sorry_Duh]

You can also use URL Params (mentioning this as it’s a nav sidebar) so that for example

fakepage.com/category/1
fakepage.com/category/2

if your categories are all unique names you could even do:

fakepage.com/category/categorynameone
fakepage.com/category/categorynametwo

These params would then be passed into your server actions and used in the query returning images (or however they are stored could also filter client side in something like a data view depends on the setup)

Here is the docs for URL params to filter a database query:

Filtering Database Query with an URL Parameter

If you don’t know how to define an URL parameter on your page, please check this tutorial as you will need this later. First, we need to create a server action. Open the server connect panel and click the add new button: [image] We call it product_details: [image] Then right click GET under Globals menu: [image] Add variable: [image] This variable will be used to filter our database query. Let’s call it: productid (NOTE - it needs to be lowercase). [image] Right click steps: [i…

Please note that this doc is very old so a few things are no longer required or have changed a little, for example the database connection step no longer needs to be added you define that once in GLOBALS now so you can ignore those steps and when adding variables in the API action they go under INPUTS now but hopefully this gives you a general idea of how it works.

[ben]

If this is what you want to do:

Then create a database table and sub table as follows:

Then create a read API:

Add

1. the data source to the page
2. the data detail to the page

Finish off with the layout of the page where the left column contains a repeat area for the name of the gallery or similar and the right column contains a repeat area for the images.

If you have further questions, please come back here.

[Norm]

Thanks everyone will have to review the guidance and get back to you. Making more sense now at least,
wasn’t sure how to approach building the structure to get started.