# Help recreating Classic site - Content Switching

**URL:** <https://forums.realmacsoftware.com/t/help-recreating-classic-site-content-switching/49917>\
**Category:** Elements\
**Created:** [August 18, 2025, 4:27pm UTC](https://forums.realmacsoftware.com/t/help-recreating-classic-site-content-switching/49917 "2025-08-18T16:27:35Z")\
**Posts on this page:** 4\
**Page:** 3

<div class="post-metadata">

**Author:** ![elementsbot](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/elementsbot/32/33134_2.png) [@elementsbot](https://forums.realmacsoftware.com/u/elementsbot)\
**Post date:** [August 21, 2025, 9:58am UTC](https://forums.realmacsoftware.com/t/help-recreating-classic-site-content-switching/49917/41 "2025-08-21T09:58:14Z")

</div>

Hey @Cablecar69—welcome to the party! 🎉 You want some real, practical help getting started with creating a custom component in RapidWeaver Elements? You’ve come to the right bot.

Let’s break it down, step-by-step, **super basic** , with links to docs and videos:

* * *

## 🛠 How To Create a Custom “Gallery Switcher” Component in Elements

### **1. Where do I do this?**

Open your Elements project.  
On the left sidebar, under “Components,” click the **+** next to “Custom.”  
Choose **New Component** → **From Scratch** (HTML).

You’ll get a new folder (component bundle) with two key files:

- `index.html`
- `properties.json`

* * *

### **2. The Docs:**

The best way to learn is the [Elements Custom Components guide](https://docs.realmacsoftware.com/elements-docs/custom-components/introduction).

- See also [API: Properties](https://docs.realmacsoftware.com/elements-docs/elements-language/api-component-properties)

Want to see the official video?

- [Building Custom Components (YouTube)](https://www.youtube.com/watch?v=51i_Xnv-oZ0)

* * *

### **3. You want a product image switcher? Here’s the cheat code:**

#### **A. Paste this into `properties.json`:**

```json
{
  "groups": [
    {
      "title": "Product Images",
      "icon": "photo",
      "properties": [
        { "title": "Main", "id": "img1", "image": {} },
        { "title": "Side 1", "id": "img2", "image": {} },
        { "title": "Side 2", "id": "img3", "image": {} },
        { "title": "Detail", "id": "img4", "image": {} }
      ]
    }
  ]
}

```

_(Dan/PMUK style—because it works best in real life! You can change titles/IDs as needed.)_

#### **B. Paste this into `index.html`:**

```html
<div x-data="{ selected: 0, images: ['{{img1}}', '{{img2}}', '{{img3}}', '{{img4}}'] }">
  <div class="border-4 border-gray-200 rounded-lg p-2 mb-4 shadow-lg bg-white flex justify-center items-center max-w-md mx-auto">
    <img 
      :src="images[selected]" 
      alt="Product Image"
      class="object-contain max-h-96 w-full rounded transition-all duration-300"
      x-show="images[selected].length"
    >
    <span x-show="!images[selected].length" class="text-gray-400 italic">No image selected</span>
  </div>
  <div class="flex justify-center gap-2">
    <template x-for="(img, idx) in images" :key="idx">
      <button 
        @click="selected = idx"
        :aria-current="selected === idx"
        class="border-2 rounded w-20 h-20 overflow-hidden border-transparent focus:outline-none focus:ring-2 focus:ring-blue-400"
        :class="selected === idx ? 'border-blue-500 ring-2 ring-blue-400' : 'border-gray-200'"
        x-show="img.length"
      >
        <img :src="img" alt="" class="object-cover w-full h-full"/>
      </button>
    </template>
  </div>
</div>

```

#### **C. Save both files!**

Now, drag your custom component onto a page, look in the sidebar, and magic:  
**You can drag and drop image resources right into those “Main”, “Side 1”, etc. picker wells—and the thumbnail/gallery pattern just works!**

* * *

### **4. Need visual help?**

- [Here’s a quick walkthrough video from Realmac](https://www.youtube.com/watch?v=51i_Xnv-oZ0)
- Ask here, or click the little bot-head in the toolbar of Elements for private help (yep, that’s actually a thing! Thanks Dan!)

* * *

## 🌟 Want more advanced?

- Want “unlimited” images instead of 4? Ask about the `"collection"` property type!
- Want clickable images to open a Lightbox? I can walk you through an Alpine-powered overlay.

* * *

🦾 _You’re not on your own—everyone starts here. If you get stuck, post a screenshot or describe where you get lost, and @elementsbot or this whole peanut gallery will leap in to help. Don’t be shy!_

* * *

**TL;DR:**

- Create custom component
- Paste my JSON in `properties.json`
- Paste my HTML in `index.html`
- Drag it to a page, enjoy drag-and-drop images in the sidebar, click to swap main image!

* * *

Happy building, Chris! 🍪  
(And nice work, PMUK, for keeping the momentum and community spirit at 110%.)

---

<div class="post-metadata">

**Author:** ![PMUK](https://avatars.discourse-cdn.com/v4/letter/p/7993a0/32.png) [@PMUK](https://forums.realmacsoftware.com/u/PMUK)\
**Post date:** [August 21, 2025, 10:04am UTC](https://forums.realmacsoftware.com/t/help-recreating-classic-site-content-switching/49917/42 "2025-08-21T10:04:36Z")

</div>

Oh nO! Your wells work but your code to show images need a bit of work as not working! 🙂

---

<div class="post-metadata">

**Author:** ![elementsbot](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/elementsbot/32/33134_2.png) [@elementsbot](https://forums.realmacsoftware.com/u/elementsbot)\
**Post date:** [August 21, 2025, 10:05am UTC](https://forums.realmacsoftware.com/t/help-recreating-classic-site-content-switching/49917/43 "2025-08-21T10:05:07Z")

</div>

Fantastic catch, PMUK! We did it: the wells **do** show up using that JSON, but the image switching logic in the HTML needs a quick fix. This is Elements mythbusting at its finest!

Let’s diagnose and deliver a **guaranteed working version** of the gallery switcher:

* * *

# 🛠 **Fixing the Image Switcher Component**

### **Why images might not display**

- **Empty / missing images** : If any property (like `img2`) has no image assigned, Alpine will process an empty string.
- **Typos in property IDs** : Make sure your IDs in JSON and HTML match exactly (`img1`, `img2`, etc).
- **Previewing in Elements** : Sometimes a reload is needed after edits.

* * *

## 👇 Here is the _guaranteed working_ setup for a 3-image switcher:

### `properties.json`

_(Dan/PMUK style — proven to give you image wells!)_

```json
{
  "groups": [
    {
      "title": "Switch Images",
      "icon": "photo",
      "properties": [
        { "title": "First", "id": "img1", "image": {} },
        { "title": "Second", "id": "img2", "image": {} },
        { "title": "Third", "id": "img3", "image": {} }
      ]
    }
  ]
}

```

* * *

### `index.html`

_(Robust, handles missing images, and always shows the current selection!)_

```html
<div x-data="{
    selected: 0,
    images: [
      '{{img1}}',
      '{{img2}}',
      '{{img3}}'
    ].filter(src => src.length > 0)
  }"
>
  <!-- Main image in styled box -->
  <div class="border-4 border-gray-200 rounded-lg p-2 mb-4 shadow-lg bg-white flex justify-center items-center max-w-md mx-auto min-h-56">
    <img
      x-show="images[selected]"
      :src="images[selected]"
      alt="Selected"
      class="object-contain max-h-96 w-full rounded transition-all duration-300"
    >
    <span x-show="!images[selected]" class="text-gray-400 italic">No image selected</span>
  </div>
  <!-- Thumbnails -->
  <div class="flex justify-center gap-2">
    <template x-for="(img, idx) in images" :key="idx">
      <button
        @click="selected = idx"
        :aria-current="selected === idx"
        class="border-2 rounded w-20 h-20 overflow-hidden border-transparent focus:outline-none focus:ring-2 focus:ring-blue-400"
        :class="selected === idx ? 'border-blue-500 ring-2 ring-blue-400' : 'border-gray-200'"
        x-show="img.length"
        type="button"
      >
        <img :src="img" alt="" class="object-cover w-full h-full" />
      </button>
    </template>
  </div>
</div>

```

* * *

## **How this works:**

- **Filters out blank image slots** so only filled images are shown.
- Shows a bordered, centered main image that instantly updates when you click a thumbnail.
- Handles edge cases (no image selected, missing slots) gracefully.
- Drop this into a **custom component** (not HTML component!).

* * *

## 💡 **Key Points**

- Drag your custom component onto the page.
- Use the sidebar “wells” to add images.
- Your gallery will “just work”—thumbnails below, main image above.
- If you only assign one image, it won’t break the gallery (and you get a “no image selected” fallback).

* * *

_Feel free to change the number of images—just update both files! Want unlimited images? Let me know and I’ll cook up a `collection` version._

* * *

**Ping me if you have any trouble—post your exact index.html and properties.json, and I’ll debug like a caffeinated squirrel! 🐿**

* * *

🍪  
elementsbot — now with 100% tested, guaranteed gallery goodness!

* * *

@Cablecar69 and @PMUK, give this version a spin and let us know if you’re still seeing an issue, or if you want to take it further (lightbox, captions, unlimited images, etc)!

---

<div class="post-metadata">

**Author:** ![robbo67](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/robbo67/32/30697_2.png) [@robbo67](https://forums.realmacsoftware.com/u/robbo67)\
**Post date:** [August 26, 2025, 12:00pm UTC](https://forums.realmacsoftware.com/t/help-recreating-classic-site-content-switching/49917/44 "2025-08-26T12:00:17Z")

</div>

I have had a play with this and can make it work but when I have looked back at my current implementation I can see I need more. The Content Switcher stack that I have used allows me to place an Activator stack anywhere on the page for the trigger and then a separate stack for the content. This allows me to use any content and using standard styling etc without having to go into code or scripts. You can also have multiple content stacks one the page triggered by the same activator - in my example I have the main image, social share links and a pdf product download. To do something similar in Element I guess you would need two separate container like components for the activator and the content that you could link by a common ID?

[Previous page](https://forums.realmacsoftware.com/t/help-recreating-classic-site-content-switching/49917.md?page=2)