Play with image ratio

Kirby 2 Solved ✅
1

Is there a way to provide the ratio() of an image as float with a dot separating the decimal. e.g. 1,25 -> 1.25 rather than

$ratio = number_format($image->ratio(),2,'.','')

something like

$image->ratio()->float()

to do something like this

$ratio = number_format($image->ratio(),2,'.','');
<figure class="<?php if($ratio <= 1.25) : echo('portrait'); else : echo('landscape'); ?>

to fit images in a 10:8 viewbox (height: 100% or width: 100%)

Oddly enough I can add the $image->ratio() but not compare

   $total_ratio = 0;
    
    //logo-panel

    // Alle Elemente sollen eine gleiche Höhe aufweisen und nebeneinander auf eine Gesamtbreite von 100% kommen.
    // ermittle für jedes Element das Seitenverhätnis ($ratio)
    // addiere alle Werte ($total_ratio)
    	
    // all elements should have the same hight and have together 100% width
    // get the element ($ratio)
    // add al values ($total_ratio)
  
    foreach($members as $member) : 
      if($image = $member->image($member->logo())):
      $ratio = $image->ratio();
      $total_ratio += $ratio;
      endif; 
    endforeach; 	
    	
    //Element Breite = (100% / $total_ratio * $ratio)
    //Element width = (100% / $total_ratio * $ratio)

    foreach($members as $member) : 
      if($image = $member->image($member->logo())):
      $ratio = $image->ratio();
      $percentWidth = number_format((100/$total_ratio) * $ratio,4,'.','');?>
      <div class="logo-container" style="width: <?php echo $percentWidth ;?>%">

But I’am no php developer, I’am just learning by doing because of kirby.

2

Whether a float uses a dot or a comma as decimal depends on your locale settings.

3

You mean something in config

4

Yep :slight_smile: https://getkirby.com/docs/cheatsheet/options/locale

Although, if you change this for numbers in general, it will of course effect all numbers. So depending on your use case, changing the number format might be the way to go.

5

So, to understand you correct.
If I don’t change anything in config like:

c::set('locale', array(
  LC_COLLATE  => 'tr_TR.utf8',
  LC_MONETARY => 'tr_TR.utf8',
  LC_NUMERIC  => 'tr_TR.utf8',
  LC_TIME     => 'tr_TR.utf8',
  LC_MESSAGES => 'tr_TR.utf8',
  LC_CTYPE    => 'en_US.utf8'
));

$ratio should output: x.xx

because I only have set the language in config:

c::set('languages', array(
  array(
    'code'    => 'en',
    'name'    => 'English',
    'locale'  => 'en_US',
    'url'     => '/en',
  ),array(
    'code'    => 'de',
    'name'    => 'Deutsch',
    'default' => true,
    'locale'  => 'de_DE',
    'url'     => '/',
  ),
));
6

You can set the locale in the lang config to an array where you add the detailed locale settings as explained here: https://getkirby.com/docs/languages/setup

1 Like
7

Thanks, that did the trick :grinning:,
I didn’t knew, that my language settings effects the numeric output…

8

Yes, but pls. keep in mind that this setting will change all floating numbers, so if you want to show prices or whatever, they will also use dot decimals, which is probably not what you want. If you don’t use any other floating numbers, you are fine, though.

9

Actually you shouldn’t need to modify the locale settings for that comparison to work. The comma just gets inserted if you echo the ratio.

10

That’s true, but here

<div class="logo-container" style="width: <?php echo $percentWidth ;?>%">

@TakioTk echoes the $percentWidth.

11

Ah, I didn’t see that. In those cases you should always use number_format. Using that function will tell PHP the exact format you require and will make you independent from your locale settings. Normally it makes sense to output locale-aware number formats (in every location where the user sees the value directly), but in those CSS value edge-cases you need to tell PHP explicitly.

12

Yes, thank you both,
I will go back for number_format to change only for explicit cases and not globally.

13

Hint:
I don’t understand, why you want to use “1.25” instead of “1” for “THIS” border between these ratios (portrait and landscape). I think this border should be 1 :

14

Hello @anon77445132,
My Viewbox has the propotion of 10:8 in order to fit better the ratio of a monitor, I don’t wanted a portrait format cut off at the bottom by the screen.

So, if I would take “1”, a image with a ratio of “1.1” get declared as “landscape” and takes 100% of available width – and get cut off at the top and the bottom in my 10:8 scenario.
My rules for
@media screeen and (orientation: portrait)
are exactly the other way round.