Jump to content
horst

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!

post-1041-0-67409300-1372079807_thumb.jp  post-1041-0-82719700-1372079806_thumb.jp

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?

post-1041-0-61736500-1372080659_thumb.jp

  • Like 1

Share this post


Link to post
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 this post


Link to post
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 this post


Link to post
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 :D. 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/>";
}
  • Like 2

Share this post


Link to post
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 :D.

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 :lol:

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: post-1041-0-42229800-1372103952_thumb.jp

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

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 this post


Link to post
Share on other sites

Soma, your maths is good!

- 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.

Share this post


Link to post
Share on other sites

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By Marvin
      Hello, my name Marvin, i want to ask something. I'm new at processwire, and still learn it, i try yo showing an image, at a table, the image was show, but i can't resize the image
      please HELP
      Here i attach, my code belor
      <?php $num = 1; foreach($pages->get("/files/")->children as $child) { $current = $child === $page ? " class='current'" : ''; $result = $child->images; // $result->width(900); // $result->height(100); foreach($result as $items){ foreach($pages->get($child->name)->files as $file) { // $file = $child->files; // echo $file->name; echo "<tr><td>".$num++.".</td><td>".$child->title."</td><td>".$child->text_1."</td><td>".$child->text_2."</td><td>".$child->text_3."</td><td><a href='".$file->httpUrl."'>".$file->name."</a></td><td><img src='".$items->url."'></td></tr>"; } } } ?>  
    • By Bike
      Hello everyone!
      I am new to PW and at this moment there are these issues that I cannot clearly understand:
      1) Image Position
      Previously I used TinyMCE and there I could get an image floating left or right by simply selecting it and pressing the text justify buttons from the menu bar. In CKEditor however it just causes the hole paragraphs content to be aligned which results in code like this and of course the image is not floating that way:
      <p class="xyz" style="text-align:right"><img alt="" src="someimage.jpg" width="1000" /></p> Q: Is it possible to add float to images just by clicking the text align buttons? As far as I figured it out the only way to align images is within the image dialouge which I find is pretty inconvenient.
      2) Image Caption / Figure / Figcaption
      When a title is given to an image it is wrapped inside a figure tag and a figcaption tag is applied. That's fine. But I need the image to be wrapped inside another picture tag for styling reasons (I want to add a shadow png with picture::after). I'd like to end up with this:
      <figure><picture><img alt="" src="someimage.jpg" width="1000" /></picture> <figcaption>Caption there</figcaption> </figure> Q: I think I have to modify the plugins code to achieve it, right? If so does anyone knows the file / location?
      Q: If a figure tag is placed how would I change its position say to another paragraph? Drag & drop just relocates the image leaving the figure tag where it was. How to reposition the whole thing?
      Q: How / where would I enter image description the be shown only in say a lightbox but not alongside the image itself? I thought the textarea provided in the image field could do the job but how to access it from the editor? Even possible?
      Well I hope someone understands and I'd be thankful for a clue of any of these questions.
      ✌️ Bike
       
    • By theoretic
      Hi there! And thanks for Processwire!
      It appears there's a possible bug in Processwire 3.0.170 concerning file and/or image inputfield. Creating such a field results in the following error:

      Fatal Error: Uncaught Error: Call to a member function get() on null
      The inputfield is created however. The closer look reveals a problem at line 60 in wire\modules\Fieldtype\FieldtypeFile\config.php:
      if(!$value) $value = $fieldtype->get('defaultFileExtensions'); Commenting this line removes the problem, but the newly created inputfield requires 'Allowed file extensions' config option to be set (which is rather expectable since i commented the above-cited line of code). Never faced this problem before, hope it can be resolved.
    • By picarica
      so this is really weird issue i am so confused about this, so i have setup 'images' field where i put images and the include them in CKeditor, should work right? well it works on some sites, i use it nearly in every page but at one page, the images included in that CKeditor only show up, when i am logged into processwire, when i turn on incognito mode the images dissapear, but only on this specific page, everywhere else it works perfectly, has anyone came across this issue? i have nowhere in the site login checker, i have no idea what is going on
    • By picarica
      so i am trying to fetch dimensions of image using getimagesize() but it returns nothing, at least i think so, i want to feed it to data attribute, bit its emtpy, i tried feeding it the image directly or just image->url
      here is my source code

       
      foreach($page->repeat_body as $r_body) { /* other code here*/ if ($r_body->gallery_check == 1) { echo "<div class='my-gallery' id='grid-gallery' itemscope itemtype='http://schema.org/ImageGallery'>"; foreach($r_body->image as $image) { $options = array('quality' => 80, 'upscaling' => true, 'cropping' => 'north', 'sharpening'=>'medium'); $thumb = $image->size(400, 400, $options); $large = $image->size(1280, 0, $options); list($width, $height) = getimagesize($image->url); echo " <figure itemprop='associatedMedia' itemscope itemtype='http://schema.org/ImageObject'> <a href='$large->url' itemprop='contentUrl' data-size='$widthx$height' data-index='0'> <img src='$thumb->url' height='$height' width='$width' itemprop='thumbnail' alt='Beach'> </a> </figure>"; } echo "</div>"; } /* other code here*/ } now, the images are outputted correctly, i can open then and browse them
×
×
  • Create New...