# Custom Copyright Component

**URL:** <https://forums.realmacsoftware.com/t/custom-copyright-component/51146>\
**Category:** Elements API\
**Created:** [September 18, 2025, 8:38pm UTC](https://forums.realmacsoftware.com/t/custom-copyright-component/51146 "2025-09-18T20:38:53Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\
**Post date:** [September 18, 2025, 8:38pm UTC](https://forums.realmacsoftware.com/t/custom-copyright-component/51146/1 "2025-09-18T20:38:53Z")

</div>

Over the weekend, I decided to write my own custom copyright component as a fun exercise.

I wanted it to be highly customizable, so I added a lot of properties to control almost every aspect of the component. It is built on a Flex, so the layout can easily be configured.

Below are some examples of the various flex directions.

 ![CleanShot 2025-09-18 at 10.23.13@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/4/1/41516344b9d44ef1249ee93ad3d3835c2c755ae1.png)

There is a drop zone for the SVG or image, which can be used if needed.

Here are all the available properties.

 ![CleanShot 2025-09-18 at 10.31.00@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/8/a/8a22421f88cd53ac98807b7885a9eb1c36231ea7.png)

I currently don’t have the background color settings available, but I’m thinking of adding those as well. In the examples, the color backgrounds are being handled by the flex that contains the copyright.

Everything is configurable except the actual “©” symbol. Leaving text fields blank will exclude them from the display.

The start date is currently set with a slider that has a range from 1900 to 2100. I would have preferred a number field, but I ran into a bug where you could enter any number you liked into the field, and it worked, but when using the up and down arrows to increment the number, you could only increment to 1000, which was not going to work for a date. I need to see if this is a bug or intentional. @ben @dan

Elements is a lot of fun!

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [September 19, 2025, 7:09am UTC](https://forums.realmacsoftware.com/t/custom-copyright-component/51146/2 "2025-09-19T07:09:11Z")

</div>

> [@handshaper](#):
>
> Everything is configurable except the actual “©” symbol. Leaving text fields blank will exclude them from the display.

The component looks great, nice work! Are you using the Alpine snippet to get the current year?

```auto
<div x-data="{ year: new Date().getFullYear() }">
  <span x-text="year"></span>
</div>

```

> [@handshaper](#):
>
> but when using the up and down arrows to increment the number, you could only increment to 1000, which was not going to work for a date. I need to see if this is a bug or intentional

That’s just a bit of an oversight I think, I’d put the control as a standard text field for now…

---

<div class="post-metadata">

**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\
**Post date:** [September 19, 2025, 4:04pm UTC](https://forums.realmacsoftware.com/t/custom-copyright-component/51146/3 "2025-09-19T16:04:37Z")

</div>

> [@dan](#):
>
> The component looks great, nice work! Are you using the Alpine snippet to get the current year?
> 
> ```auto
> <div x-data="{ year: new Date().getFullYear() }">
> <span x-text="year"></span>
> </div>
> 
> ```

I do this in the hooks.js file and then pass in the assembled string.

```auto
// Figure out what the appropriate date string should be
   const y = new Date().getFullYear();
   const s = parseInt(rw.props.startYear, 10);

	// Build up a string that contains the concatenation of the start year
	// and the current year, if needed
	let yearText = String(y);
	if (Number.isFinite(s)) {
		yearText = (s < y) ? `${s}–${y}` : String(s); // future or equal -> single year
	}

```

---

<div class="post-metadata">

**Author:** ![grainger2001](https://avatars.discourse-cdn.com/v4/letter/g/91b2a8/32.png) [@grainger2001](https://forums.realmacsoftware.com/u/grainger2001)\
**Post date:** [September 19, 2025, 9:10pm UTC](https://forums.realmacsoftware.com/t/custom-copyright-component/51146/4 "2025-09-19T21:10:01Z")

</div>

Will there be, or is there somewhere already, where other users can download custom components that other people have made?

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [September 19, 2025, 9:11pm UTC](https://forums.realmacsoftware.com/t/custom-copyright-component/51146/5 "2025-09-19T21:11:18Z")

</div>

> [@grainger2001](#):
>
> Will there be, or is there somewhere already where other users can download custom components that other people have made?

Yes, there will be a place, and it’ll be built right into Elements! We’re working on it now and hope to have a basic version available soon-ish. Stay tuned!

---

<div class="post-metadata">

**Author:** ![grainger2001](https://avatars.discourse-cdn.com/v4/letter/g/91b2a8/32.png) [@grainger2001](https://forums.realmacsoftware.com/u/grainger2001)\
**Post date:** [September 19, 2025, 9:11pm UTC](https://forums.realmacsoftware.com/t/custom-copyright-component/51146/6 "2025-09-19T21:11:57Z")

</div>

Awesome! Thank you for the quick reply!

---

<div class="post-metadata">

**Author:** ![ben](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ben/32/28488_2.png) [@ben](https://forums.realmacsoftware.com/u/ben)\
**Post date:** [September 22, 2025, 6:02am UTC](https://forums.realmacsoftware.com/t/custom-copyright-component/51146/7 "2025-09-22T06:02:43Z")

</div>

Just a heads-up: if you’re calculating the year in your hooks.js file, it **won’t dynamically update** on your published site.

That’s because hooks.js runs **at build time** (when you publish your project) so the value it outputs gets hardcoded into the final HTML. This means the year will only update the next time you republish your site.

If you need the year to update automatically, you’ll want to use either PHP or client-side JavaScript to generate the year in the browser! 🙂

---

<div class="post-metadata">

**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\
**Post date:** [September 22, 2025, 6:05am UTC](https://forums.realmacsoftware.com/t/custom-copyright-component/51146/8 "2025-09-22T06:05:35Z")

</div>

Thanks for that @ben , I was aware of this limitation with the way I’m doing it. But the reality is that for many other reasons, I always tend to republish my sites at the start of a new year.

How would one handle this using JavaScript?

---

<div class="post-metadata">

**Author:** ![Doobox](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/doobox/32/32373_2.png) [@Doobox](https://forums.realmacsoftware.com/u/Doobox)\
**Post date:** [September 22, 2025, 1:02pm UTC](https://forums.realmacsoftware.com/t/custom-copyright-component/51146/9 "2025-09-22T13:02:23Z")

</div>

```javascript
<span>&copy; <script>document.write(new Date().getFullYear())</script></span>

```

---

<div class="post-metadata">

**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\
**Post date:** [September 22, 2025, 9:15pm UTC](https://forums.realmacsoftware.com/t/custom-copyright-component/51146/10 "2025-09-22T21:15:09Z")

</div>

With the help of ChatGPT, I completely rewrote the logic for the date and placed it in a script, making it more dynamic. It also sets a timer to trigger the current year update at the end of the year, just to be safe.

Now there is nothing to do with the year in the hooks.js file.

It even allows the user to preview the copyright notice in the editor when they enter text, even though the JS code won’t run until preview. At least that way, you get to see what you have entered in the properties.

---

<div class="post-metadata">

**Author:** ![Pegasus](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/pegasus/32/25035_2.png) [@Pegasus](https://forums.realmacsoftware.com/u/Pegasus)\
**Post date:** [September 22, 2025, 9:34pm UTC](https://forums.realmacsoftware.com/t/custom-copyright-component/51146/11 "2025-09-22T21:34:06Z")

</div>

You can easily create this via the Elements CMS. Just place a text component into a CMS item.

In the CMS item, activate **Settings → Use Item for Metadata**. Then you’ll have access to Twig syntax.

For example, put the following syntax into your text component: `{{ "now"|date("Y") }}` and the current year will be displayed and automatically updated.

 ![Bildschirmfoto 2025-09-22 um 23.25.30](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/1/1/112c067b9f0a1ffa1ad20599e3f278ccf69bc1f0.png)

---

<div class="post-metadata">

**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\
**Post date:** [September 22, 2025, 9:46pm UTC](https://forums.realmacsoftware.com/t/custom-copyright-component/51146/12 "2025-09-22T21:46:35Z")

</div>

Yes, this is what I was doing before I wrote this component. I decided I wanted something that was not tied to the CMS. Plus, it was just fun to create a custom component.