How and Where Do I Add a Chevereto Image Upload Plug-in?

[tomiseksj]

Forum URL: (private)

After the Photobucket debacle I purchase a Chevereto/TMD Hosting image hosting package.

I also added the Simple Image Upload plug-in to my forum as its installation required no special knowledge on my part.

Chevereto has now included a plug-in that I would also like to add to my forum but I am not sure how or where to paste the plug-in code.

Chevereto's instructions tell me to copy and paste the plug-in code into the website HTML code, preferably in the head section.

Here is an example of the basic plug-in code (I would change the src and data-url to match my image host site):

<script async src="//demo.chevereto.com/sdk/pup.js" data-url="https://demo.chevereto.com/upload"></script>

I am also able to customize the plug-in to have it place the "Upload Images" button either before or after a "sibling" (which I assume is the "Add Attachment" button here) but to do so I need to know the "string" for that element.

Hopefully, I've been able to clearly articulate the help I need (if not, the Chevereto plug-in instructions may be viewed here.

Any help you can provide will be appreciated!

[Retread]

Hello tomiseksj

I'm not even close to being an authority on such matters but the opening paragraph in your link looks like a concern:

The popup upload plugin (PUP) is a small file that allows Chevereto based websites to provide external image uploading via a small JavaScript file. PUP is enabled by default in all Chevereto based websites since version 3.10.2 and when enabled, instructions will be available at /plugin in your website.

I'm guessing the code which actually does all the work exists on Chevereto based website and the scripts (which might go in their equivalent of a ProBoards forum's Global Header) make it so those pop-ups can be triggered.

Maybe there's a way one of the code gurus can use some of that on a ProBoards forum but it seems unlikely to be a simple drop-in process.

Since it's the weekend it might be a good long while before you hear from the ProBoards Admins but maybe a code guy like Lynx or Todge might be online before then.

[Todge]

OK.. Hopefully this is what you're after...

To get a button after the 'Add Attachment' button on the posting page, you need to do this..

In your Admin Panel, hover over the 'Themes' tab and select 'Layout Templates' and select 'Posting Page'.

Now add this to the very top of the code..

<script async src="//demo.chevereto.com/sdk/pup.js" data-url="https://demo.chevereto.com/upload"></script>
<div id="editor" style="display: none;" contenteditable></div>
<style>.chevereto-pup-button { display: none;}</style>

You will need to edit the first line of code to target your account..

Then scroll down and find the line that says '$[attachment_button]' (line 26 if you are using the standard layout) and add this directly below it..

<button data-chevereto-pup-trigger data-target="#editor">Upload Image</button>

'Save Changes' then go take a look at a posting page to see if it has worked.

[tomiseksj]

That code placed the button after the attachment button on the posting page and selecting it opened the Chevereto upload box.

The image dragged/dropped into the box was uploaded to my Chevereto account but the BBCode for the uploaded image was not inserted into the post (which essentially defeats the purpose).

[Todge]

May 12, 2018 13:42:36 GMT -8 tomiseksj said:

That code placed the button after the attachment button on the posting page and selecting it opened the Chevereto upload box.

The image dragged/dropped into the box was uploaded to my Chevereto account but the BBCode for the uploaded image was not inserted into the post (which essentially defeats the purpose).

OK, remove everything I asked you to add to your posting page layout, and then add this instead...

At the top of the Posting Page layout add this...

<script async src="//demo.chevereto.com/sdk/pup.js" data-url="https://demo.chevereto.com/upload"></script>

Remembering to edit it to target your account..

Then, directly after the '$[attachment_button]' line add this...

<span id="upload"></span>

And lastly, add this at the very bottom of the code...

<script type="text/javascript">
    $(document).ready(function() {
        var timeoutID = window.setTimeout(
            function(){
                var upload_button = $('.chevereto-pup-container');
                $('.chevereto-pup-button').attr('class','button').css('padding','0px 4px 2px 4px');
                $('#upload').append(upload_button[1]);
            },
            500
        );
    });
