Image and GIF Messages
Users can send image messages and GIF messages through the built-in image plugin in IMKit. These messages will appear in the message list component of the chat UI. By default, the SDK sends messages containing the following message content objects:
- Image message content class: RCImageMessage (type identifier:
RC:ImgMsg
) - GIF message content class: RCGIFMessage (type identifier:
RC:GIFMsg
)
Limitations
- Only local images and GIFs are supported.
- Maximum GIF file size: 2 MB.
- Files in image and GIF messages are uploaded to RC servers by default. To upload to your own server, you need to intercept the message and handle the upload manually. For details, see Intercept Messages.
Usage
The extension panel includes a default entry for sending image messages, implemented by the built-in Photo
feature in IMKit. Users can click the +
button on the right side of the input bar to expand the extension panel, then select the image icon to open the local photo album and choose an image or GIF file to send.
Customization
Adjust Image Compression Quality
Before sending, images are compressed and thumbnails are generated for display in the chat UI. GIFs do not have thumbnails and are not compressed.
- Thumbnails for image messages: The SDK generates a larger image at 30% of the original quality, adhering to standard size requirements (longest side ≤ 240 px), for upload and sending. The thumbnail is used for display in the chat UI.
- Images: If "Send Original Image" is not selected, the SDK generates a larger image at 85% of the original quality, adhering to standard size requirements (longest side ≤ 1080 px), for upload and sending.
Modifying the SDK's default compression settings is generally not recommended. To adjust compression quality, refer to the knowledge base article How to Modify SDK Default Image and Video Compression Settings.
Customize Image and GIF Message UI
Image and GIF messages are displayed in the message list by default using the following templates:
RCImageMessageCell
RCGIFMessageCell
To modify built-in message styles, we recommend customizing the message cell and providing it to the SDK. All message templates in IMKit inherit from RCMessageCell
, so custom message cells must also inherit from RCMessageCell
. For details, see Modify Message Display Styles.
You can also directly replace the style resources, string resources, and icon resources referenced in the message display templates within RongCloud.bundle
. Refer to the IMKit source code: RCImageMessageCell.m, RCGIFMessageCell.m.
Customize Photo Album List Page UI
Resource | Modification Method |
---|---|
Top-left/top-right buttons | Modify by setting the global tintColor of UIBarButtonItem . |
Selection button (top-right corner of images) | Replace the image resources photopicker_state_normal and photopicker_state_selected . |
Other buttons | Modify via the relevant fields in the photoPicker dictionary in RCColor.plist (path: IMKit/Resources/RCColor.plist ). |
Customize Photo Album Preview Page UI
Resource | Modification Method |
---|---|
Back button (top-left corner) | Replace the image resource navigator_btn_back . |
Selection button (top-right corner) | Replace the image resources photo_preview_unselected and photo_preview_selected . |
Other buttons | Modify via the relevant fields in the photoPreview dictionary in RCColor.plist . |
Checkbox for "Send Original Image" | Replace the image resources selected_full and unselected_full . |
Hide the Image Entry in the Extension Panel
IMKit enables the image entry in the extension panel by default. To hide it, remove the specified extension item via RCConversationViewController.chatSessionInputBarControl.pluginBoardView
before displaying the chat UI.
For details, see Input Area.