Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Editing post in Upload Plugin Button Placement Options
#1
You can also move the Upload images button next to other items on your website, blog or forum.  This is achieved by informing the script the item you want to be a "sibling" of the button.

In the previous post, we learned to make the upload images button change position and be located above the text area input box, simply add data-sibling-pos="before" to the imgzb script tag, like this:
Code:
<script async src="//imgzb.com/sdk/pup.js" data-url="https://imgzb.com/upload" data-sibling-pos="before"></script>

To take this one step further, let's tell the script that we want to have the Upload image button displayed near all the other BBCode buttons (like B, I, U, S, etc).  To achieve this, we need to know something about the sibling we want to have the Upload imge button moved next to.  We need an ID or Class or name.  Now I know that there an input with name of "helpbox" with all of the other BBCode buttons.  Here is an example of the location I'm referring to:

[Image: without-sibling.png]
[small]I've highlighted the area of the helpbox with a red box[/small]

To tell the script that I want the Upload images button placed next to this location, or sibling, I would add data-sibling="input[name=helpbox]" to the script tag, like this:

Code:
<script async src="//imgzb.com/sdk/pup.js" data-url="https://imgzb.com/upload" data-sibling-pos="before" data-sibling="input[name=helpbox]"></script>

This now moves the Upload images button to a location before the input with the name of helpbox, like this:

[Image: inputnamehelpbox.png]

Maybe my website, blog or forum has a button or division with an ID of "bigbutton" and I'd like the Upload images button placed by it, then I would change the data-sibling part to data-sibling="#bigbutton"

Quote:# = id of a tag
. = class of a tag
If you had a division with a class of "pineapple", you could use data-sibling=".pineapple"
There many other options available which include what type of code is automatically inserted, color of the upload images button and much more. Visit the Upload Plugin page and click on the hyperlink "options" for more information on options for implementation.
Offline Offline
Reply
Topic Options
Forum Jump:




Users browsing this thread: 1 Guest(s)