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?

You're probably trying to achieve too much in one go here - and people will probably prefer to help you tweak rather than take on the fixing of the whole thing. I'd start off with finding a carousel library that claims to handle images of multiple sizes, so you don't spend time on code that likely won't work anyway. Does "jcarousel" make this claim? If so, see if there are some demos of it that you can copy. Also, you have 11 asset file requests returning 404 on that page, so it would be worth fixing those. — halfer
– halfer, Commented Jan 30, 2013 at 19:41
A few tips, btw: yes, a local server is a great idea - set one up if you can. Failing that, try setting up an example of your work on JSFiddle or similar, so people can tweak the code easily - more people will help you that way. If you reference a library (e.g. jcarousel) then hyperlink to the home page of it, so people can get more info on what you're using if they wish. — halfer
– halfer, Commented Jan 30, 2013 at 19:43
Lastly I am not sure you need to get image sizes as such - I would imagine a carousel would be implemented by floating images left and then scrolling them by adjusting the left margin. If so, image widths don't need to be known, so long as the heights are identical. — halfer
– halfer, Commented Jan 30, 2013 at 19:44
I understand I said a lot. I only asked one question, though. You're right about making it more helpful to users by setting up on JSFiddle. I a familiar with the site, a little. I will work on the errors, too. Thanks. — user2026516
– user2026516, Commented Jan 30, 2013 at 21:38
I thought the same thing after trying a bunch of carousels. Even widths being defined, it would collapse and each image would cover partway of the other, like an accordion. It didn't make sense to me. I tried with, without, nothing seemed to work. Do you think I am having this problem because I'm stretching the carousel 100% accross the screen? I have used carousels before and never had this issue, but I was setting at a fixed size. — user2026516
– user2026516, Commented Jan 30, 2013 at 21:42

user20232359723568423357842364 · Accepted Answer · 2013-01-30 19:50:52Z

1

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.

width 100%, top -50%

<?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>';
?>

answered Jan 30, 2013 at 19:50

user20232359723568423357842364

4,6341 gold badge20 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user2026516 Over a year ago

Thanks a lot for responding. Yeah, it's interpolating the portrait image to 640px from it's original 285px. Hmm... I see you started using getimagesize. Is there any way to expand off the function on this site: erikastokes.com/php/how-to-get-image-size-with-php.php

user2026516 · Accepted Answer · 2013-01-31 04:37:55Z

0

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.

answered Jan 31, 2013 at 4:37

user2026516

113 bronze badges

1 Comment

halfer Over a year ago

Don't forget to +1 to @user2023235 for their effort, and to tick the answer you prefer (you may tick your own if you wish). This marks the question as answered.

Collectives™ on Stack Overflow

Display actual image size within existing PHP code

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related