Host slice preview image externally in Slice Machine

Developing with Prismic
1

Hi team,
I am wondering if it's possible to host slice preview images externally like Cloudinary rather than put them into the repo? Each image are around 100kb which will increase the repo size in the long run.

The structure for loading the image under library-state.json:

"screenshotPaths": {
          "default-slice": {
            "path": "/slices/default-slice/preview.jpeg",
            "width": 2304,
            "height": 1358
          }
        }

I have tried to replace this path with an external path but it didn't work.
Any help would be greatly appreciated, thanks!

3

Hello @patrickzsy

Thanks for reaching out to us.

With the latest version of Slice Machine, this file wouldn’t be used anymore. First, I would recommend you update your project with the latest version of the Slice Machine. Here is a link to install the latest version of the Slice Machine.

To host Slice preview images externally, I will come back to you once confirmed with the Slice Machine team.

Thanks,
Priyanka

4

Hi @Priyanka Thanks for your reply. Unfortunately due to our current node version(node 12.22.3) we are unable to upgrade our slice machine to date, it's currently sitting at 0.4.2. Looking forward to hearing from you soon about the hosting preview images externally.

5

Hello @patrickzsy

Preview images can be external, but slices would have to be pushed manually and not through the UI to consider this.
Replacing the image in library-state.json won't have any effect other than when previewing Slice.
You would have to inject the URL of your images when pushing Slices to Prismic.

Let me know if you have any further questions.

Thanks,
Priyanka

6

Hi @Priyanka Thanks for the update. Could you elaborate a bit more on "You would have to inject the URL of your images when pushing Slices to Prismic." ? Where should I inject the URL of my images if it's can't be done through Slice Machine UI?

7

Hello @patrickzsy

From what I understood from your problem, You don't want screenshots to be stored in your GitHub repositories due to size.

So if you want to use the feature, there are two cases.

  1. You can push the screenshots only when they finish working before going to production, this means Slice Machine would store those screenshots.
  • This requires having a screenshot locally for each developer every time.
  • This can be secure using .gitignore to ensure screenshots are not committed.
  1. You can store screenshots outside of Prismic, meaning screenshots must be added manually to the Slice each time you push, It means you can't use Slice Machine to add the screenshots.

I hope I have addressed your question. Let me know if you need any further assistance.

Thanks,
Priyanka

1 Like
8

Hi @Priyanka , thanks for the explanation! If we are going for number 2, we are currently having cloudinary to host the URL of screenshot images. Right now, we are already using "custom screenshot" button to manually add screenshot in Slice Machine UI. But this also creates a png which is increasing the repo size, I was wondering if we can just use some sort of external url to approach with the same result.