how to set display size of images in forum posts?

[jimspoon]

Is there a way to control the display size of images included in posts on this forum?
I've tried including "size=" and "width=" parameters in the

[img]

tag but nothing worked.

[horst.epp]

I do that while creating the images, a screen shot tool or other image tool
and not in the forum.

[NotNull]

Is there a way to control the display size of images included in posts on this forum?
I've tried including "size=" and "width=" parameters in the

[img]

tag but nothing worked.

The [img] BBCodes (size, height, width) are not supported on this forum.

[therube]

I'll assume that the board itself has some max height/width & automatically resizes larger images?
Otherwise you could host externally, either by link, or thumbnail hotlink.

Here, viewtopic.php?p=39882#p39882, the width is constrained.
(Right-click, View Image, to see the difference.)

[NotNull]

I'll assume that the board itself has some max height/width & automatically resizes larger images?

It hasn't. The shown size is limited by the "page" (the area where a post is displayed).

[jimspoon]

therube,

I looked at the source view for viewtopic.php?p=39882#p39882 - the img tag for that image begins "<img src="./download/file.php?id=1582" class="postimage"". So I looked for a reference to a "postimage" class. I think I found it in styles/prosilver/theme/content.css - as follows:
.postbody img.postimage {
max-width: 100%;
So I'm guessing that the max-width attribute is what sizes the images down to 100% of the frame width.

[jimspoon]

I found another way to change the display size of an image included in a post here. This post points to an image named Ya3fEfc.jpg on Imgur. If I add an "m" to the filename (Ya3fEfcm.jpg) to the url, Imgur will serve up a 320px width image to this forum (see below) - more info and options here - https://superuser.com/questions/1238552 ... mgur-image

[void]

I have added a imgwh bbcode.

Usage:

Code: Select all

[imgwh=width,height]Image URL[/imgwh]

32 x 32 Example:

Code: Select all

[imgwh=32,32]https://www.voidtools.com/everything.1.5.dark.mode2.png[/imgwh]

64 x 64 Example:

Code: Select all

[imgwh=64,64]https://www.voidtools.com/everything.1.5.dark.mode2.png[/imgwh]

128 x 128 Example:

Code: Select all

[imgwh=128,128]https://www.voidtools.com/everything.1.5.dark.mode2.png[/imgwh]

256 x 256 Example:

Code: Select all

[imgwh=256,256]https://www.voidtools.com/everything.1.5.dark.mode2.png[/imgwh]

512 x 512 Example:

Code: Select all

[imgwh=512,512]https://www.voidtools.com/everything.1.5.dark.mode2.png[/imgwh]

256 x 128 Example:

Code: Select all

[imgwh=256,128]https://www.voidtools.com/everything.1.5.dark.mode2.png[/imgwh]

Normal img Example:

Code: Select all

[img]https://www.voidtools.com/everything.1.5.dark.mode2.png[/img]

Large img with link Example:

Code: Select all

[url=https://www.voidtools.com/context.menu.icon.png][img]https://www.voidtools.com/context.menu.icon.png[/img][/url]

The maximum width for this board is 860 pixels.

[jimspoon]

Great! Thanks.

[therube]

(

Here, viewtopic.php?p=39882#p39882, the width is constrained.

Better had I said, "scaled", rather then, constrained.
)

I found another way to change the display size of an image included in a post here. This post points to an image named Ya3fEfc.jpg on Imgur. If I add an "m" to the filename (Ya3fEfcm.jpg) to the url, Imgur will serve up a 320px width image

Just to note, that is going to be specific to conventions used by a particular service.


Similarly, as services change over time, including their names (domains), you may be able to "resurrect" dead (hotlink'd) images (scary thought, but then Halloween is approaching) by adjusting the domain name (or parts thereof & also assuming the the file name part was carried over as it originally was).

[jimspoon]

Just to note, that is going to be specific to conventions used by a particular service.

That's right. I looked at a few other services to see if they supported serving up different versions of the same image based on alterations to the URL used to embed the image, and if so, how to do it.

OneDrive will generate different links for different versions of the same image. Google Drive and Dropbox seemed to make things a little more difficult. I looked at a couple of other image hosting services supported by my screenshot utility (ShareX) including Chevereto and vgy.me, which I had never heard of.

The odd thing is that Imgur and OneDrive only seem to support a few specific image sizes - you'd think you could edit the URL to specify an arbitrary image width (e.g. 300px) and that these services would generate that width on the fly, but that didn't work when I tried that with a OneDrive link. Maybe there is an image hoster that does support it, but I haven't found it yet. If anybody has found that, please pass along that info, would be useful.

[jimspoon]

Just experimenting with the new imgwh tag. You'll have to provide both width and height parameters - providing only a width parameter won't display an image. For the image below I just guessed that if I selected 300 as the width, the height should be about 200. It's probably not exactly the same as the original aspect ratio, but it's OK.

[therube]

With a scaled image, like above, or here, viewtopic.php?p=41511#p41511, you can see the non-scaled image, but you have to right-click the image, (selecting) 'View Image' (terminology may vary depending on browser...).

It would be nice if the board were able to provide a mouseover indication, & a left-click were able to open (in a new tab, preferably) said full image (or maybe limited to only images hosted on voidtools.com).

[void]

What about linking the large image?

For example:

Code: Select all

[url=https://www.voidtools.com/context.menu.icon.png][img]https://www.voidtools.com/context.menu.icon.png[/img][/url]

Left click = Open in current window.
Ctrl + Left Click = Open in new tab.
Shift + Left Click = Open in new window.


Displaying the image dimensions in the tooltip would be nice.
I don't see an easy way to do this..

One possible option is to set the image title.
I would not expect users to manually add a title.

[void]

I have added a imgw and imgh bbcode to preserve aspect ratios:

Code: Select all

[url=https://www.voidtools.com/everything.1.5.dark.mode2.png][imgw=64]https://www.voidtools.com/everything.1.5.dark.mode2.png[/imgw][/url]

Code: Select all

[url=https://www.voidtools.com/everything.1.5.dark.mode2.png][imgh=64]https://www.voidtools.com/everything.1.5.dark.mode2.png[/imgh][/url]

[therube]

Thank you .

[tuska]

On my PC I have noticed the following regarding matching image sizes (WITHOUT linking an image on the internet):

Monitor 24", scaling size 125%, resolution 1920 x 1280 pixel (native screen resolution)
If I scale the view to 80% in the EDGE browser, the image sizes match for one picture (unfortunately, the font size is too small -
in the EDGE browser I need a scaling of 100% to still be able to read a relatively small font in the forum).

If I do NOT scale the view to 80% in the EDGE browser, the result looks e.g. like this (the picture is displayed larger in the forum):
 

2023-02-16_Everything Options_window titles_Forum_Size.png (120.92 KiB) Viewed 12808 times

 
However, larger images, such as the composite image here, will be fitted into the forum post.
This combined picture has the following dimensions on my PC: 1563 pixel width, 564 pixel height (≈ 42 cm width, ≈ 15 cm height).
______________________________________________________________________________________________
Windows 11 Pro (x64) Version 22H2 (OS build Build 22621.1265) | FastStone Capture - calibrated Screen Ruler