Access asset colors from API

Support
1

Hi all!
I’m currently transitioning my portfolio site from Koken to Cockpit. On the current site, I have a little display of the colors used in the image (example). This is done with Javascript on the front-end, which isn’t optimal. In my asset view in Cockpit, I noticed there’s already a table of colors for the images. Unfortunately, I can’t figure out how to access those through the API. Can you help me out? Thanks in advance!

1 Like
2

Hi @BraininaBowl

Welcome to the Cockpit community! :sunglasses:

Wow - I didn’t know that the Asset Manager extracts the colors! That’s actually super nice!
Getting the colors used in a certain image is actually super easy :grin: So let’s go.

I don’t know how you’re getting the photos from Cockpit, but here’s a complete rundown on how I’d do it:

First thing I’d do is to tag all images you want to appear in your gallery. This can be done easily on the right side if you’re clicking on an asset:

image
image1540×648 121 KB

Now that you’ve tagged all photos you want to appear in your gallery, you can get them by making the following request:

POST https://YOUR_COCKPIT_INSTANCE/api/cockpit/assets?token=YOUR_API_TOKEN

This will give you all assets. To filter just for those you’ve tagged for the gallery, add this filter to the request body:

{
    "filter": {
        "tags": {
            "$in": ["MyAwesomeTag"]
        }
    }
}

Now you’ll only get the assets that have the Tag “MyAwesomeTag” set.
Response will look something like this:

{
    "assets": [
        {
            "path": "/2022/05/30/293A9731_uid_6294779054fd4.jpg",
            "title": "293A9731.jpg",
            "mime": "image/jpeg",
            "description": "",
            "tags": [
                "MyAwesomeTag"
            ],
            "size": 1388190,
            "image": true,
            "video": false,
            "audio": false,
            "archive": false,
            "document": false,
            "code": false,
            "colors": [
                "#cbc0bb",
                "#241d1a",
                "#776056",
                "#939495",
                "#8b8b8c"
            ],
            "width": 1080,
            "height": 1920,
            "created": 1653897104,
            "modified": 1657715169,
            "_by": "091284a5326166097d00013d",
            "folder": "",
            "_id": "c77e7a3f663563bf4e00016e"
        }
    ],
    "total": 1
}

In order to decrease the amount of data the client has to fetch, you might expand your request body like this:

{
    "filter": {
        "tags": {
            "$in": ["MyAwesomeTag"]
        }
    },
    "fields": {
        "path": 1,
        "_id": 1,
        "colors": 1
    }
}

This will only give you the fields path, _id and colors in the response.

Now you can show the Picture in your gallery by defining the img src something like this:

let src = 'https://YOUR_COCKPIT_HOST/storage/uploads' + response.assets[pointer].path

… and the colors are available for you at colors.

So the process of loading the photos might look something along those lines:

// First get the assets via XHR. Store API response in variable called response.

const cockpitPrefix = 'https://YOUR_COCKPIT_HOST/storage/uploads';
let currentImage = {}

response.assets.forEach((image) => {
  currentImage.source = cockpitPrefix + image.path;
  currentImage.colors = image.colors
  currentImage.id = image._id;
  // Create your image in the DOM.
  // You can use the ID parameter for finding and modifying the DOM element later if you want to.
});

Hope this helps! Let me know if it did.

Cheers buddy

2 Likes
3

@BraininaBowl How do you make use of the extracted colors in your gallery? Just wondering because I’m sure you can do cool stuff with this. Would be cool if you could show me how you’re implementing it :slight_smile:

4

Hi @Jamo Thanks for the extensive reply! I’m pretty new to api calls in Javascript, but I’m sure I can make it work.

In my current (old) site, I’m using the extracted colors twice. My gallery consists of pixel art animations made with very different but limited color palettes. I want the background to match the image, but I don’t want to manually pick a background for every image I upload. So I’m using the two most prominent colors from the image to create a gradient background. Compare an image using the harsh Pico-8 palette to an image using the softer darchangel palette:

image
image1077×882 72 KB
image
image885×826 22.9 KB

I also use it to actually display the colors I used underneath the image, but I might drop that on the new site and just link to an external online palette repository.

1 Like
5

@BraininaBowl Wow, those artworks are really nice! Thanks for sharing your way of implementing it :slight_smile:

I just had to use it too, so I’m now showing the colors when hovering photos. It’s absolutely unnecessary, but I like it :joy:

image
image529×510 70.4 KB

I’m pretty new to api calls in Javascript

Please don’t hesitate to hit me up if you need further help! I’d love to help you build that new gallery.
If you have problems making the requests, feel tree to check out my public frontend for Cockpit!
There you’ll find a global function which I use for each and every API request.

The usage is super simple:

// Call the Cockpit API ...
callApi(YOUR_API_ENDPOINT,STRINGIFIED_JSON_BODY,METHOD,'application/json',(response) => {
  // ... and have fun with the response :)
  console.log(response);
});

Have a great day and all the best with your art :v:

6

Thanks again. Is it also possible to fetch the colors if I’m getting the image as part of a collection? I’ve build a collection with the name, date, image, link and some other data. I don’t think I can add all that straight to the asset, right?

7

Sure!

When you use an image in a collection, it’s just a link to the assets. So if you make a second request to the assets, just as discussed earlier in this conversation, where you search for the linked image with a filter, you should be abled to also get the colors.

Let me know if this helped.