Quoting posts with resized images scaled down and at their displayed aspect ratios

[Bruce Banner]

There's an extension, JoshyPHP's s9e/phpbb-ext-imgsize (https://github.com/s9e/phpbb-ext-imgsize) which modifies the default img BBCode and allows you to display an image in any dimensions you want. For example, say I post an image that's 800x600; if I post it just using the default BBCode, it'll just display at 800x600, unless the screen's too small and then it'll responsively scale down. But with the extension, I could post

Code: Select all

[img width=400]image url[/img]

and then the image will display with a width of 400 and the height scaled down proportionally to 300 to maintain aspect ratio. I could do the same thing with height and post

Code: Select all

[img height=300]image url[/img]

and then the same thing would happen in reverse. The image would display with a height of 300 and the width scaled down proportionally to 400 to maintain aspect ratio.

But I could also distort the aspect ratio and post the same image like this,

Code: Select all

[img width=1200 height=675]image url[/img]

and then the image would display with an aspect ratio of 16:9 even though its actual aspect ratio is 4:3.

What I want to be able to do is when I quote a post that has images in it, they're scaled down to a maximum width and maximum height (e.g. 256) but maintaining the aspect ratio they were displayed at in the original post.

For example, I post an 800x600 image with a width of 400 so it's displayed at 400x300. I then quote the post and the image in the quote is displayed at 256x192, still 4:3. Or I post the image with a height of 300 so it's still displayed at 400x300, then I quote the image and it's still displayed in the quote at 256x192. But say I distort the image by switching its height and width around thereby reversing its aspect ratio. So I post

Code: Select all

[img width=300 height=400]image url[/img]

Now if I quote the post, I'm looking for the image to be displayed not at 256x192 but at 192x256.

Or say I post the image like I mentioned before,

Code: Select all

[img width=1200 height=675]image url[/img]

Now, as the image is displayed at the aspect ratio 16:9, when I quote the post, the image should display at 256x144, still 16:9.

Is what I'm asking for possible without an add-on to the extension? Is it possible at all, even with an add-on? I've been experimenting with adding code to the stylesheet,

Code: Select all

blockquote img {
    max-width: 256px;
    max-height: 256px;  
}

With that code added, I've tested an image that's 1440x1080 (4:3). Here are the different ways I've posted the image, and the desired and actual results gotten when I've quoted the post with the image,

1.

Code: Select all

[img]image url[/img]

Desired result: 256x192 (4:3)
Actual result: 341x256 (Still 4:3 but I wanted the width no greater than 256)

2.

Code: Select all

[img width=720]image url[/img]

Desired result: 256x192
Actual result: 720x256

3.

Code: Select all

[img height=540]image url[/img]

Desired result: 256x192
Actual result: 341x256

This one really confuses me. Why is this actual result the same as the first actual result? If putting in width=720 resulted in the quoted image being 720x256, surely putting in height=540 should result in the quoted image being 256x540.

4.

Code: Select all

[img width=540 height=720]image url[/img]

Desired result: 192x256 (Reversing the dimensions should reverse the aspect ratio from 4:3 to 3:4; it does for the image when I post it but not when I quote it.)
Actual result: 540x256

This actual result is similar to the second actual result. When I put in width=720, the quoted image displayed at 720x256. Now that I put in width=540, the quoted image is displaying at 540x256. Makes sense. Except that what I actually put in was width=540 height=720 so the height is being completely ignored for some reason.

5.

Code: Select all

[img width=960 height=540]image url[/img]

Desired result: 256x144 (Distorting and stretching the aspect ratio from 4:3 to 16:9)
Actual result: 960x256

So this is similar to the 2nd and 4th actual results. The quoted image gets displayed at the entered width but in this case and in the 4th, the height is completely ignored.

I don't understand any of this. It all seems very counter-intuitive and illogical. I know that it's very easy to scale down images in quotes if the images are posted with just the default BBCode. If I add the following code to the stylesheet,

Code: Select all

blockquote img {
    max-width: 256px !important;
    max-height: 256px;  
}

post an image that's 1440x1080 (4:3), and then quote that post, the image will be scaled down to 256x192. If the image is 1080x1440 (3:4), it'll be scaled down to 192x256. If it's 1920x1080 (16:9), it'll be scaled down to 256x144, and if it's 1080x1920, it'll be scaled down to 144x256. Now I know the code

Code: Select all

blockquote img {
    max-width: 256px !important;
    max-height: 256px;  
}

is different to the code I tried before

Code: Select all

blockquote img {
    max-width: 256px;
    max-height: 256px;  
}

but when I'm not using the default img BBCode but putting in different widths and heights, the !important bit doesn't help, it just makes things more confusing. If I post a 4:3 image with just the default BBCode or with a width specified, the image will be scaled down in a quote to 256x192, but if I specify a height, reverse the aspect ratio, or change the aspect ratio to 16:9, I get the exact same result every time. The image is consistently scaled down to a perfect square, 256x256. I just can't make any sense out of all this.

[AbaddonOrmuz]

It's better if you share your board URL where everybody can see it in action, because there's multiple reasons it's not working as expected, and only working with conceptual or hypothetical information is usually confusing and inaccurate.

I've been experimenting with adding code to the stylesheet,

Code: Select all

blockquote img {
    max-width: 256px;
    max-height: 256px;  
}

1.

Code: Select all



Desired result: 256x192 (4:3)
Actual result: 341x256 (Still 4:3 but I wanted the width no greater than 256)

Then you might need to override its width and height, like:

Code: Select all

blockquote img {
	max-width: 256px;
	max-height: 256px;
	width: 100%;
	height: auto;
}

surely putting in height=540 should result in the quoted image being 256x540

Not really, as it should respect both max-width and max-height, so I'm guessing some other rules in your CSS are overlapping the ones you are specifying.

[Bruce Banner]

It's better if...

I don't like to share my board URL publicly but I can PM it to you if you want. The reason I thought entering a height of 540 would result in the image being displayed at 256x540 was because even though max-width and max-height are both set at 256, entering a width of 720 resulted in the image being displayed at 720x256. The max-width wasn't respected so I assumed the max-height wouldn't be either.

Using the code

Code: Select all

blockquote img {
    max-width: 256px !important;
    max-height: 256px;
    width: 100%;
    height: auto;
}

doesn't work because when I quote a post with an image, the image is displayed at its original aspect ratio, regardless of what aspect ratio it's displayed at in the original post.

[Talk19Zehn]

Hello, it works for me with pure board resources: Desktop-Test (via BBCode img (!))

content.css

find:

Code: Select all

blockquote blockquote {
	/* Nested quotes */
	font-size: 1em;
	margin: 1em 1px 1em 15px;
}

Test-Example - add after:

Code: Select all

blockquote img {
	max-height: 120px;
}

Results:

:

:

Unfortunately, I don't have any other idea at the moment. Maybe the approach will/can help ...

Regards and best wishes

[Bruce Banner]

Hello, it works for me...

You haven't fully read my original post. You've totally misinterpreted my problem. I can easily scale an image down to a specific width or height inside a quote. That's not my problem. My problem is scaling an image down while also maintaining the same aspect ratio that the image was displayed at in the original post, regardless of the image's actual aspect ratio.

[Talk19Zehn]

Hello, I read your topic with interest and found that the standard software (my testboard phpBB-3.3.2) assumes 100% for the width and height of a graphic (see content.css line 276, phpBB 3.3.2). So also in connection with the BBCode img. The configuration for images in the ACP is of course relevant. At least I could see this connection (reserved for fallacy).
In the standard system, no graphic is created in a quote block. To achieve this goal, my CSS approach (example) was sufficient to output the image as a miniature in a quote block.

I apologize for the suggestion to track down the misconduct in a test environment resulting from the request. In this regard, you got it right as I did not use this extension and for this case I did not use individual entries in individual BBCodes img to judge differences from the standard.
Unfortunately, my tip (CSS) did not help to find / correct errors / isolate errors. I'm sorry.
I agree with you: From my personal point of view, there must be some misconduct (?), as described in your case, that overrides the default behavior.

Kind regards


Edit: If remedy has been found, I am interested in this particular solution. Thanks a lot for this.

[Bruce Banner]

Anyone know a solution?

[PlanetStyles.net]

You haven't fully read my original post. You've totally misinterpreted my problem.

Why so rude? Again?

[Bruce Banner]

Been trying all I can think of. Thought I could use vars but they have to have a set value. Then thought I could use the calc function but it's not working the way I wanted it to. I don't understand why width and height seem to be processed so differently from each other.

[Bruce Banner]

Latest I was told was that I'd need to use javascript to be able to scale down images in quotes in the same aspect ratio as I originally displayed them. I think that'd be probably be too much bother.