StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PODisplay actual image size within existing PHP code
text
Body
copied!<p>I am building a <a href="http://www.jordangabrielarts.com" rel="nofollow">Wordpress website</a>. 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.</p> <p>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 <code>auto</code>, 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.</p> <p>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.</p> <p>My first question is this:</p> <p>I'm calling my images from a directory on my server, written specifically for Wordpress (<a href="http://bavotasan.com/2010/get-files-from-directory-using-php/" rel="nofollow">author</a>). Here is the code:</p> <pre><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>'; ?> </code></pre> <p>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.</p> <p>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.</p> <p>Could someone please help me rewrite it?</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload