Stickers option is not available in the editing tools [Pintura Integration]

Issue Summary

  • I have the self-hosted version of Ghost, and I uploaded the files listed on the integrations page. Still no sticker option appears.

Steps to Reproduce

  1. I just purchased the Pintura Hobby license
  2. Upload pintura-umd.js and pintura.css on Settings > Integrations
  3. Stickers option is not available in the editing tools.

Setup information

Ghost version: 5.53.4
Node version: 16.13.0
SO: Ubuntu 20.04
Install via Droplet Digital Ocean
Screenshot:

I bought the license, but without that feature Pintura is unusable in its integration with Ghost.

@RyanF I transfer here the initial conversation

I tested this and couldn’t replicate it. I can see in the code that the stickers option was present, so it isn’t anything to do with your Ghost version.

I did find, though, that Pintura had a bug in an earlier version, where stickers wouldn’t show. Are you able to download the latest version of Pintura and try uploading it to Ghost again?

Thanks for the answer @RyanF!

I was talking to Pintura support, and it is related to the mentioned bug in version 8.60.3. However, something strange happens:

Server A: Works only with the old version of Pintura.

I installed a 0 (A) server with the Ghost droplet from DigitalOcean. And the sticker function appears with version 8.60.2 but not with the latest 8.60.13 and 8.60.12. This is the configuration of server A:

Pintura: 8.60.2
Ghost Version: 5.54.4
Environment: production
Database: mysql8
Mail: Direct
Ghost-CLI version: 1.24.2
Node.js version: v16.17.0
Linux test 5.15.0-46-generic
Ubuntu: 22.04

With version 8.60.13 it does not appear.

Server B: Does not work with any version of Pintura

But on a server (B) with earlier installation it does not appear with any of the versions. This is the configuration of server B:

Pintura: 8.60.2
Ghost Version: 5.54.4
Environment: production
Database: mysql8
Mail: Direct
Ghost-CLI version: 1.21.0
Node.js version: v16.17.0
Linux test 5.4.0-153-generic
Ubuntu: 20.04

Questions about Ghost and Paint integration

a. What could it be, any dependencies?
b. Where are the Paint configuration files inside Ghost?
c. Does it have something to do if I purchased the Pintura Image Editor + Video Editor Extension license?

Division of the issue

I divide this problem in two: One part is the possible error of Pintura (that I will report news of what the support answers me) and the second part is that it is replicable in a new installation of self-hosted Ghost (A) and in an old installation of self-hosted Ghost (B).


Another problem: Editing in all uploaded images

PS: I don’t know if I open another issue, because when I was testing, I realized that the edit function only works on the feature image, but you can’t edit on the images that are added to the content (I attach screenshot).

From what I understood from the following post is that it works on all added images, or am I wrong?

There are several places where Pintura config files pop up in the codebase: https://github.com/search?q=repo:TryGhost/Ghost%20pintura&type=code

When you purchased the video editor extension, do you receive additional files? Or is it all wrapped together in a separate file?

Imaging editing does work in posts but you must be using the Beta editor.

Everything comes in the same file (zip) and inside the following files:

  • package.json
  • pintura.css
  • pintura.d.ts
  • pintura.js
  • pintura.module.css
  • pintura-iife.js
  • pintura-umd.js

Beta editor is enabled. On server A the editor does not work inside the post (the pencil icon does not appear). On server B it appears with any version of Pintura.

Possible solution

I performed an update of server B:

sudo apt-get upgrade
apt-get upgrade
Reading package lists... Done
Building dependency tree       
Reading state information... Done
Calculating upgrade... Done
The following packages have been kept back:
  fwupd
The following packages will be upgraded:
  cloud-init debootstrap python3-debian ubuntu-advantage-tools
4 upgraded, 0 newly installed, 0 to remove and 1 not upgraded.
Need to get 815 kB of archives.
After this operation, 74.8 kB of additional disk space will be used.
Do you want to continue? [Y/n]
sudo n 16.17.0

And when re-entering Ghost admin credentials, now the sticker function appears with Pintura version 8.60.2 but not in the latest version 8.60.13

I don’t know if it has something to do with the system update, re-entering credentials or disabling and enabling Ghost Editor (beta). But now the sticker function appears. It is probably Pintura error, although I do not close the possibility that the license with the video may cause some incompatibility.

I continued testing on both servers. And when I uploaded the files several times I noticed that on server B version 8.60.13 started to work. It was not a problem of login, browser or system updates. I found that the files do not load correctly on the first try and you have to do it several times until it loads correctly.

Also, I found the files I uploaded and can deduce that by deleting and re-uploading them two to three times, the editor starts working with the sticker function:

ghost-mgr@server:/var/www/ghost/content/files/2023/07$ find . -name "*pintura*"

./pintura-umd.js
./pintura.css

ghost-mgr@server:/var/www/ghost/content/files/2023/07$: sudo rm -Rf pintura*.css

ghost-mgr@server:/var/www/ghost/content/files/2023/07$: sudo rm -Rf pintura*.js

ghost-mgr@server:/var/www/ghost/content/files/2023/07$ find . -name "*pintura*"

(empty)

  • I deactivated and activated the beta editor: Settings > Labs

  • I uploaded the files (Same version of Pintura, in this case version 8.60.13) in Settings > Integration > Pintura. Save the settings and go to edit a post by reloading the page.

  • I repeated the steps up to two more times, deactivated and activated the Ghost editor (beta) and it started working. When I searched for the files they looked like this:


ghost-mgr@server:/var/www/ghost/content/files/2023/07$ find . -name "*pintura*"

./pintura-2.css
./pintura-1.css
./pintura-umd.js
./pintura.css
./pintura-umd-2.js
./pintura-umd-1.js

With this I affirm that version 8.60.13 is running on both servers following the above steps.


Update:

On desktop browser it worked, on mobile it didn’t. I repeated the steps two more times and it started working on mobile:

ghost-mgr@server:/var/www/ghost/content/files/2023/07$ find . -name "*pintura*"

./pintura-2.css
./pintura-1.css
./pintura-umd-4.js
./pintura-umd-3.js
./pintura-4.css
./pintura-umd.js
./pintura.css
./pintura-umd-2.js
./pintura-umd-1.js
./pintura-3.css

[Update] There is now a new separate download:

paint-video-1.5.0.zip

  • package.json
  • paint-video.css
  • pinturavideo.d.ts
  • pinturavideo.iife.js
  • pinturavideo.js

How should I integrate it to Ghost or is Pintura+Video incompatible?

Right, Ghost just supports the image editor integration, not the video editor.

1 Like

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.