MyBB Community Forums

Hello and welcome to my annual "Another image bug in editor" bug report series.

Since 1.8.23, you can't size images both via "Insert an image" button, and manually using width= height= codes.
I tested this issue in MyBB forums aswell.

1. "Insert an image" reproduction
Click on insert an image button in editor, paste any image link.
Fill only Width or only Height values, either one.
See editor simply ignored your input and didn't resize the image accordingly.

"Insert an image" values work, only if you fill both areas (height and width) - this is not how it's supposed to work. You can't calculate exact width and height of image (unless it's 100x100) everytime you want to resize, you would simply put width value (let's say 500) and make forum figure out the height. Currently, you can't do it. It doesn't work.

2. Manual reproduction
Previously when you leave the image code like this:

[img width=700]https://cdn.discordapp.com/attachments/158927454835048448/776097619687899187/aometkinlik.png[/img]

And switch between source mods, it would keep the width 700, and figure out height value, therefore resizing the image.
Now it does nothing, simply ignores your width value.

Quite annoying issue, we should fix that

Hi,

Thank you for your report. We have pushed this issue to our Github repository for further analysis where you can track our commits and progress with fixing this bug. Discussions regarding this bug may also take place there too.

Follow this link to visit the issue on Github: https://github.com/mybb/mybb/issues/4180

Thanks for contributing to MyBB!

Regards,
The MyBB Group

I found the code from MyBB 1.8.20:

$.sceditor.command
			.set('image', {
				exec:  function (caller) {
					var	editor  = this,
						content = $(this._('<form><div><label for="link">{0}</label> <input type="text" id="image" value="http://" /></div>' +
							'<div><label for="width">{1}</label> <input type="text" id="width" size="2" /></div>' +
							'<div><label for="height">{2}</label> <input type="text" id="height" size="2" /></div></form>',
								this._("URL:"),
								this._("Width (optional):"),
								this._("Height (optional):")
							))
						.submit(function () {return false;});

					content.append($(this._('<div><input type="button" class="button" value="Insert" /></div>',
							this._("Insert")
						)).click(function (e) {
						var	$form = $(this).parent('form'),
							val = $form.find('#image').val(),
							width = $form.find('#width').val(),
							height = $form.find('#height').val(),
							attrs = '';

						if(width && height) {
							attrs = '=' + width + 'x' + height;
						}

						if(val && val !== 'http://') {
							editor.wysiwygEditorInsertHtml('[img' + attrs + ']' + val + '[/img]');
						}

						editor.closeDropDown(true);
						e.preventDefault();
					}));

					editor.createDropDown(caller, 'insertimage', content);
				}
			})
			.set('quote', {
				exec: function() {
					this.insert('[quote]', '[/quote]');
				}
			});
	}

(Replace line 585 to 635 inside '/jscripts/bbcodes_sceditor.js' with the above code to replicate the functionality spoken of in the thread).

The code is taken from the 1.8.20 version of inserting images in partial mode. I didn't spend much time looking at what would happen if a simple replacement was made. Still, from what I could see within testing (I only superficially tried replicating the task of inserting an image with different dimensions and changing dimensions in source with 'width=200' etc.), there was basically no difference visually.

I haven't looked much at the code, but maybe by reviewing this code, a solution to the formed issue [#4180] can be created more easily?

you can try this..
https://github.com/mybb/mybb/issues/4180...-753248338

Did anyone test the solution?