Hi guys! Hope you are well and can help.
At the moment i have an index.html file that contains hard coded informaton about a directory called 'img', which contains all my images.
Currently I am manually typing in code into index.html so that when I launch index.html, it displays all my images from this particular folder.
############
OBJECTIVES:
############
What Id like to do is to remove this manual process, because whenever I delete or add images, I have to modify the index.html file to reflect what is currently in in the img folder.
Im using xp and Activestate Perl.
So currently, I have this setup for index.html:
--------------------------
----------
----------
----------
----------
----------
----------
--------- index.html
<li>
<a href="#"><img src="img/photo01.jpg" alt="description" /><img src="img/photo01.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="img/photo02.jpg" alt="description" /><img src="img/photo02.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="img/photo03.jpg" alt="description" /><img src="img/photo03.jpg" alt="description" class="preview" /></a>
</li>
etc
etc
Currently, I have to add the <li>.........</li> for every new image that i add to img folder.
So, if i need to add a new image file, I have to do as per following example. If the new image is photo04.jpg, I have to do the following:
<li>
<a href="#"><img src="img/photo04.jpg" alt="description" /><img src="img/photo04.jpg" alt="description" class="preview" /></a>
</li>
And, again, if i want to add another image file (eg.photo05.jpg), I have to do the following:
<li>
<a href="#"><img src="img/photo05.jpg" alt="description" /><img src="img/photo05.jpg" alt="description" class="preview" /></a>
</li>
You can see from the above, I have to add 3 lines of code for every image manually. The code is exactly the same other than the name of the image file, which only has to be changed in 2 places:
eg.
<img src="img/photo04.jpg"
Id like a way to automate this process using perl.
#############
REQUIREMENTS:
#############
What Id like to do is....
1) Create a perl script which takes 2 arguments:
Syntax:
<perl_script>.pl arg1 arg2
where
arg1 is: full path and DIRECTORY name of the directory you wish to read a list of files
and
arg2 is: full path and FILE name of the file you wish to manipulate and add the required lines of code for every filename returned from arg1
Example would be:
update.pl c:\img c:\folder\folder\index.htm
l
So,
update.pl:
a) reads folder c:\img (arg1) and returns back an array of filename in format:
img/file1.jpg
img/file2.jpg
img/file3.jpg
img/file4.jpg
img/file5.jpg
etc etc
where only the folder/fileX.jpg is stored for each file in the array
b) it then reads the file c:\folder\folder\index.htm
l (arg2)
b)i) the script first checks index.html for the existence of 2 bookmarks in index.html (these 2 bookmarks will always be present)
They are as follows...
<!-- REMOVE EVERYTHING BELOW THIS LINE BUT LEAVE THIS LINE INTACT --> //bookmark1
code
code
code
etc etc
<!-- REMOVE EVERYTHING ABOVE THIS LINE BUT LEAVE THIS LINE INTACT --> //bookmark2
b)ii) In the above, the perl script would first remove all lines between
<!-- REMOVE EVERYTHING BELOW THIS LINE BUT LEAVE THIS LINE INTACT -->
and
<!-- REMOVE EVERYTHING ABOVE THIS LINE BUT LEAVE THIS LINE INTACT -->
but leave the 2 bookmarked lines intact.
b)iii) Once the perl script removes all lines/code between
<!-- REMOVE EVERYTHING BELOW THIS LINE BUT LEAVE THIS LINE INTACT -->
and
<!-- REMOVE EVERYTHING ABOVE THIS LINE BUT LEAVE THIS LINE INTACT -->
the script inserts one blank line between these 2 bookmarks.
<!-- REMOVE EVERYTHING BELOW THIS LINE BUT LEAVE THIS LINE INTACT -->
<!-- REMOVE EVERYTHING ABOVE THIS LINE BUT LEAVE THIS LINE INTACT -->
so it would look like:
<!-- REMOVE EVERYTHING BELOW THIS LINE BUT LEAVE THIS LINE INTACT -->
<!-- REMOVE EVERYTHING ABOVE THIS LINE BUT LEAVE THIS LINE INTACT -->
So, now, the blank line above (between the 2 bookmarks) is the starting line where new data is inserted by the perl script as follows...
c) As the perl script now has (an array) a list of filenames from arg1 in the following format:
img/file1.jpg
img/file2.jpg
img/file3.jpg
img/file4.jpg
img/file5.jpg
etc etc
A variable is created for the img src, something like
$imagesource = img/file1.jpg
Starting on the first blank line below the first bookmark in the index.html file,
the following is inserted:
<li>
<a href="#"><img src="$imagesource" alt="description" /><img src="$imagesource" alt="description" class="preview" /></a>
</li>
and $imagesource
is replaced with
img/file1.jpg
so, youd now have in index.html the following.....
<li>
<a href="#"><img src="img/file1.jpg" alt="description" /><img src="img/file1.jpg" alt="description" class="preview" /></a>
</li>
The script then keeps going through the array of filenames and does the same thing, until all filenames have been added to index.html.
For example, next file in the array..
$imagesource = img/file2.jpg
Starting below the first filename (the </li> as inserted from above)
the following is inserted:
<li>
<a href="#"><img src="$imagesource" alt="description" /><img src="$imagesource" alt="description" class="preview" /></a>
</li>
and $imagesource
is replaced with
img/file2.jpg
so, youd now have in index.html the following.....
<li>
<a href="#"><img src="img/file1.jpg" alt="description" /><img src="img/file1.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="img/file2.jpg" alt="description" /><img src="img/file2.jpg" alt="description" class="preview" /></a>
</li>
etc etc
until all files in the array have been processed and the required lines inserted into index.html.
So, to sum up,
Every file in the array, would have 3 lines of code inserted into index.html, as follows...
<li>
<a href="#"><img src="img/file1.jpg" alt="description" /><img src="img/file1.jpg" alt="description" class="preview" /></a>
</li>
Any help on this greatly appreciated.
Thank you.
