Jump to content

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


kathep
 Share

Recommended Posts

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!

Link to comment
Share on other sites


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 />";

}

}

  • Like 3
Link to comment
Share on other sites

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 by horst
wrapped code into formatting tags
  • Like 2
Link to comment
Share on other sites

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 );
  • Like 4
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

  • 1 month later...

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');
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...