User Specific Avatar in Jsqmessagesviewcontroller with Sdwebimage

Assigning avatars from URL string in JSQMessagesController

Ya, What you are looking for is the 'JSQMessagesAvatarImageFactory' Documentation Link

Since you have your userProfilePicture Then you just need to get the image data for that url. You can do this a number of ways I personally love to use a framework that handles catching for you. SDWebImage or AlamofireImage or how ever else you want to get that data.

I like AlimofireImage so that is what I will demonstrate here. To make it so that I do not have to keep making downloading request for each cell I save them in a dictionary using the senderID as a key. If the dictionary entry is there I don't make the request. Define your dictionary.

var avatarDictionary: [String:UIImage] = [:]

Then after retrieving all the messages for the conversation call getAllAvatars()

func getAllAvatars() {
    for message in messages {
        guard let key = message.senderID else { return }
        if avatarDictionary[key] == nil {
            try? _ = imageDownloader?.download(URLRequest(url: API.userPhoto(userID: key).asURL()), completion: { (response) in
                guard let image = response.result.value else { return }
                self.avatarDictionary[key] = image
                self.collectionView.reloadData()
            })
        }
    }
}

API.userPhoto(userID: key).asURL() is the url to your image data source so this is what you will change for the url you have.

There are a few other methods you could also take a look into. I made my own function to give me a defaultAvatar for users with no image. It looks like this

func blankAvatar(message: Message) -> JSQMessageAvatarImageDataSource {
    return JSQMessagesAvatarImageFactory.avatarImage(withUserInitials: initialsFrom(firstName: message.fistName, lastName: message.lastName), backgroundColor: UIColor.gray, textColor: UIColor.white, font: UIFont.systemFont(ofSize: 14), diameter: UInt(kJSQMessagesCollectionViewAvatarSizeDefault))
}

Then you can return a image if it is there or a blank avatar if not from the avatarImageDataForItemAt method

return avatarDictionary[id] == nil ? blankAvatar(message: message) : JSQMessagesAvatarImageFactory.avatarImage(with: avatarDictionary[id], diameter: UInt(kJSQMessagesCollectionViewAvatarSizeDefault))

Also don't forget to set the size of the avatars for the collectionView

 collectionView?.collectionViewLayout.incomingAvatarViewSize = avatarSize
 collectionView?.collectionViewLayout.outgoingAvatarViewSize = avatarSize

or they wont show at all.

Let me know if you need more help .

Change position of Avatar in JSQMessageViewcontroller

They have maintain separate cell xibs. You just need to do changes in those xibs, also need to add new constraints according to your need.
Use this xib

How to add alpha property to an UIImage set with SDWebImage?

Thanks to @Happiehappie 's comment and also this answer from another post I was able to apply the alpha property. Here is the final working code...

posterBackground.sd_setImage(with: URL(string: movieImage!), placeholderImage: UIImage(named: "poster-placeholder"), options: SDWebImageOptions(rawValue: 0), completed: { (image, error, cacheType, imageURL) in   
    self.posterBackground.image = image?.alpha(0.15)
})

Loading a remote image is breaking JSQMessagesAvatarImageFactory

This is because your image is not loaded at the time the view wants it. This can be solved by using a default image to stand in till you can get your image back. You can create a method for giving you a default blank avatar that you use initially then if your request returns update the avatar for that cell.

func getBlankAvatar() -> UIImage {
   let blankAvatar =  JSQMessagesAvatarImageFactory.avatarImageWithUserInitials("?", backgroundColor: .gray, textColor: .white, font: UIFont.systemFontOfSize(14), diameter: UInt(kJSQMessagesCollectionViewAvatarSizeDefault))

Also as an optimization if you create a dictionary for users in the conversation and get the remote images for them and save it to this dictionary then you only need to make the request once and can pull from that dictionary for your individual message cells.

/p>

---

Related Topics