# How to reference Elements resources in code **URL:** \ **Category:** Elements API\ **Created:** [September 25, 2024, 2:19pm UTC](https://forums.realmacsoftware.com/t/how-to-reference-elements-resources-in-code/44743 "2024-09-25T14:19:33Z")\ **Posts on this page:** 11\ **Page:** 1
**Author:** ![anon68150607](https://avatars.discourse-cdn.com/v4/letter/a/4bbf92/32.png) [@anon68150607](https://forums.realmacsoftware.com/u/anon68150607)\ **Post date:** [September 25, 2024, 2:19pm UTC](https://forums.realmacsoftware.com/t/how-to-reference-elements-resources-in-code/44743/1 "2024-09-25T14:19:33Z")
I know it’s been discussed, but I can’t find it anywhere. How do I access resource items using code, either within a custom component or within the site template? **Edit:** Never mind, using `/resources` seems to work. ---
**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 25, 2024, 2:47pm UTC](https://forums.realmacsoftware.com/t/how-to-reference-elements-resources-in-code/44743/2 "2024-09-25T14:47:28Z")
Hi Bryan, there’s no way to access the project resources directly (at least not right now). To access a single or folder of resources you need to add a `resource` control to your custom component. ```json { "title": "Resource", "id": "resource", "resource": {} } ``` In the future you will be able to specify if the resource control accepts folders or single resources, and which types of resources. I would recommend adding the above code to your properties.json and then inspecting the resource property by adding `console.log(rw.props.resource)` to your hooks.js. Let me know if you need more guidance or have more questions. ---
**Author:** ![anon68150607](https://avatars.discourse-cdn.com/v4/letter/a/4bbf92/32.png) [@anon68150607](https://forums.realmacsoftware.com/u/anon68150607)\ **Post date:** [September 25, 2024, 3:25pm UTC](https://forums.realmacsoftware.com/t/how-to-reference-elements-resources-in-code/44743/3 "2024-09-25T15:25:55Z")
Thanks @ben. I’m currently trying to figure out how to incorporate [Lottie](https://airbnb.io/lottie/), [Keyshape](https://www.keyshapeapp.com) and [Hype](https://tumult.com/hype/) animations, both of which include a number of resources of their own (images, scripts, etc). Ideally, I’m hoping that I can add one instance of the runtime scripts for each, and then have all Hype or Keyshape media instances reference that one runtime instance. I’m also hoping I can just add their respective project resource folders (and all included assets) to the project resources, and then reference them via the component. FYI when I add the above code to my component ‘Properties’, and then add `console.log(rw.props.resource)` to ‘Hooks’, I get the following error: ```auto Error parsing hooks ReferenceError: Can't find variable: rw on line 1 ``` ---
**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 26, 2024, 8:35am UTC](https://forums.realmacsoftware.com/t/how-to-reference-elements-resources-in-code/44743/4 "2024-09-26T08:35:01Z")
If there’s no other controls in the properties file, you need to put it into a group, like this. ```auto { "groups": [{ "title": "Resource Example", "properties": [{ "title": "Resource", "id": "resource", "resource": {} }] }] } ``` ---
**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 26, 2024, 10:28am UTC](https://forums.realmacsoftware.com/t/how-to-reference-elements-resources-in-code/44743/5 "2024-09-26T10:28:41Z")
> [@anon68150607](#): > > I’m currently trying to figure out how to incorporate [Lottie](https://airbnb.io/lottie/), [Keyshape](https://www.keyshapeapp.com) and [Hype](https://tumult.com/hype/) animations, both of which include a number of resources of their own (images, scripts, etc). We will have a way for you to include scripts from custom components in the near future. Stay tuned! > [@anon68150607](#): > > Ideally, I’m hoping that I can add one instance of the runtime scripts for each, and then have all Hype or Keyshape media instances reference that one runtime instance Yes, this will be possible. > [@anon68150607](#): > > I’m also hoping I can just add their respective project resource folders (and all included assets) to the project resources, and then reference them via the component. You won’t be able to access/reference project resources directly from a component. You will need to add the resources to the component via a `resource` control. If you want every instance of a component to have those resources always available, then using a Global would be the way to go (add the resources to the custom component and then create a Global from that custom component). > [@anon68150607](#): > > FYI when I add the above code to my component ‘Properties’, and then add `console.log(rw.props.resource)` to ‘Hooks’, I get the following error: Ensure that you have the console.log inside the transformHook method. You entire hooks file should look like this: ```auto const transformHook = (rw) => { // this will log all of the props for this component console.log("All Props", rw.props); // or you can destructure specific props... const { resource } = rw.props; console.log({ resource }); } exports.transformHook = transformHook; ``` ---
**Author:** ![trinube](https://avatars.discourse-cdn.com/v4/letter/t/df788c/32.png) [@trinube](https://forums.realmacsoftware.com/u/trinube)\ **Post date:** [September 27, 2024, 4:52am UTC](https://forums.realmacsoftware.com/t/how-to-reference-elements-resources-in-code/44743/6 "2024-09-27T04:52:43Z")
> [@ben](#): > > there’s no way to access the project resources directly (at least not right now). > > To access a single or folder of resources you need to add a `resource` control to your custom component. > > ```auto > { > "title": "Resource", > "id": "resource", > "resource": {} > } > > ``` Sorry I’m a little lost by this Bon, can you gently explain where this goes within the component and then how I address it from the html? This is an example of the code it’s generated so given the folder is called Images, is there anything else I need to point it to the Resources folder? ```auto >
> > > Image 1 > ``` I’m fiddling around with ChatGPT to create a tailwind style masonry gallery and I want to be able to point it to a single folder in Resources for the images. The next steps are a drop well for the folder, a link option as each image is selected in the editor, and properties for gap and background colour. ---
**Author:** ![logrunner](https://avatars.discourse-cdn.com/v4/letter/l/59ef9b/32.png) [@logrunner](https://forums.realmacsoftware.com/u/logrunner)\ **Post date:** [September 27, 2024, 7:39am UTC](https://forums.realmacsoftware.com/t/how-to-reference-elements-resources-in-code/44743/7 "2024-09-27T07:39:02Z")
Try this: ```auto Image 1 ``` ---
**Author:** ![trinube](https://avatars.discourse-cdn.com/v4/letter/t/df788c/32.png) [@trinube](https://forums.realmacsoftware.com/u/trinube)\ **Post date:** [September 27, 2024, 8:07am UTC](https://forums.realmacsoftware.com/t/how-to-reference-elements-resources-in-code/44743/8 "2024-09-27T08:07:10Z")
Thanks, this works. I was a little thrown as they don’t work in the editor, only when previewed in the browser. ---
**Author:** ![trinube](https://avatars.discourse-cdn.com/v4/letter/t/df788c/32.png) [@trinube](https://forums.realmacsoftware.com/u/trinube)\ **Post date:** [September 27, 2024, 8:30am UTC](https://forums.realmacsoftware.com/t/how-to-reference-elements-resources-in-code/44743/9 "2024-09-27T08:30:05Z")
I’m need help with looping through the folder but at least the masonry gallery works in principle. ![Screenshot 2024-09-27 at 6.27.31 PM](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/b/3/b38339d44850762192a7242ffea7deb0dcba9ba7.jpeg) ---
**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 30, 2024, 7:41am UTC](https://forums.realmacsoftware.com/t/how-to-reference-elements-resources-in-code/44743/10 "2024-09-30T07:41:57Z")
Hey @trinube Apologies for the delay, but here’s an example project that loops over a folder of images: [elementsapp://downloadDocument/brYc98N7gqCZ](elementsapp://downloadDocument/brYc98N7gqCZ) I’ve added comments to the template of the Image Looping custom component to try and explain what’s going on, let me know if you have more questions 🙂 I think all you need to do is add your css and apply the appropriate classes in the template! ![Screenshot 2024-09-30 at 09.41.16](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/b/2/b26a49fbf4405600f6942e0aa0f8dcb35227bfe2.jpeg) ---
**Author:** ![trinube](https://avatars.discourse-cdn.com/v4/letter/t/df788c/32.png) [@trinube](https://forums.realmacsoftware.com/u/trinube)\ **Post date:** [September 30, 2024, 9:10am UTC](https://forums.realmacsoftware.com/t/how-to-reference-elements-resources-in-code/44743/11 "2024-09-30T09:10:06Z")
Hey Bon, don’t apologise, I’m sure you have better things to do. This is greatly appreciated. I’m away at the moment but will check it out properly when I get home.