Auto-resize IMGs?

Support area for phpBB's mChat extension
Post Reply
Kong
Donor
Posts: 13
Joined: 21 Aug 2017, 22:48

Auto-resize IMGs?

#1

Post by Kong » 23 Aug 2017, 01:49

Folks love the option to post images in the chat, but things can get pretty crazy when someone posts a gigantic pic that takes up the whole window.

Is there a way to force auto-resizing of images posted using the [img] tag in the chat to bring them down to a more manageable size (e.g. scale the height to 100px)?

terry2
Donor
Posts: 49
Joined: 22 Oct 2016, 18:22

Re: Auto-resize IMGs?

#2

Post by terry2 » 23 Aug 2017, 07:34

I use css to do it so when you hover the image it pops out

Code: Select all

.mchat-message img {
	max-width: 100px !important;
	 height: auto !important;
	-moz-transition: all 1s ease;
	 -webkit-transition: all 1s ease;
	 left: 0;
	 top: 0; 
}

.mchat-message img:hover {
	max-width: 100% !important;
        
}
1.png
1.png (14.13 KiB) Viewed 490 times
1.png
1.png (14.13 KiB) Viewed 490 times

User avatar
kasimi
mChat developer
Posts: 369
Joined: 06 Oct 2016, 09:56
Contact:

Re: Auto-resize IMGs?

#3

Post by kasimi » 23 Aug 2017, 08:37

There already is a CSS rule that restricts images posted in mChat to 100% of mChat's width. This can get pretty annoying when posting very tall images obviously. :)

How to limit it to 100px height:
  • Open ext/dmzx/mchat/styles/prosilver/theme/mchat.css
  • Find

    Code: Select all

    .mchat-text img {
    	max-width: 100%;
    }
  • Change to

    Code: Select all

    .mchat-text img {
    	max-height: 100px;
    }

terry2
Donor
Posts: 49
Joined: 22 Oct 2016, 18:22

Re: Auto-resize IMGs?

#4

Post by terry2 » 23 Aug 2017, 10:04

Yup your correct but if an image is posted some times it can be a little hard to see the small details so a hover blow up is cool to have too.


Kong
Donor
Posts: 13
Joined: 21 Aug 2017, 22:48

Re: Auto-resize IMGs?

#5

Post by Kong » 23 Aug 2017, 11:13

Thanks for the tips guys! I'll fiddle around with these later today. Terry, your option looks similar to how I envision a lightbox working—post the small image, then blow it up outside the mChat boundaries on click.

User avatar
kasimi
mChat developer
Posts: 369
Joined: 06 Oct 2016, 09:56
Contact:

Re: Auto-resize IMGs?

#6

Post by kasimi » 23 Aug 2017, 19:20

Now that you mention Lightbox, this is how to make VSE's Lightbox extension work with images posted in mChat:
  • Open ext/vse/lightbox/styles/all/template/js/resizer.js
  • Find, at the very bottom of the file:

    Code: Select all

    })(jQuery);
  • Add before:

    Code: Select all

    // Compatibility with mChat extension
    if (typeof mChat === 'object') {
    	$(mChat).on('mchat_add_message_before', function(e, data) {
    		setTimeout(function() {
    			lightboxResizer(data.message);
    		}, 0);
    	});
    }
Added on this board now too. :+1:

nou nou
Donor
Posts: 32
Joined: 10 Oct 2017, 19:38

Re: Auto-resize IMGs?

#7

Post by nou nou » 17 Oct 2017, 18:47

Works great, thank you!

Post Reply

Who is online

Users browsing this forum: No registered users and 3 guests