• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 301
  • Last Modified:

Autopopulating a panorama div tag with images from disk...

Hi guys hope you are well and can help me :>)

I have the following html page (called vanilla.html), that loads images from disk into a div tag called:
<div id="panorama">
At the moment, I have to hard code each image into the html file with each image having a corresponding img src line, which details image name, width, height, and location on disk.
Im placing all images into a folder called "images"

What Id like to do is:
- Not have to manually insert a new img src line for each additional image that I upload to the images folder.
- Ideally not have to edit the html file at all with deletions or addions of images.
- Have a perl script that polls the images folder and grabs the filenames.

What the perl script would do:
1) The perl script would poll the images folder and collect all the filenames that exist in this folder.
2) The perl script would then compare what it has returned in its collection of filenames with what exists in the html file ("vanilla.html").
So, the process would be something like the following..........

What exists on disk in the images folder currently........
/images
   cat.jpeg
   dog.gif
   whale.jpg
   shark.jpg

The perl script would poll the above images folder, and grab the filenames every time it scans this folder.
So, it would have a list of "cat.jpeg, dog.gif, whale.jpg, shark.jpg" on this pass.

The script would then see if each image_filename exists in vanilla.html.
In particular, the perl script is scanning the vanilla.html to see if for example, cat.jpeg has a line of format:
<img src="images/<cat.jpeg>" title="" name="" width="82" height="108" title=""/>
where
cat.jpeg is image_filename eg.
<img src="images/<image_filename>" title="" name="" width="82" height="108" title=""/>

If:
<img src="images/<cat.jpeg>" title="" name="" width="82" height="108" title=""/>
EXISTS,
the perl script does not add a new line of format
<img src="images/<cat.jpeg>" title="" name="" width="82" height="108" title=""/>
into the vanilla.html file.

If:
<img src="images/<cat.jpeg>" title="" name="" width="82" height="108" title=""/>
DOES NOT EXIST,
the perl script adds a new line of format:
<img src="images/<cat.jpeg>" title="" name="" width="82" height="108" title=""/>
into the vanilla.html file.

If in the vanilla.html file, a line of format:
<img src="images/<image_filename>" title="" name="" width="82" height="108" title=""/>
EXISTS
for a filename that does NOT exist in the images folder, this means the image file has been deleted from the images folder, so the perl script would REMOVE this line of format:
<img src="images/<image_filename>" title="" name="" width="82" height="108" title=""/>

For every new insertion into the vanilla.html file, the only "NEW" or "Changed" data for each new img src line inserted is the name of the image_filename. So the rest of the parameters in:
<img src="images/<image_filename>" title="" name="" width="82" height="108" title=""/>
are purely defaults, that apply to ALL img src lines.
So for example,
If a new file was found in "images" called "donkey.jpg",
The script, after confirming it does not exist in the vanilla.html file, would add the following entry....
<img src="images/donkey.jpg>" title="" name="" width="82" height="108" title=""/>
Likewise, for "bunyip.gif",
The script, after confirming it does not exist in the vanilla.html file, would add the following entry....
<img src="images/bunyip.gif>" title="" name="" width="82" height="108" title=""/>
where in both cases:
title, width, height, title are the same eg.defaults.

I hope the above makes sense, and thank you to all of you :>)

I have below, the current file vanilla.html.........

======================================================== vanilla.html

<DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>      
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<style>
#panorama {
      width:800px;
      overflow-x:auto;
      overflow-y:hidden;
}
</style>
</head>
     
<div id="panorama">
<nobr>
<img src="images/test.jpg" title="Test image" name="tesst"  width="82" height="108" title="My picture"/>
<img src="images/feed_me_british_shorthair.jpg" title= "test"" name="feesdme" width="82" height="108" title="My picture">        
<img src="images/sad_eyes_british_shorthair.jpg" title="Sad eyes" name="sad" width="82" height="108" title="My picture"/>
<img src="images/test.jpg" title="Untitled" name="untitled"  width="82" height="108" title="My picture""/>
</nobr>
</div>

</body>
</html>
===============================================================================

0
Simon336697
Asked:
Simon336697
  • 10
  • 5
1 Solution
 
Beverley PortlockCommented:
Why bother with Perl? PHP will do what you what. For example..

To get a list of all files in a directory

$fileArr = scandir("../inages");

Now, I know you had a table of "cats" in an earlier question so you could populate that table or you could write the images directly as they are read from the disk folder (UNTESTED)

<DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>      
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<style>
#panorama {
      width:800px;
      overflow-x:auto;
      overflow-y:hidden;
}
</style>
</head>
     
<div id="panorama">
<nobr>

<?php

$fileArr = scandir("/path/to/my/images");

if ( count($fileArr) > 0 ) {
     foreach( $fileArr as $anImage )
          echo "<img src='$anImage' width='82' height='108' />";
}


?>
</nobr>
</div>

</body>
</html>
0
 
Simon336697Author Commented:
Hi bp...you are the best.....

You are right about the table cats in another question.

Im asking heaps of questions about this, because the end result I think will be worth it, and I would like to send the final result to all that have helped me, obvioulsy including you. :>)
0
 
Simon336697Author Commented:
Hi bp,

I tried your script saving it as a html file....The output I got was...

0 ) { foreach( $fileArr as $anImage ) echo " <pic> "; } ?>

on the page
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
Simon336697Author Commented:
Hi bp!

I tried the following....
<DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>      
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<style>
#panorama {
      width:800px;
      overflow-x:auto;
      overflow-y:hidden;
}
</style>
</head>
<body>    
<div id="panorama">
<nobr>

<?php

$dir = '/cats/';
$fileArr = scandir($dir);

if ( count($fileArr) > 0 ) {
echo "Greater than 1";
}
echo "Nothing here";

