PUP key options & simple html form

[byronclunz]

I would like to use a Chevereto site to upload images on an HTML form (not any forum or BB).

My form is at https://www.cctomany.com/gtarca/chevereto.html

My question is: can PUP key option(s) be used to cause the returned direct link URL to be loaded into the "Photo Link" field of my form? Currently, the returned URL is inserted into the "Message" text area.

Secondary question: what key options & values will cause the button to appear below the Photo Link field instead of next to the Message area?

Thanks!

 

[Oakley]

It shouldn't work (kinda...) but it does, so what you are asking is probably possible.

Please bear in mind that what you are asking is not standard Chevereto functionality, you are stepping into the realms of a bespoke solution. Consequently, please remember that this would be out side the scope of standard Chevereto support (as Rodolfo will no doubt confirm).

I'm not sure about the first part of your question as I don't have enough info. For the second question I would suggest using the "sibling" option in your pup code. This is a CSS selector which is used as a reference to the DOM node that determines where the button should be inserted. Either use an existing div or create one somewhere around or after div "cid_18" in your html. If you add an extra div then add some corresponding css to position it where you want it.

As an example your code will change from:

<script async src="//demo.chevereto.com/sdk/pup.js" data-url="https://demo.chevereto.com/upload" data-auto-insert="direct-links" data-palette="clear"></script>

to

<script async src="//demo.chevereto.com/sdk/pup.js" data-url="https://demo.chevereto.com/upload" data-auto-insert="direct-links" data-sibling="#upload-button" data-palette="clear"></script>

The data-sibling="#upload-button" part refers to the extra div I mentioned above. This is only an example, call it what you want, you might be able to use an existing div in your html page but it gives you an idea on how to position the button.

There's some info on this on the Chevereto Plugin page: https://chevereto.com/docs/pup

 

[Rodolfo]

Pay attention to "Manual button binding" https://chevereto.com/docs/pup

 

[byronclunz]

Thanks, both of you. So this coding moves the button:

<script async src="//demo.chevereto.com/sdk/pup.js" data-url="https://demo.chevereto.com/upload" data-auto-insert="direct-links" data-sibling="#cid_7" data-palette="clear"></script>

But as soon as I add data-mode="manual", the button no longer appears. ? I suspect I also need a data-target value, but I'm not sure what to use for that, if that's the issue. I want the result to populate the Photo Link field.

 

[Rodolfo]

I hate to repeat myself so here, a picture:



Notice the manually inserted <button>? You simply searched "manual" and used data-mode="manual" which wasn't what I told you to check.

 

[byronclunz]

Rodolfo, thank you for your patience. I'm clearly not a CSS expert. Adding the button manually per your instructions does work - thank you! I think I'm good to go!