Dynamic Page variable display

Ask the community
, , ,
1

Hi everyone,

I’m working on a dynamic item page in Wix Studio, where each project has up to four images stored in the CMS. However, some projects have fewer than four images, and when an image field is empty, Wix replaces it with a default placeholder image (a sand dune).

I want to achieve the following:

  1. If an image exists in the CMS, it should display normally.
  2. If an image field is empty, the corresponding image box should be completely hidden (not just a placeholder).
  3. The layout should adjust dynamically so that empty image slots don’t leave blank spaces or gaps.

I’ve tried checking for a “Hidden on Load” option, but I don’t see it in the properties panel. I also looked into conditional rules using the interactions panel but haven’t figured out the right way to do it.

Is there a way to set up a condition where only images with content appear while hiding empty ones? Would using repeaters or a container box be a better approach?

Any suggestions would be greatly appreciated! Thanks in advance.

Product:
wix studio

2

Are your images stored within four single-image fields? If so, is there a particular reason for having them in separate fields rather than a gallery?

In any case, here’s a snippet:

const dataset = $w('#dynamicDataset')
dataset.onReady(() => {
    const item = dataset.getCurrentItem()
    if (!item.image1) $w('#image1').hide() // or .collapse()
})
3

Dean, thanks for the help, the reason I didn’t chose a gallery is because there’s very little control over the way the elements appear. Other than the presets the display of the content within the gallery, for example, having images of various sizes and being able to move them around in the on the page let’s say in a freeform manner,doesn’t seem possible.