How to detect image width, and if smaller than x, display at original size?

[kathep]

Hello all

I have successfully displayed an array of images using the following code.

if (count($page->images)) {        
  $images = '';
  foreach($page->images as $image) {            
   $image = $image->size(800);                
   $images .= "<img src='{$image->url}' /><br />";
  }    
}  

However, occasionally this template calls an image that is smaller than 800 pixels wide, and when these images are forced to display larger than their original size, they are pixellated (see example here).

I would like to edit the above code to make it do the following:

• check the size of each image
• if the image is >800px wide, display as 800px wide
• if the image is <801px wide, display at original size

My best guess is this:

if (count($page->images)) {        
  $images = '';
  foreach($page->images as $image) {
        if {$page->image->height(<801);
             $image = $image->size()}
        else {$image = $image->size(800)};                
   $images .= "<img src='{$image->url}' /><br />";
  }    
}  

But I have a poor understanding of loops. My question is:

Can someone suggest a fix for my second code example to make it work?

Please note my templates are written in object oriented php, so solutions using 'echo' will not work in my use case. 

Thanks for reading!

[Macrura]

if(count($page->images)) {

$images = '';

foreach($page->images as $image) {

if($image->width < 801) {

$image = $image;

} else {

$image = $image->width(800);

}

$images .= "<img src='{$image->url}' /><br />";

}

}

[Jan Romero]

You don’t need to call size() at all if you don’t want to resize the image. Also you don’t seem to be entirely familiar with PHP’s control flow syntax. Try this inside your foreach:

if ($image->width <= 800) {  //width is simply a property of type integer, in pixels
    $imgurl = $image->url;   //use url of source image
} else {
    $imgurl = $image->size(800)->url; //create a variation 800px wide and use its url
}

$images .= "<img src='{$imgurl}' />";

You may also be interested to know that there is a config option that prevents images from being upscaled. Have a look around in config.php’s image options.

I don’t know if it’s some kind of special syntax you’re using for your if-condition, but here is the PHP manual just in case: http://php.net/manual/en/control-structures.if.php

Sorry, I would format more nicely, but I’m on mobile :/

Edited April 17, 2016 by horst
wrapped code into formatting tags

[horst]

what Jan said, you can define sitewide $config options.

Have a look into wire/config.php and copy the part of $config->imageSizerOptions into site/config.php if you want to change something.

For example, if you want to have the "upscaling" disabled sitewide, just set it to false in your site/config.php.

If you want to have a different value for an option then set in config.php, you can pass a options array with the image resize functions:

• $options = array("upscaling" => false, "sharpening" => "medium");
• $image->width( $width, $options );
• $image->height( $height, $options );
• $image->size( $width, $height, $options );

[kathep]

@macrura and @horst, thank you! Although it is not necessary to use both your suggestions, I have. To satiate my curiosity.

@Jan Romero, you are correct. When it comes to php I am a bit of a bush mechanic. I am learning in a traditional Australian way.

Thank you again to all of you. One of the things I enjoy most about PW is the supportive and encouraging community.

[tpr]

I think most of us are "bushies"

[szabesz]

I think most of us are "bushies"

Except when you introduce yourself to potential client and you must quickly transform into a professional

(But that's off topic again, sorry for that...)

[a-ok]

Sorry to bring an old topic up but is this possible as a pages selector?

$pages->get('parent=/article-overview/, limit=1, sort=random, article_detail_featured_image.count=1, article_detail_featured_image.width>800');

[LostKobrakai]

I'm not sure, but as internally files fields are always multi-value fields this might be a confusing selector anyways.

[a-ok]

I'm not sure, but as internally files fields are always multi-value fields this might be a confusing selector anyways.

Thanks, LostKobrakai. Just seems unnecessary to include those images in the selector to loop but then disregard them... why not just not include them in the selector.

[Can]

another option is to use $image->maxWidth(800)