PUP key options & simple html form

  • Notice: New feature requests and suggestions won't be considered for Chevereto development at this time. Learn more.

byronclunz

New Member
Mar 3, 2018
3
1
3
#1
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

Network license
Feb 27, 2017
233
52
78
#2
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:

Code:
<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

Code:
<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
 

byronclunz

New Member
Mar 3, 2018
3
1
3
#4
Thanks, both of you. So this coding moves the button:
Code:
<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

Chevereto Guru
Staff member
Oct 7, 2008
15,542
3,870
237
Chevereto HQ
rodolfoberrios.com
#5
I hate to repeat myself so here, a picture:

1520274617345.png

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

byronclunz

New Member
Mar 3, 2018
3
1
3
#6
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!
 
Last edited: