@dropzone Identification

In custom HTML, I have the following test code:

<?php
if ($condition) {
?>
@dropzone(“dropZone1")
<?php
}
else { 
?>
@dropzone("dropZone2")
<?php
}
?>

It would be helpful to have @dropzones (and maybe all drop zones) highlighted with say a red outline when they are empty, so you can see where they are and that they are empty. Once a Component had been added to the dropzone, the red highlighting would be removed. If you have two dropzones together, it is difficult to see them clearly, especially if they abut one another.

In addition, having the name of the @dropzone shown in the dropzone, would be doubly helpful for users using the Custom Component.

A slightly separate suggestion: I would also find it useful if all components borders could be shown at the same time, so you can get a complete feel of how the page layout is constructed. This should be an option that you can toggle on and off while you are designing a page (Default off).

Yes, I think we need to have some UI options, to toggle the display of the highlights. We’ll make sure it covers a wide range of uses!

2 Likes

I’m intrigued as to what you’re trying to achieve here! What’s the use case for conditionally displaying @dropzone’s in Elements using a PHP if statement?

Mostly wondering how the user would be able to see/edit those two separate @dropzone’s whilst editing their site in Elements :thinking:

Both dropzones are visible while editing in Elements. The php code is only affecting the published page to decide whether the first or second dropzone should be output to the browser.

I am testing using Sitelok by Vibralogix. The first dropzone would be used if logged in and the second if logged out.

I am intending to post my workings for this once the PHP issue has been sorted and I can test my website using PHP. :slightly_smiling_face:

Further to my initial suggestion in this thread, it would also be helpful in the left hand side Page Layout tab if a @dropzone added to an HTML Custom element could be labelled as such i.e Dropzone as opposed to Content.

This is already available (although missing from the docs). You can add a title like so:

@dropzone("zone-1", title: "Zone 1")

Looking at v22867, Title for dropzone doesn’t show in Page Layout tab.

Bill
Stack-Its

I have setup a new project and tried adding the title=“title” to the @dropzone but this doesn’t seem to show anything.

In addition, the dropzones and content aren’t being shown in the Page Layout under the custom HTML component. This is odd as previously it was?

this is how mine show

I would like the title show above or under or instead of the arrow in the drop zone

There is obviously something I am missing or there is an inconsistency bug of some sort?

My project couldn’t be much simpler:

*An Initial Divider
*A custom HTML element with the content as shown in my project image
*Added a Heading element to each dropzone (ZONE-ONE and ZONE-TWO)
*Another Divider

The drop-zones aren’t listed.

I am on the latest beta (22867).

I think I copied yours as best as I could, I did save, close down then reopen

same version of Elements

not saved

saved

saved closed reopened

I had saved the project but not closed it. I quit Elements and restarted and it has now appeared as you show above. :slightly_smiling_face:

Another oddity in my project is that now the dropzones are listed, they are in the wrong order in the Page Layout:

Zone 1 follows Zone 2.

In the example from @upssjw above, the Zones are in the correct order. :thinking:

my first example with the dividers they are in the wrong order
soon as I add dividers it reverses the order

Interesting; shows the value of all this beta testing. :slight_smile:

1 Like

I even tried wrapping the dropzone in a div (which you shouldn’t have to do) and it still doesn’t show for me - lol.

they work for me in between the div see above have a few working now as long as I save and reopen

I would still like the title show in the centre of the drop zone itself

Great detective work guys! This is indeed a bug :lady_beetle:

I’ve added it to the list to get fixed during the beta cycle.

2 Likes