# Calculate Imagedimensions on the basis of surface area and ViewportDimensions, - need a Maths-Expert :-)

## Recommended Posts

Hi everyone.

I'm coming to an old thema of mine. When it comes to present different sized and different orientated images on screens, it is always a bit frustrating.

Maybe most time (on desktop) there is a landscape oriented widescreen, on which you can show a panorama image (2:1) very large but that it fits into the viewport.

If you want to show a square image (1:1) you only have the half (content/amount?) of surface area. (The image only has half superficial content).

And if you want show a Portrait (maybe 2:3) this image is somewhat more smaller displayed than the square one.

So, I'm searching for some math that calculate dimensions depending on a equivalent superficial content and depending on the available viewport.

Puh!

But maybe it also shouldn't be a (technical) linear one. when downsizing the panorama to an equivalent, it looks a bit poor, alone in the viewport.

For example, with the width and height of an image one can create a superficial content number: 100 is a square, 200 is a 2:1 and so on:

1:1 = 100
5:4 = 125
4:3 = 133
3:2 = 150
2:1 = 200

Is there anybody on the forums who can build a elegant maths formula for that?

Or there are other suggestions, thoughts to that?

• 1

##### Share on other sites

1 + 2 = 3?

I understand what you mean but can't really see what the problem is and why not just serve images with a maximal width or height depending on what ratio width and height you have. Hard to explain for reason, there's no bulletproof way, what if you resize the viewport from landscape to portrait?

##### Share on other sites

My problem is exactly that I don't want serve, for example, all images with a max width, because then an image with 2:1 is three times larger than one with 2:3, or has double surface area of a square image. So it appears to be much more important than the smaller displayed ones.

What I need is a formula that calculates the equivalent surface area depending on the viewport for different images.

For example you have three images

w   x    H

A  3000 x 1800 px

B  2300 x 2300 px

C  1500 x 2000 px

the max useable viewport is 600 x 600, how would you calculate the new dimensions for the three images, so that they all fit into the viewport and have all a equivalent surface area?

##### Share on other sites

You misunderstood what I meant with max width. I meant the width of the larger viewport side. So maybe what you have in mind already. It was just a little confusion what the desired result is with all those screenhots . I'm just curious what you plan to do if ratio/orientation changes or if images have extreme ratios? Meaning to calculate the space of the area and resize the images according to that may result in having a image larger than viewport...

