CODEWITHSUNDEEP
slack-apiimage-galleryslack-block-kit
bezl
bezl

Reputation: 171

Slack API - how to send multiple images so they are shown in a gallery

When I send multiple images via api using blocks like this:

{
    "blocks": [
        {
            "type": "image",
            "title": {
                "type": "plain_text",
                "text": "Please enjoy this photo of a kitten"
            },
            "image_url": "http://placekitten.com/500/500",
            "alt_text": "An incredibly cute kitten."
        },
        {
            "type": "image",
            "title": {
                "type": "plain_text",
                "text": "Please enjoy this photo of a kitten"
            },
            "image_url": "http://placekitten.com/500/500",
            "alt_text": "An incredibly cute kitten."
        },
        {
            "type": "image",
            "title": {
                "type": "plain_text",
                "text": "Please enjoy this photo of a kitten"
            },
            "image_url": "http://placekitten.com/500/500",
            "alt_text": "An incredibly cute kitten."
        }
    ]
}

Slack shows them like a separate blocks and doesn't combine them into a gallery: slack screenshot - API

When I upload them using Slack app in one message - it combines them into a gallery: slack screenshot - with gallery

I've tried blocks, attachments, third-party urls, permalinks after file.upload - the result is the same, Slack doesn't combine them into gallery.

So, the question is - how do I make it that Slack shows several images in a gallery?

Upvotes: 6

Views: 4447

Answers (2)

ahollenbach
ahollenbach

Reputation: 562

Based on your comment,

[...] permalinks after file.upload [...]

this related answer might help (I also added this clarification there).

When uploading files and collecting their permalinks, you must link them in the text param in the message payload (putting them in a mrkdwn block in the blocks param will not work).

In javascript, this looks like:

const result1 = await web.files.upload({...})
const result2 = await web.files.upload({...})
await web.chat.postMessage({
  text: `Here are files in a gallery view <${result1.file.permalink| ><${result2.file.permalink| >`,
  ...
})

Upvotes: 3

bezl
bezl

Reputation: 171

UPD: Just got an answer from Slack developers support: slack dev support answer screenshot

Unfortunately, horizontal/gallery formatting of images is not possible using the block kit builder. However, I'm going to go ahead and pass your email on to our product team so that they can take this into consideration for future updates.

Upvotes: 11

Related Questions