Forum Moderators: coopster

Message Too Old, No Replies

Load images from directory in alphabetical order

         

krko

12:10 am on Sep 30, 2010 (gmt 0)

10+ Year Member



Hello all,

How can I load all images in a certain directory in alphabetical order. Currently I have this code which loads all the images, however the order is random.

<?php $dir = "path-to/images";
//open dir
if ($opendir = opendir($dir))
{
//read dir
while (($file = readdir($opendir)) !==FALSE)
{
if ($file!="."&&$file!="..")
echo "<img src='$dir/$file'>";
}
}
?>

Please bear in mind I don't know php. This code is something I found on the net and just copied it.

Thank you in advance,
krko

krko

7:53 am on Sep 30, 2010 (gmt 0)

10+ Year Member



I read that I could use the scandir to do that. However since I don't really know php I was wondering if someone could whelp me with exact usage of this command.

krko

8:49 am on Sep 30, 2010 (gmt 0)

10+ Year Member



This works

<?php
$path = 'path-to/images/';
$dir_handle = @opendir($path) or die('Unable to open ' . $path);
$array = array();
while (($file = readdir($dir_handle)) !== false)
{
if ($file != '.' && $file != '..')
{
$pathinfo = pathinfo($file);
if (isset($pathinfo['extension'])) {$ext = strtolower($pathinfo['extension']);} else {$ext = '';}
if ($ext == 'jpg' || $ext == 'jpeg') {$array[] = $file;}
}
}
if ($array)
{
sort($array);
foreach ($array as $value)
{
echo '<img src="' . $path . $value . '" alt="" />' . "\n";
}
}
?>

Anyango

8:58 am on Sep 30, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member




<?php

$dir = "path-to/images";

if ($opendir = opendir($dir))
{
$images=array();
while (($file = readdir($opendir)) !==FALSE)
{
if($file != "." && $file != "..")
{
$images["$file"]=$file;
}
}
}
sort($images,SORT_STRING);
foreach($images as $image)
{
echo "<img src='$dir/$image'><br>\n";
}
?>

Anyango

9:02 am on Sep 30, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



oops you beat me a few seconds to it ;)

krko

6:17 pm on Sep 30, 2010 (gmt 0)

10+ Year Member



Thanks.

Here's addition to my original question:

1. Is there a way to make this code more efficient or faster?
2. More importantly, how can I read titles or descriptions from a text or xml file and have them displayed.

Currently this php gives me:

<img src="path-to/images/1.jpg" alt="" />
<img src="path-to/images/2.jpg" alt="" />
...

I'd like to have in the images folder an xml or text file with descriptions like this for example:

<img src="1.jpg" title="Some Title" description="Some Description" />
<img src="2.jpg" title="Some Other Title" description="Some Other Description" />
...

And I'd like the php script to read the titles and descriptions and write them in such a way so I get:

<div>
<a href="#"><img src="path-to/images/1.jpg" alt="" /></a>
<strong>Some Title</strong>
<span>Some Description</span>
</div>

<div>
<a href="#"><img src="path-to/images/2.jpg" alt="" /></a>
<strong>Some Other Title</strong>
<span>Some Other Description</span>
</div>

For every image that has title and description.

If image only has a title than I'd get:

<div>
<a href="#"><img src="path-to/images/2.jpg" alt="" /></a>
<strong>Some Other Title</strong>
<span></span>
</div>

or

<div>
<a href="#"><img src="path-to/images/2.jpg" alt="" /></a>
<strong>Some Other Title</strong>
</div>

And in case image has only description and no title I'd get:

<div>
<a href="#"><img src="path-to/images/2.jpg" alt="" /></a>
<strong></strong>
<span>Some Other Description</span>
</div>

or

<div>
<a href="#"><img src="path-to/images/2.jpg" alt="" /></a>
<span>Some Other Description</span>
</div>

In case image has no description or title in the xml file like this:
<img src="1.jpg" title="" description="" />

Than I'd get:
<img src="path-to/images/1.jpg" alt="" />

How hard would it be to do it?

Thank you,
krko

Anyango

4:58 am on Oct 1, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



So how do you store titles or descriptions in text ? files in the same folder ? If you are going to have to create title file for every image seperately then i would say just create 1 text file or xml file that contains

image_file_name | title | description
image1.jpg | test | desc 1
image2.jpg | test2 | desc 2
...........

Then simply read that file into an array and that way you can load images and that required information better and easily

krko