</script>

Doing it that way appears to work, but I have to refresh the page to see the image added to the posting area.

[tomiseksj]

Thanks for your help Todge . That approach has given me inconsistent results -- sometimes the image code is inserted and sometimes it isn't. But it got me to the right place to insert the code and for that I'm grateful!

It seems that the basic plugin automatically inserts an upload button above the posting page's menu bar so there was no need to add another button adjacent to the add attachment one. Unfortunately, clicking on that button only allows uploading images to the host.

I was able to select some options on the plugin page on my image host and ended up inserting the following as the first line in the forum's posting page layout template:

<script async src="//tsfimagehost.net/sdk/pup.js" data-url="https://tsfimagehost.net/upload" data-sibling-pos="before" data-auto-insert="bbcode-embed" data-palette="blue"></script>

The result was another image upload button showing within the posting area but only visible while in BBCode mode. Clicking on this button both uploaded the image to the host and also inserted the BBCode into the post.

Here is what is seen when creating a thread or posting a reply:



I'll continue trying to see if I can make it less confusing for my members. I've created a separate forum to use as a test bed so I could experiment without fear of messing something up.

[Todge]

I assumed you wanted the button to be beside the Add Attachments button, which is why I moved and restyled it to fit.. The button that appears above the text-area is the same one that has been moved in the code I gave you.

The one that appears IN the text-area is the one created by your edited code, and it only appears on the BBCode side of the editor because that is what it is with this part of the code..

data-sibling-pos="before" data-auto-insert="bbcode-embed"

Though I doubt it would work with the Preview side in any case, partly because that is an iFrame, so I doubt it could find it, and because it uses native HTML, so inserting UBBCode would not work.

Anyhow, you are welcome, and I'm glad you have found a kind of compromise, and good luck with refining it.

[tomiseksj]

Todge ,

Your assumption was correct -- I wanted to place the button after the Add Attachment one, in line with the button placement for the Simple Image Upload plugin currently installed on my forum.

It appears that the code you provided positioned the button that I had IN the text area, rather than the one ABOVE the text area, and it still only functions properly while in the BBCode editor.

I doubt that I'll be able to eliminate the button above the text area so I'll have to decide which position for the functional button will cause the least amount of confusion for my members. I'm leaning toward the placement made with your code.

[Todge]

OK... Try this then....

Make sure this is at the top of the Posting Page layout...

<script async src="//tsfimagehost.net/sdk/pup.js" data-url="https://tsfimagehost.net/upload" data-sibling-pos="before" data-auto-insert="bbcode-embed" data-palette="blue"></script>

Make sure this is directly below the $[attachment_button] line...

<span id="upload"></span>

And add THIS to the bottom of the layout...

<script type="text/javascript">
    $(document).ready(function() {
        var timeoutID = window.setTimeout(
            function(){
                $('.chevereto-pup-container').each(function(){
                    if($(this).parent().attr('class') == undefined || !$(this).parent().attr('class').match(/bbcode-editor/))
                    {
                        $(this).css('display','none');
                    }
                    else
                    {
                        $(this).css('display','none');
                        var target = $(this).find('button');
                        var button = $('<a></a>').addClass('button').html('Upload Images').click(function(){
                            $(target).click();
                        });
                        $('#upload').append(button);
                    }
                });
            },
            500
        );
    });
</script>

[tomiseksj]

Todge ,

Both the buttons ABOVE and IN the text area are now gone (although they appear momentarily) so that will make it much easier for me to explain to my members.

The UPLOAD IMAGE button still only works while in the BBCode tab of the editor but I'm perfectly content with leaving it that way.

Thanks for all of your help!!

Steve
 

[Todge]

The delay is added on purpose to give the buttons time to be added to the page before the code I gave you tries to change things, and I'm afraid that I doubt you'll ever get it to work on the Preview side of the editor.