JSQMessage show image in message

Question

how can do to show the full image in bubblemessage.

I show the image but it is cut:

see image

thank you

Answer 1

I do not believe that there is a function that you can override to get the desired result. But on the other hand if you would like to fork the JSQMessageViewController and modify it yourself. If you go to the source project go to jSQMessages/JSQMessagesViewController/Model/JSQPhotoMediaItem.m under the mediaView Starting at line 74

if (self.cachedImageView == nil) {
    CGSize size = [self mediaViewDisplaySize];
    UIImageView *imageView = [[UIImageView alloc] initWithImage:self.image];
    imageView.frame = CGRectMake(0.0f, 0.0f, size.width, size.height);
    imageView.contentMode = UIViewContentModeScaleToFill;
    imageView.clipsToBounds = YES;
    [JSQMessagesMediaViewBubbleImageMasker applyBubbleImageMaskToMediaView:imageView isOutgoing:self.appliesMediaViewMaskAsOutgoing];
    self.cachedImageView = imageView;
}

if you change line 78 imageView.contentMode = UIViewContentModeScaleAspectFit; to imageView.contentMode = UIViewContentModeScaleToFill; if you add imageView.backgroundColor = [UIColor lightGrayColor]; you will have the bubble shape also. Here are some screen shots of before and after.

Before Code Change

After Code Change

Answer 2

ok here my code:

override func viewDidLoad() {
        super.viewDidLoad()



    self.collectionView?.collectionViewLayout.outgoingAvatarViewSize = CGSizeZero

    self.collectionView?.collectionViewLayout.incomingAvatarViewSize = CGSizeZero

    self.inputToolbar?.contentView?.rightBarButtonItemWidth = CGFloat(34.0)

    self.inputToolbar?.contentView?.rightBarButtonItem?.setTitle("Invia", forState: .Normal)

    self.inputToolbar?.contentView?.textView!.placeHolder = "messaggio.."

    setUpMessages()



    // Do any additional setup after loading the view.
}    


override func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {

    return self.messages.count
}



override func collectionView(collectionView: JSQMessagesCollectionView!, messageDataForItemAtIndexPath indexPath: NSIndexPath!) -> JSQMessageData! {



    return self.messages[indexPath.item]
}

override func collectionView(collectionView: JSQMessagesCollectionView!, messageBubbleImageDataForItemAtIndexPath indexPath: NSIndexPath!) -> JSQMessageBubbleImageDataSource! {

    let factory = JSQMessagesBubbleImageFactory()

    if messages[indexPath.row].senderId == senderId {
       return factory.outgoingMessagesBubbleImageWithColor(UIColor.lightGrayColor())
    } else {
       return factory.incomingMessagesBubbleImageWithColor(UIColor.greenColor())
    }

}



override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
    let cell = super.collectionView(collectionView, cellForItemAtIndexPath: indexPath)
    let message = self.messages[indexPath.row]

    return cell
}

override func collectionView(collectionView: JSQMessagesCollectionView!, avatarImageDataForItemAtIndexPath indexPath: NSIndexPath!) -> JSQMessageAvatarImageDataSource! {

    return nil
}

func setUpMessages() {

//load text messages:

    let mes1: JSQMessage = JSQMessage(senderId: "10", displayName: "io10", text: "Ciao")
    let mes2: JSQMessage = JSQMessage(senderId: "10", displayName: "io10", text: "Ciao2")
    let mes3: JSQMessage = JSQMessage(senderId: "10", displayName: "io10", text: "Ciao3")
    let mes4: JSQMessage = JSQMessage(senderId: "10", displayName: "io10", text: "Ciao4")

    messages.append(mes1)
    messages.append(mes2)
    messages.append(mes3)
    messages.append(mes4)

//load image message

   let img2 = JSQPhotoMediaItem(image: UIImage (named: "default"))

   let mes5 = JSQMessage(senderId: "10", senderDisplayName: "io10", media: img2)

    messages.append(mes5)        


}