5:38 pm on Oct 1, 2010 (gmt 0)

10+ Year Member



Hi Anyango!

That format is perfectly fine. I think text file would be better.

I was wondering if anyone could write the actual code for it or the relevant part of the code because I really don't know php. All I know is how to copy and paste and make some minor modifications :)

Thank you in advance.

krko

Anyango

6:15 pm on Oct 1, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Sure i can help you but if you promise to learn the code rather than just copy and paste it ;) or atleast type it yourself by looking at it :)

Anyango

6:57 pm on Oct 1, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Ok so lets do this.

For this setup to work you will need 2 things

1) you need to create a text file in proper format to store information about your images

2) then your php reads that files and displays images according to what you want

1
so first you go create a text file named info.txt in the same folder as your php.

and it has content like this


1.png|Title of 1.png|Description of 1.png
2.png|Title of 2.png|Description of 2.png
3.png|Title of 3.png|Description of 3.png


2

now you write your php code to read that file and display according to what you said above


<?php
$infoFile = 'info.txt'; //File to read information from
$rows = file($infoFile); //Read all lines of the file in an array named $rows
foreach($rows as $row) //loop every row
{
list($image,$title,$description)=explode("|",$row); //pick up image name, title, and description from each row

echo '<div>
<a href="#"><img src="'.$image.'" alt="" /></a>'; //show the image

if($title!="") //if title is not empty show it
{
echo "<br><strong>$title</strong>\n";
}

if($description!="") //if description is not empty show it
{
echo "<br><span>$description</span>\n";
}

echo "</div>\n"; //close your div
}
?>



This code will read all your information about images in that file and display all the images, and if there is a title it will display that and same for Description ;)

You can play with html how the images are presented but i have just used the html you said you wanted to have.

There is only 1 hinderence in this setup, that you will have to define atleast all the image names in the text file, this code will not auto read all the images from your directory.

Ofcourse we can do that too,but only if you first learn this ;)

Sorry about the indentation, not in my control (or atleast i dont know how to indent here)

krko

8:12 pm on Oct 1, 2010 (gmt 0)

10+ Year Member



Thank you very much for the code!
Will try it and report.

Once again thank you!

krko

Anyango

3:37 pm on Oct 4, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Any luck with this?

krko

11:38 pm on Oct 4, 2010 (gmt 0)

10+ Year Member



Actually yes!

I managed to create a code that pulls images from a directory (not a text file) and reads only the descriptions from a text file and matches them. That way if I forget to update the descriptions in the text file but I've added a few images to the directory, new images won't have descriptions but they'll still show up which is more important to me.

The code also displays only title if only title appears in the text file or only description or, of course, both if both appear. The only problem with my code is that the description for 19th file must appear in line 19.

It would be great if I could write the description for the file in any line what so ever inside the text file and they could still get matched. The format of the text file is like this:

name.jpg^title^description
^ is the delimiter

It would be nice if the code could match the description to the file by the file name but I guess it would be too recursive and therefore too resources heavy. Am I right?

Anyway here's my code:

<?php

$fn = 'info.txt';
$fh = fopen($fn,"r") or die('Unable to open ' . $fn);

$i = 0;
$fdata = array();
while (($line = fgets($fh)) !== false)
{
list($filename,$title,$description)=split("\^",$line);
$fdata[$i]=$filename;
$fdata[$i+1]=$title;
$fdata[$i+2]=$description;
$i=$i+3;
}
fclose($fh);

$path = 'path-to/images/';
$dir_handle = @opendir($path) or die('Unable to open ' . $path);
$array = array();
while (($file = readdir($dir_handle)) !== false)
{
if ($file != '.' && $file != '..')
{
$pathinfo = pathinfo($file);
if (isset($pathinfo['extension'])) {$ext = strtolower($pathinfo['extension']);} else {$ext = '';}
if ($ext == 'jpg' || $ext == 'jpeg') {$array[] = $file;}
}
}
if ($array)
{
rsort($array); // Use 'sort' for A-Z order. Currently it's Z-A.

$j=0;
foreach ($array as $value)
{

echo '<div>';
echo '<a href=""><img src="' . $path . $value . '" alt="" /></a>' . "\n";
if ($value == $fdata[$j])
{
echo '<strong>' . $fdata[$j+1] . '</strong>';
echo '<span>' . $fdata[$j+2] . '</span>';
}
echo '</div>';

$j=$j+3;
}
}
?>

Any suggestions?

krko