Trying to streamline using drop zones

Elements Custom Components
22

only accepts image files

23

Ugh, ok, I’ll private message you my email address lol

24

Ok, so Elements is failing to create a secure connection with the server.

There’s a lot of reasons this could happen, but I wonder… is the time on your Mac correct for your local timezone?

If it is, it could be an issue with a firewall or proxy. Are you using public WiFi?

25

yes using public wifi, already tried the date time , I turned off all firewalls etc, no issues back in a week or so, I am more interested in why I originally posted re dropzone issue, whether I should give up with approach of using dropzone as a div to control a grid

26

Yes sorry, let’s get this thread back on track.

The reason you’re seeing the inner grid work correctly in Safari but not in the editor is because the editor requires a wrapper div around each component to facilitate drag drop / selection etc.

The workaround is to use a hooks file on the inner grid to override the element type and set classes accordingly.

Copy this into the hooks file on inner grid.

const transformHook = (rw) => {
    
    // Set the root element type and add a class
    rw.setRootElement({
        as: "div",
        class: "col-start-2 row-start-2 col-span-4 row-span-4 bg-yellow-200",
        args: {}
    });
}

exports.transformHook = transformHook;
27

@tpbradley sorry Tom, the bit you are commenting on is the last simple explanation of my issue, the videos at the beginning of the thread look at me using a div completely built with properties, is hooks workaround possible with properties rather than tailwind. I could just write tailwind to create a grid, if you look at the videos , I created a kind of freeform grid and positioning using sliders, I can still complete with all screen sizes by writing everything with properties, I can still do this but it will be hundreds and hundreds of lines. this way you can see the grids in both Elements and safari.

using dropzones you cannot see in Elements Safari, with dropzones I could just create the screen sizes and reduce the amount of lines, can hooks file work around handle properties rather than just tailwind

Kind of think this may not be possible

the 2nd video shows what I was building

28

Just checked out those first two videos… It’s absolutely amazing what you’re doing with Elements! Love it!

Yes I think using hooks will solve the issue you were having and allow you to add as many child grid items as you like.

You have full access to all the component properties within the hooks file. You can also set properties to be used in the template.

The pipeline is like this: Properties → Hooks → Template

The hooks file gives you a chance to check, modify and generate values for use in the template.

Try something like this in your grid item hooks file

const transformHook = (rw) => {

    // Get the properties (make sure they're defined in Properties file)
    const { columnStart, rowStart } = rw.props;
    
    // Set the root element type and add a class
    rw.setRootElement({
        as: "div",
        class: `col-start-${columnStart} row-start-${rowStart} col-span-4 row-span-4 bg-yellow-200`,
        args: {}
    });

    // You can also set properties for your template to use
    rw.setProps({
        message : `columnStart is set to ${columnStart}`
    });
}

exports.transformHook = transformHook;
29

Tom thanks sounds complicated to me, was just hoping for a simple dropzone to act as a div. I try over the your hooks code over the next few days, will take my brain a while to understand, you may get a few more questions in few days days time so apologies in advance

1 Like
30

Tom, first bit complete now to complete the rest and all screen sizes, will save me loads of work thanks again
bg colour works as well, just the rest of the properties
Opens more possibilities now

not understanding this;
// You can also set properties for your template to use
rw.setProps({
message : columnStart is set to ${columnStart}
});

31

Excellent, that’s looking great!

Normally, you’d define properties in the properties file, like a text input called name. To use it in a template file you’d have this.

<div>My name is {{name}}</div>

In the hooks file you can set properties by calling rw.setProps. So for example, you could set age to 36 and then use it in the template along with the name property.

rw.setProps({
    age : 36
});

<div>My name is {{name}} and I'm {{age}}</div>

So, in the example below, we’re setting the message property to some text and inserting the value of columnStart. To do this in Javascript, you have to create a string using backticks and use the ${property} syntax to insert a value.

rw.setProps({
    message : `columnStart is set to ${columnStart}`
});

You can then use the message property in the template file

<div>{{message}}</div>
32

Thanks ok I will try that once I finished off the rest of the properties

1 Like
33

@tpbradley when you have 5 mins after the new year see one issue I have, it did work prior to my streamlining, I am not sure how to get a background image into the grid, see code in the video, tried loads of different things, I can drop an image into dropzone but want to add bg image to grid, not sure why I can still get this to work when not using hooks

also you can see almost all working, I have implemented all screen sizes now not just in this video, still abroad poor upload load at moment so reduced quality

on certain animations I get info on the screen, not all animations, seen screen shot below

35

had 15 mins all screens working now, just need bg image to work, also gallery was working now stopped must have odd code somewhere

poor quality due to upload speed, using hooks makes it quick to put together, and use

36

Wow, this is insane (in a good way)! Are you planning on shipping this as a component for Elements? :star_struck:

37

@dan yes for free, just need some help from Tom or anyone else from Realmac re background image in hooks, then a couple of other bugs either mine or Elements

bg-[url(${image})] this doesn’t seem to work in hooks

a little better quality of one screen

I cant upload because of my connection while abroad, be back at weekend

1 Like
38

ok managed to get bg-image working by a workaround at the moment, still nee some help on that, gallery stopped working, but was caused by a v1 section in my cube, changed to v2 container works

low res again but getting there

39

Just catching up here! It’s really coming together, great stuff!

I think I know what the issue is, let me have a play.

40

@tpbradley ok thanks, I had to drop an empty div in the dropzone then the background image works, that will confuse everyone

41

ok grid overload

1 Like
42

That’s crazy!

I’ve found the problem with the background image. In your hooks file I see you’re using bg-[url(${image}) ] which is very close.

The image property is a little different to other properties as it’s an object containing quite a bit of information about the image, the url, width, height, format etc.

So you should just be able to change it to bg-[url('${image.path}')] to get the path to the image.