Well I once I had such a calculation (can't remember exactly) It should be pretty easy to get a max width or height depending on orientation ratio.

```\$vw = 600;
\$vh = 600;
\$spacing = 50;

\$images = array(
array(3000,1800),
array(2300,2300),
array(1500,2000)
);

\$ratio = \$vw/\$vh;
if(\$ratio < 1) { // portrait
\$max = \$vw - \$spacing;
} elseif(\$ratio > 1){ // landscape
\$max = \$vh - \$spacing;
} else { // square
\$max = \$vh - \$spacing;
}

foreach(\$images as \$im) {
if(\$im[0] > \$im[1]) { // landscape image
echo "w: ". \$max . " h: " . round(\$max/\$im[0] * \$im[1]) . "<br/>";
} elseif(\$im[0] < \$im[1]) {// portrait
echo "w: ". round(\$max/\$im[1] * \$im[0]) . " h: " . \$max . "<br/>";
} else { // square
echo "w: ". \$max . " h: " . \$max . "<br/>";
}
}
```

And this would be a area square calculation and you'll quickly see what I mean.

```\$vw = 800;
\$vh = 600;

\$images = array(
array(3000,1500),
array(2300,2300),
array(1500,2000)
);

\$area = \$vw*\$vh;

echo "area: " . \$area . "<br/>";
foreach(\$images as \$im) {
\$r = sqrt(\$area/(\$im[0] * \$im[1]));
\$w = floor(\$im[0] * \$r);
\$h = floor(\$im[1] * \$r);
echo "w: ". \$w . " h: " . \$h . " (area = " . (\$w * \$h) . ")<br/>";
}
```
• 2

##### Share on other sites

You misunderstood what I meant with max width. I meant the width of the larger viewport side. So maybe what you have in mind already. It was just a little confusion what the desired result is with all those screenhots .

Ah, ok!

I'm just curious what you plan to do if ratio/orientation changes or if images have extreme ratios? Meaning to calculate the space of the area and resize the images according to that may result in having a image larger than viewport...

Hhm, yeah, that's exactly the point what I meant with

the max useable viewport is X * Y,

how would you calculate the new dimensions for the three images,

so that they all fit into the viewport and have all a equivalent surface area?

it is shown in the second screenshot:

----------------

Yeah, and what can be done when images are (pre)loaded and the user resizes the window? Good question. Til now I have only the solution to use some javascript to keep track of viewport-sizes and imagesizes, and if the viewport resizes somehow smaller it's ok, just display images smaller too. But if it changes orientation extremly or switch from a small window to fullscreen, puh, I have to reload!

But how to reload only the images that needs to be displayed larger than the first downloaded version, I haven't solved it yet.

##### Share on other sites

- only it has to result in images that all fit into the viewport.

I think, one has to decide which is the max landscape ratio image dimensions and which is the max for portraits that one want take care of:

2:1 for landscape and 2:3 for portraits, for example,

than one has to calculate the area(s) for the smaller (?) one of them (depending on viewport) so that they fit into it.

After that, one has to calculate all images that are between 2:1 and 3:2 that they get close to that area.

Extreme ratios get smaller, but this ones are rare.

This is a linear solution!

This may lead into small and poor looking images on large canvas, so one have to find something between the linear equivalent version and one that takes into account the single image presentation and shows landscapes in a landscape-viewport a bit larger, and portrait-images in a portrait-viewport a bit larger.

• ### Similar Content

• Hi,
maybe kind of related to https://processwire.com/talk/topic/13286-image-description-not-saving/ but with other environment bits.
While adding a new page/edit a existing page containing a image field, the image itself gets stored into the database but strangely the entered description does not. More strangely this only happens on my staging server. Within my local dev environment all is fine. And beside of this particular problem, all parts of the PW instance works fine. On both environments (s. below).
First suspicion was the varying PHP/mysl versions of the local <-> staging environment. But, there are many working projects with the identical setting (s. below).  And i never encounter this problem so far.
No error/log/console output. It just fails to get stored.
Local Environment: PHP  7.4.6, mysql 5.7.29, PW 3.0.148
Staging Environment*: PHP 7.0.33, maria DB 10.1.46, PW 3.0.148
Maybe someone has a hint what to try?  Thanks in advance.
*) I cannot change the staging server php/mysql settings because its part of a shared hosting account.
• By arnd
Hi,
I have a repeater with some images in it.
As Superuser I can work with the Actions (rotate...). But my Users with lower Rights can't use this Actions.
The same User can use the Actions on images outsite a Repeter-Field. So I think it's not a Problem of Rights-Management but from Images in Repeater Fields.
ProcessWire 3.0.164.  Bug? Or can I manage this in the settings?
• By Mats
BETA: SplashAndGrab
This module attaches a search input to selected image fields that lets you search and download images from Unsplash.
You can search by string, colors, orientation/crop and order by relevance or time published
I find Unsplash useful both for placeholder images when building sites but also as a time saver for editors if they don’t have any images at hand, just search, download and publish.

Thanks to @apeisa for building the  FlickrInputField Module and @Robin S for AddImageUrls,  took a lot ideas and code from those modules.

• We have created a module to create BlurHash strings for images while uploading in ProcessWire. This blurry images will be saved in the database because they are very small (20-30 characters) and can be used for Data-URL's  as placeholders for image-lazy loading.
https://github.com/blue-tomato/ImageBlurhash
E.g. where we use this in production:

• Hello dear PW gurus.

I have stumbled over a strange error that i all of sudden got when trying to upload an image to a images field on a page.
There where images allready stored in the field that i wanted to keep, but during the upload the error apear and after that all images are gone from the field and i can´t upload any, i just get the error every time.
I am running ProcessWire 3.0.153 dev.
Update:
After looking in the assets folder i find the folder for the page and the image files seems to be there including the ones i tried to upload when the error occured.
But they don´t show up in the images field in the page editor.

The error reported:

SQLSTATE[01000]: Warning: 1265 Data truncated for column 'ratio' at row 1 And here is a screenshot of the event:

The TracyDebugger Error reporting:

I hope you fine folks could point me in a direction.
But it seems our old pal set_time_limit() is back.

Regards, EyeDentify
×
×
• Create New...