How to reference Elements resources in code

[bryanrieger]

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.

[bon]

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.

{
    "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.

[bryanrieger]

Thanks @bon. I’m currently trying to figure out how to incorporate Lottie, Keyshape and 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:

Error parsing hooks
ReferenceError: Can't find variable: rw on line 1

[dan (Dan C.)]

If there’s no other controls in the properties file, you need to put it into a group, like this.

{
    "groups": [{
        "title": "Resource Example",
        "properties": [{
            "title": "Resource",
            "id": "resource",
            "resource": {}
        }]
    }]
}

[bon]

@bryanrieger

I’m currently trying to figure out how to incorporate Lottie, Keyshape and 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!

@bryanrieger

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.

@bryanrieger

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).

@bryanrieger

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:

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;

[trinube (Kim)]

@bon

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.

{
    "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?

>  <div class="masonry-grid">
>         <!-- Example of an image with a link -->
>         <a href="image_link_1" class="masonry-item">
>             <img src="Images/image1.jpg" alt="Image 1">
>         </a>

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.

[logrunner (Jon)]

Try this:

  <a href="image_link_1" class="masonry-item">
  <img src="../resources/Images/image1.jpg" alt="Image 1">

[trinube (Kim)]

Thanks, this works. I was a little thrown as they don’t work in the editor, only when previewed in the browser.

[trinube (Kim)]

I’m need help with looping through the folder but at least the masonry gallery works in principle.

[bon]

Hey @trinube

Apologies for the delay, but here’s an example project that loops over a folder of images: 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!

[trinube (Kim)]

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.