• Resolved Degas

    (@degas)


    Hi, thanks for what looks a great plugin. I’m having an issue in getting it to work in a particular way and haven’t seen this mentioned in the docs or here in support (excuse me if I’ve missed it). the initial adaptations tried haven’t had any success.

    We have a form with multiple images which display in a slideshow when any image is clicked. I’d like to have a button/link next to each image that will open that particular image in the Pixo editor then allow saving, ie

    <a href="path/to/image">Edit image</a>

    This is the only instance where we need the editor integration. Can you show us how to accomplish this?

    Also, we’ve updated the feature list and added a logo but are still seeing the default set in the editor. Do we need to change anything else here?

    Thanks in advance for any help, Jeremy

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author Ickata

    (@ickata)

    Hello @degas ,

    Thanks for the good words ??

    Your use case is very specific and in that case I’d recommend to directly integrate Pixo into your front-end rather than to use this plugin. The plugin solves some general use cases, for example editing images in wp-admin -> Media. In the front-end it attaches to file input form fields and allows end users to edit images before posting them into a form. Every other front-end case is specific.

    That’s why I recommend to directly integrate Pixo without the plugin. The documentation is quite good and has some examples.

    Based on your description, something similar should do the job (you should edit the code example before embedding it to your front-end – change the HTML selector, add your api key, etc.):

    <script src="https://pixoeditor.com/editor/scripts/bridge.m.js"></script>
    <script>
       window.addEventListener('load', function () {
          const pixo = new Pixo.Bridge({
             apikey: 'yourapikey',
             type: 'modal',
             // other options go here
             // ...
             onSave: function (image) {
                // this will trigger download of the image
                image.download();
             }
          })
    
          // this queries your page for the elements which by click will
          // open the images in Pixo
          const selector = 'body a'; // update this to properly match your elements
          document.querySelectorAll(selector).forEach(function (link) {
             link.addEventListener('click', function (e) {
                pixo.edit(e.target.href)
             })
          })
       })
    </script>

    About this:

    we’ve updated the feature list and added a logo but are still seeing the default set in the editor

    Custom features list is a Premium feature of Pixo and won’t work if your 30-day trial expired. You can write to Pixo support sending them your API key and they will tell you if that’s the case.

    Thread Starter Degas

    (@degas)

    Thanks @ickata. We deleted the plugin and integrated via js; this works perfectly for half a second before the editor drops out due to being blocked. I’ve asked on the main site for further advice so hopefully will have this working shortly.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Link/button to open image in Pixo editor’ is closed to new replies.