CODEWITHSUNDEEP
php
apeitup
apeitup

Reputation: 35

Create multiple HTML file from directory of images

I have a large body of technical illustrations that I need to Map area to form an online manual. I have already made the base engine for linking each file together and navigating forward and backwards. But due to the large amount of images I wanted to create a group of base HTML files that I could then go through and edit the relevant sections.

What I wanted was to search the directory (images/schematic/) and create a HTML file for each image (imagefilename.png). The file would use the name of the image (imagefilename). The body of the html file would be similar to as follows.

    $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=utf-8" /> 
           <title>'.$imageFileName.'</title>
        </head> 
        <body>
          <div id="image-holder"> 
             <div class="img-title">changeMeLater</div>
             <img src="'.$imageDir .$FullImageFileName.'" width="640" height="751" alt="'.$imageFileName.'-diagram" usemap="#mapFor-'.$imageFileName.'"> 

             <map name="'.$imageFileName.'-imageMap" id="mapFor-'.$imageFileName.'"> 
         </map>
         </div> 
         <div id="partsDescription-tabContent" class="content"></div>    
         <div id="instructions-tabContent" class="content"></div>    
         <div id="notes-tabContent" class="content"></div>    
         <div id="stockControl-tabContent" class="content"></div>
        </body> 
        </html> ';

I found this code which did display a list of the files, and found out that it is the 'basename' that is removing the directory name. 

      <?php
          $directory = "./images/schematic/";
          $directory = (!strstr($directory,"*") || $directory =="./" ) ? $directory."*" : $directory;
          $files = glob($directory);
          for($i=0;$i<sizeof($files) ; $i++){
          echo basename($files[$i])."<br/>\n";
         }?>

But I do not understand how to do something to each return value from the image file search. As you can probably tell I have little to no idea when it comes to php but I am trying. If someone could point me in the right direction explaining how and why I would appreciate it.

Ok I have had a bit of a breakthrough. This code does work. Now I would like to tweek it. Suggestions on how to improve it are more than welcome.

      <?php

       $directory = "./images/schematic/";

       $directory = (!strstr($directory,"*") || $directory =="./" ) ? $directory."*" : $directory;

       $files = glob($directory);

       for($i=0;$i<sizeof($files) ; $i++)
        {
       $fileTitle= basename($files[$i], ".png");
       $imageSrc= $files[$i];


       $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=utf-8" />
      <title>'.$pageTitle.'</title> 
      </head>  
      <body> 

     <div id="image-holder">
     <div class="img-title">'.$fileTitle.'</div>
     <img src=".'.$imageSrc.'" width="640" height="751" style="border: none;" alt="'.$fileTitle.'-diagram" usemap="#mapFor-'.$fileTitle.'">
     <map name="'.$fileTitle.'-imageMap" id="mapFor-'.$fileTitle.'">

    <!-------------------------------- '.$pageTitle.' Mapping -------------------------------------> 

    </map> 
    </div>

    <div id="partsDescription-tabContent" class="content"></div>    
    <div id="instructions-tabContent" class="content"></div>    
    <div id="notes-tabContent" class="content"></div>    
    <div id="stockControl-tabContent" class="content"></div>

    </body>
    </html>';


    $myfile = fopen ('./newdirectory/'.$fileTitle.'.html', 'w') or die("Can not open file");
    $outputFile = $html;
    fputs($myfile, $outputFile);
    fclose($myfile);

    };

    echo ("OK Files created")

   ?>

I have cobbled this together from various tutorials I found across the web. I would like it to only look image files, preferably .png and .jpeg. Can I get it to skip a file that exists (I am thinking for further down the line in case I have area mapped the images and it is overwritten.) I realize this may look messy but I am a complete newb to this.

Upvotes: 1

Views: 738

Answers (2)

apeitup
apeitup

Reputation: 35

Ok I think I managed to get it all to work here it is for anyone trying to do something similar for any reason, Any further suggestions or improvements welcomed.

 <?php 
 $dir = opendir ("./images");  //the image directory to read
    while (false !== ($file = readdir($dir))) { 
            if (strpos($file, '.png',1)) { 
    $fileTitle= basename($file, ".png");
    $imageSrc= "./images/schematic/".$file;


 $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=utf-8" />
        <title>'.$fileTitle.'</title> 
        </head>  
        <body> 

        <div id="image-holder">
        <div class="img-title">'.$fileTitle.'</div>
        <img src=".'.$imageSrc.'" width="640" height="751" style="border: none;" alt="'.$fileTitle.'-diagram" usemap="#mapFor-'.$fileTitle.'">
        <map name="'.$fileTitle.'-imageMap" id="mapFor-'.$fileTitle.'">

        <!-------------------------------- '.$fileTitle.' Mapping -------------------------------------> 

        </map> 
        </div>

        <div id="partsDescription-tabContent" class="content"></div>    
        <div id="instructions-tabContent" class="content"></div>    
        <div id="notes-tabContent" class="content"></div>    
        <div id="stockControl-tabContent" class="content"></div>

        </body>
        </html>';

  $url= './DirectoryForHTMLfiles/'.$fileTitle.'.html';

  $f=@fopen($url,"r"); //check to see if file already exists, if it does then close
  if($f) 
    {
      fclose($f);   
      $stat= ' existing';  // this is for the list of files displayed in your browser window simply displaying file exists 
     } 
   else {
      $myfile = fopen ($url, 'w') or die("Can not open file");  // else if file does not exist create it 
      $outputFile = $html;
      fputs($myfile, $outputFile);
      fclose($myfile);  
      $stat= ' created';  // this is for the list of files displayed in your browser window simply displaying file created 
      }

      echo '<a href="'.$url.'" target="_new">'.$fileTitle.'.html'.$stat.'</a><br/>';  //displays a link to each file hyperlink to page (opens in new window)

    }
    } 
    echo ('<br/><h2>Files created from shcematic image file folder.</h2>');


    ?>

Well it works, I am sure it is not the most elegant way of doing it but there you go.

Upvotes: 1

Jim
Jim

Reputation: 705

The supplied code is giving you the file name. You just need to change the line.

echo basename($files[$i])."<br/>\n";

and replace it with something like this.

echo "<img src='/images/schematic/" . basename($files[$i]) . "'></img><br />\n";

That would then output your images one below the other.

Upvotes: 0

Related Questions