?>
</nobr>
</div>

</body>
</html>
0
 
Simon336697Author Commented:
The above didnt work either.
0
 
Simon336697Author Commented:
It doesnt seem to like the > sign :>)
0
 
Beverley PortlockCommented:
Just tried the original code and it seems to work OK unless the directory name is wrong. Try using the full pathname
0
 
Simon336697Author Commented:
Ok...
I got it to work but something bizarre at my end :>)


The below code is what im using...saved as a php file..
============================================
<DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>      
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<style>
#panorama {
      width:800px;
      overflow-x:auto;
      overflow-y:hidden;
}
</style>
</head>
     
<div id="panorama">
<nobr>

<?php

$fileArr = scandir("/var/www/html/mediawiki/cats/");

if ( count($fileArr) > 0 ) {
     foreach( $fileArr as $anImage )
          echo "<img src='$anImage' width='82' height='108' />";
}
?>
</nobr>
</div>

</body>
</html>
==============================================================

I only have 2 images in the cats folder.

When i run the php file in a browser.
http://localhost/mediawiki/cats.php

In the page, there are 4 images displayed in the div, but no images are actually displayed.

If i do the following..

[root@fire cats]# ls -ltra
total 68
-rwxrwxrwx  1 apache apache 40181 Sep 13 17:20 test11.jpg
-rwxrwxrwx  1 apache apache 18126 Sep 29 23:20 test.jpg
drwxrwxrwx  2 apache apache  4096 Sep 30 00:58 .
drwxrwxrwx 18 root   root    4096 Sep 30 01:57 .

Im wondering if the scandir is using something im not aware of to do its count of files in a folder.

0
 
Beverley PortlockCommented:
I notice you said "tried your script saving it as a html file" and the script needs to be in a .php file (it *is* PHP after all!!) unless you reconfigure your webserver to treat HTML as PHP source.

As to your recent query, scandir returns the filenames, not the path & file name and it returns ALL files. Modify the code as follows

$pathToImages = "/var/www/html/mediawiki/cats/";
$fileArr = scandir( $pathToImages );

if ( count($fileArr) > 0 ) {
     foreach( $fileArr as $anImage ) {
          $filename = strtolower( $anImage );
          if ( strpos( $fileName ".jpg" ) !== false )
               echo "<img src='$pathToImages$anImage' width='82' height='108' />";
     }
}
0
 
Simon336697Author Commented:
Hi bp!
Just a blank page now bp..

Here is my httpd.conf file for the virtual directory...wondering if i need to add anything here...
httpd.conf
<Directory "/var/www/html/mediawiki/cats/">
    Options Indexes
    Allow from all
</Directory>

Here is the code im using....

======================================================== test.php
<DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>      
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<style>
#panorama {
      width:800px;
      overflow-x:auto;
      overflow-y:hidden;
}
</style>
</head>
     
<div id="panorama">
<nobr>

<?php

$pathToImages = "/var/www/html/mediawiki/cats/";
$fileArr = scandir( $pathToImages );

if ( count($fileArr) > 0 ) {
     foreach( $fileArr as $anImage ) {
          $filename = strtolower( $anImage );
          if ( strpos( $fileName ".jpg" ) !== false )
               echo "<img src='$pathToImages$anImage' width='82' height='108' />";
     }
}


?>
</nobr>
</div>

</body>
</html>
====================================================================
0
 
Beverley PortlockCommented:
LOL!  OK I'v gone home for the night but  I've logged into the office server remotely to test the code and there are a few things.

1) There is a comma missing in the strpos
2) we have filename and fileName - whoops!
3) (seems obvious) we are using the path name. From the out we need to use a URL. The internal path and the URL should point to the same images folder.

I have modded the code. You will need to change the new variable $webserverUrl

<DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>      
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<style>
#panorama {
      width:800px;
      overflow-x:auto;
      overflow-y:hidden;
}
</style>
</head>
     
<div id="panorama">
<nobr>

<?php

$pathToImages = "/var/www/html/mediawiki/cats/";
$webserverUrl = "http://server-name/any-folders-or-subdirectories/images/";

$fileArr = scandir( $pathToImages );

if ( count($fileArr) > 0 ) {
     foreach( $fileArr as $anImage ) {
          $filename = strtolower( $anImage );          
          if ( strpos( $filename, ".jpg" ) !== false )
               echo "<img src='$webserverUrl$anImage' width='82' height='108' />";
     }
}


?>
</nobr>
</div>

</body>
</html>
0
 
Simon336697Author Commented:
You are such a hard worker bp!
Id love to meet some of you guys one day!
Dont know where you are located, but its 3:14am in the morning down under here in Melbourne Aus.
Have a beer on me because you deserve it!!!!!
I will test this now.
Its great communicating with you :>)
0
 
Simon336697Author Commented:
YEAH!!!!!
############ ITS WORKING!!!!! #############
GOD YOU ARE CLEVER!!!!
AND A NICE GUY...
BRILLIANT.
bp....will post more on this one !!!
Champion Champion Champion.......Please have a drink (alcoholic or not) and have a great nite!!!
0
 
Simon336697Author Commented:
bp
I hope I in some way challenge you guys and give you guys good things to work on.
Ill never reach your guys' heights but thats ok.
Its just a privilege to ask such incredibly gifted people :>)
I am learning through asking and hope i dont bore you guys.
0
 
Beverley PortlockCommented:
"Dont know where you are located, but its 3:14am in the morning down under here in Melbourne Aus."

You need to get more sleep ;-) I think I can stay with the EE rules by saying I'm in the UK which explains the lag on some of the answers since I'm 10 hours behind you.


"Have a beer on me because you deserve it!!!!!"

Did that - and a chinese banquet into the bargain.
0

Featured Post

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

  • 10
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now