Display actual image size within existing PHP code

Question

I am building a Wordpress website. Please don't mind that I'm not working on a local or testing server, or my code. It's messy at the moment while I try to figure out this programming bit. By going to my website, you will see a row of images along the top, which is within a jcarousel.

It works, but if you hit next until you get to the "portrait" photo, there is a gap. The gap is because I have to set a width in pixels within my HTML or CSS for the carousel to work correctly. If set to auto, the carousel collapses. Makes sense to me, but it's frustrating that I cannot work around that. I want the "landscape" and "portrait" photos to have an identical height of 427, but the width I want it to self-adjust to the actual image size.

So I think I understand this bit after playing around for 3 days - I cannot tell you how many carousel codes I've used. Originally I thought that was the problem, and some were. I found out, widths of each image slide are set within the JavaScript, so if I gave it a width of 640, I would get the same result as I am getting now.

My first question is this:

I'm calling my images from a directory on my server, written specifically for Wordpress (author). Here is the code:

<?php
$uploads = wp_upload_dir();

if ($dir = opendir($uploads['basedir'].'/picture-atlantic')) {
$images = array();
while (false !== ($file = readdir($dir))) {
    if ($file != "." && $file != "..") {
        $images[] = $file; 
    }
}
closedir($dir);
}

echo '<ul>';
foreach($images as $image) {
echo '<li><img src="';
echo $uploads['baseurl'].'/picture-atlantic/'.$image;
echo '" alt="" width="auto" height="auto" /></li>';
 }
echo '</ul>';
?>

As you can see, it's calling from the picture-atlantic directory and displaying it within an unordered list, which is required for some reason with my jcarousel.

Finally: how can I use this same code to get my images, but also display them at their actual sizes? In the code above, if I define the width and height, it does it for all the images. However, as I mentioned before, I have portrait pictures that use different dimensions. I found this code: erikastokes.com/php/how-to-get-image-size-with-php.php, but I'm not sure how to implement it in my existing code.

Could someone please help me rewrite it?

Answer 1

Welp, I read that I cannot use getimagesize if I'm already using php to dynamically display my images. I ended up settling with uploading images through Wordpress, within an unordered list, and placing my carousel markup in the post loop. It works just fine now.

Oh, I read on http://www.css-tricks.com that Wordpress adds the image attributes automatically, and that is what solved the image width problem while displaying landscape and portrait style photos at 100% across the screen.

To those who are trying to do a similar task, don't use jj nexgen gallery for inserting your images. jj nexgen gallery is a great plugin, along with the others associated with it. It just won't work for what I was trying to do because it doesn't add the attributes to the image. I would download their wordpress plugins if you aren't trying to do this, so I'm guessing the majority of you.

Thanks again for the replies.

Answer 2

You could set the width of the image to 100% and add a style to reposition portrait images at top: -50%;, but you will not be able to see the entire image if it is in landscape.

<?php
$uploads = wp_upload_dir();

if ($dir = opendir($uploads['basedir'].'/picture-atlantic')) {
$images = array();
while (false !== ($file = readdir($dir))) {
    if ($file != "." && $file != "..") {
        $images[] = $file; 
    }
}
closedir($dir);
}

echo '<ul>';
foreach($images as $image) {
  $myimage = $uploads['baseurl'].'/picture-atlantic/'.$image;
  $size = getimagesize($myimage);
  $top_50 = '';
  if($size[1] > $size[0]) {
    $top_50 = 'style="position: realative; top: -50%;"';
  }
  echo '<li><img src="';
  echo $uploads['baseurl'].'/picture-atlantic/'.$image;
  echo '" alt="" width="100%" height="auto" '.$top_50.'/></li>';
 }
echo '</ul>';
?>