I am using the jQuery Flexslider plugin in order to display a little over 100 images. I have gotten them all to display using a foreach loop in php as seen below:
<?php foreach (glob('images/glob/*') as $filename): ?>
<li> <img src="<?= $filename ?>"/> </li>
<?php endforeach; ?>
My images all have the same height in 600px, but their widths are varying. Some are portrait images while others are landscape. I'm wondering if there is a way in php that I can add classes to style the two accordingly based on their widths.
For example:
if
( $img width > $img height ).addClass (landscape)
else
( $img height > $img width ).addClass (portrait)
Obviously that statement above won't work but can someone please show me how to add that into my foreach statement so I can add classes to the varying images?
Use getimagesize: http://www.php.net/manual/en/function.getimagesize.php
foreach (glob('images/*') as $filename) {
$size = getimagesize($filename);
if ( $size[0] > $size[1] ) {
$class="landscape";
}
else {
$class="portrait";
}
print '<li> <img src="'. $filename.'" '.$size[3].' class="'.$class.'" /> </li>';
}
$size[3] being there to add proper width= and height= attributes to img element.
Related
So i have a set of 20 images in a set, all labeled as dog. So dog01, dog02, dog03, etc. I'm using this code to pull those out of a directory and display them 5 to a row, in 4 rows like so.
dog01 dog02 dog03 dog04 dog05
dog06 dog07 dog08 dog09 dog10 (etc.)
I"m using this code to load the images from a directory, and it is loading them in order.
<?php
$dirname = "images/";
$images = glob($dirname."dog*.png");
foreach ($images as $i=>$image) {
$title = pathinfo($image);
echo '<img class="deck" src="'.$image.'" alt="'. $title['filename'].'" title="'.$title['filename'].'">';
if(($i+1)%5 == 0) echo '<br />';
}
?>
However, I want to see if there is a way to get it so that if one of the dogs is missing from the directory, it instead loads a filler in its place, and continues to load the others in sequence. So if dog03 is missing, it would look like this:
dog01 dog02 filler dog04 dog05
It would show filler, and continue on the sequence. I'm genuinely not sure if I can achieve this in php. If someone knows what approach I need to take here, that would be appreciated. I should note that the filler image is in another directory called "fillers/".
Thanks in advance.
You have two ways of approaching this I think. The first is by not worrying about it in php, and loading the filler image as background image. Normally the image will be loaded over the filler image, but if the image does not load, the filler image stays visible.
The other way is by testing if the file exists.
As background image:
.deck {
//whatever you had here
background-image: url( "/filler/filler.png" );
}
You might need to make container divs around your images, and put the css on that instead. Please note that if no explicit width or height is set, this will not work, as the background-image does not assign any width or height to the element it is attached to.
By testing beforehand:
<?php
$dirname = "images/";
$images = glob($dirname."dog*.png");
foreach ($images as $i=>$image) {
if( file_exists( $image ) ) {
$title = pathinfo($image);
echo '<img class="deck" src="'.$image.'" alt="'. $title['filename'].'" title="'.$title['filename'].'">';
} else {
echo '<img class="deck filler" src="/filler/filler.png" alt="This image does not exist." title="This image does not exist.">';
}
if(($i+1)%5 == 0) echo '<br />';
}
?>
This method might not work if you are running php in safe mode.
Actually i'm using a simple PHP snippet to iterate through a directory to grab images and insert them into the html markup.
Now im facing the problem that all images are oriented in landscape. So also portrait images are oriented as landscape images.
Here's my snippet:
<?php
$projectpath = 'Projects';
$projects = glob($projectpath . '/*' , GLOB_ONLYDIR);
foreach($projects as $key=>$value): ?>
<section class="project">
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="project-images">
<?php
$handle = opendir(dirname(realpath(__FILE__)).'/'.$value);
while($file = readdir($handle)){
if($file !== '.' && $file !== '..'){
echo '<img class="img-responsive" alt="'. $file .'" src="'. $value .'/'. $file .'"/>';
}
}
?>
</div>
</div>
</div>
</div>
</section>
<?php endforeach; ?>
So what do i'm missing here? Any suggestions?
I doubt those images really have different orientations. More likely all images are in landscape layout (greater width than height), so the visualization is correct from a technical point of view.
I guess you usually look at the images with some viewer on your PC which auto rotates the images based on some orientation flag stored inside the images meta data. But such flag does not change the real, technical orientation (or better resolution). Instead such flag is only a hint for visualization of the images. Your project does not consult that flag, that is why your images appear to be rotated, whilst in reality they are not.
So the solution is one of two options:
rotate the images prior to using them inside your project, so that their real, technical orientation is correct and the images only have to be displayed without any additional rotation.
use js or php or whatever to detect that orientation flag and evaluate it. Based on the outcome you can set some css class which results in a css based rotation of those images that need to be rotated for visualization.
Here is simple PHP example to check if the image is portrait or landscape:
<?php
$imagePath = 'images/imagename.png';
$imageSize = getimagesize($imagePath); //returns an array
$imageWidth = $imageSize[0]; // array key 0 is width
$imageHeight = $imageSize[1]; // array key 1 is height
if($imageWidth < $imageHeight){
echo '<img class="ROTATE">'//add the rotate class
} elseif($imageWidth > $imageHeight){
echo '<img>'//do not add the rotate class
} else {
echo '<img>'//do not add the rotate class
?>
Take in mind that this is only an example and that you'll have to tweak the script to work properly for you.
I need to get the height and width of an image in order to set stretch it according to the size of the div. I could have used max-width:100% and max-height:100% but there are some images that are smaller than the div so I decided I would just manually assign the width and height.
I prefer to get these dimensions in php imagesy() and imagesx().
<?php $h=imagesy($list['Image1']);
$ w = imagesy($list['Image1'])?>
<img src="<?php echo $list['Image1']; ?>"
<?php if($h>$w) echo"style='height:100%;'";
else echo"style='width:100%;'"; ?> />
PHP functions like getimagesize() will return the dimensions of an image. But you are first going to have the load the image into the function. In other words you're going to have to fetch the image first.
If you have allow_url_fopen enabled then you should be able to invoke it with an absolute URL:
$size = getimagesize("http://www.example.com/gifs/logo.gif");
Okay, I was able to read just now that getimagesize returns an array with the width at [0] and height at [1]. So I was still able to compare them directly, hence, dynamically resizing them to fit the div containing the image. ;)
<?php $h=(getimagesize($list['Image1']));?>
<img src="<?php echo $list['Image1']; ?>"
style="<?php
if($h[0]>$h[1])
{
echo'width:100%;margin:0 auto;';
}
else
{
echo'height:100%;vertical-alignment:auto;';
} ?>"
alt="<?php echo $list['Image1']; ?>" />
So let's say that I have a number of images on my server, uploaded by users. Each picture also has a row in the database containing information like filename, category, filesize, extension and location.
When I want to show these images I use a mysql_query and a while loop. This works, but the pictures all have different sizes and they show up next to each other or under each other which looks really bad.
Let's asume that I have 20 of these images, how can I show 5 images next to each other, 4 rows long???
Assuming a numerically indexed array of objects containing image data:
<div class="row">
<?php
// loop through all my images taking the index and image object
foreach( $images as $idx=>$image ) {
// If this isn't the 1st image & the modulus of 5 and $idx is 0, make a new row.
if( $idx > 0 && !(5%$idx) ) {
</div><div class="row">
}
// Print out the image
echo '<img src="' . $image->filename . '" />';
} ?>
</div>
The modulus is basically the remainder if you divide the first number by the second. Therefore when we've printed 5 images, 5/5=1 with no remainder, so we create a new row.
I believe that would create something like:
<div class="row">
<img src="img1.jpg" />
<img src="img2.jpg" />
<img src="img3.jpg" />
<img src="img4.jpg" />
<img src="img5.jpg" />
</div>
<div class="row">
<img src="img6.jpg" />
<img src="img7.jpg" />
<img src="img8.jpg" />
<img src="img9.jpg" />
<img src="img10.jpg" />
</div>
Which could then be styled using CSS:
<style type="text/css">
div.row {
clear:left;
}
div.row img {
float:left;
}
</style>
When it comes to resizing the images, you have a 2 options:
The easy option: set the image width in the CSS (the height will scale accordingly). This is less than perfect and if the images are different aspect ratios (width vs. height), will still look messy.
Resize (and crop if necessary) using a PHP library such as GD or imagick (a PHP layer on top of imagemagick). Personally I prefer GD as it's packaged with PHP so it's got wider support. That said, imagick is quicker, simpler code, so it's up to you. This site gives a good comparison between the two for image resizing.
EDIT: in answer to your question, you'd need to do something like this to get the array of images:
<?php
// Build an array of images
$sql = 'SELECT * FROM images';
$result = mysql_query( $sql );
while( $obj = mysql_fetch_object( $result ) ) {
$images[] = $obj;
}
?>
pseudocode
$i = 0;
while($row = mysql_fetch_object($result) {
//displaying image
....
if($i % 4 == 0) {
echo '<BR>';
}
$i++;
}
<img src="......" width="....." height="...."/>
If I have a function generating the above code, how can I get the width and height attributes with php?
You can use getimagesize()
<?php
list($width, $height, $type, $attr) = getimagesize("http://example.com/image.gif");
?>
<img src="..." width="<?= $width ?> height="<?= $height ?>" />
Do you mean something like this ?
So you would need to use
preg_match_all('/(alt|title|src)=("[^"]*")/i',$img_tag, $img[$img_tag]);
And then foreach them to array.