1

Tenemos una página web alojada en linux, junto con una especie de FTP, que no llega a ser FTP, sino un acceso vía web hacia la carpeta. (paginaweb.es/carpeta)

El caso es que me han preguntado si es posible poner una imagen al lado de unos directorios. He estado mirando, pero al no estar como tal cada uno con código, no sé cómo hacerlo.

Mediante un código php conseguimos que muestre y se pueda acceder a los directorios que haya en la carpeta.

He estado buscando por google, pero lo único que me aparecía era de subir archivos a un ftp, hacer una galería de imágenes, y varias cosas más que no tiene nada que ver con lo que queremos conseguir.

Me gustaría saber si es posible, o si es una ida de olla del trabajador que me ha comentado esto.

Adjunto una imagen de cómo debería quedar según lo planeado (siendo los cuadrados donde iría la imagen):

plan

Básicamente la página muestra lo que se encuentre en el directorio:

imagen_directorio

Comparto el código del index.php que supongo será donde se hará en caso de que pueda hacerse.

<body>
<div id="container">
    <h1>FAMILY</h1>

    <table class="sortable">
        <thead>
        <tr>
            <th>Nombre Fichero <br>
            <span class="ingles">Filename</span></th>
            <th>Tipo <br>
            <span class="ingles">Type</span></th>
            <th>Tamaño <br>
            <span class="ingles">Size</span></th>
            <th>Fecha de modificación <br>
            <span class="ingles">Modification Date</span></th>
        </tr>
        </thead>
        <tbody>
<?php
    // Adds pretty filesizes
    function pretty_filesize($file) {
        $size=filesize($file);
        if($size<1024){$size=$size." Bytes";}
        elseif(($size<1048576)&&($size>1023)){$size=round($size/1024, 1)." KB";}
        elseif(($size<1073741824)&&($size>1048575)){$size=round($size/1048576, 1)." MB";}
        else{$size=round($size/1073741824, 1)." GB";}
        return $size;
    }

    // Checks to see if veiwing hidden files is enabled
    if($_SERVER['QUERY_STRING']=="hidden")
    {$hide="";
     $ahref="./";
     $atext="Hide";}
    else
    {$hide=".";
     $ahref="./?hidden";
     $atext="";}

     // Opens directory
     $myDirectory=opendir(".");

    // Gets each entry
    while($entryName=readdir($myDirectory)) {
       $dirArray[]=$entryName;
    }

    // Closes directory
    closedir($myDirectory);

    // Counts elements in array
    $indexCount=count($dirArray);

    // Sorts files
    sort($dirArray);

    // Loops through the array of files
    for($index=0; $index < $indexCount; $index++) {

    // Decides if hidden files should be displayed, based on query above.
        if(substr("$dirArray[$index]", 0, 1)!=$hide) {

    // Resets Variables
        $favicon="";
        $class="file";

    // Gets File Names
        $name=$dirArray[$index];
        $namehref=$dirArray[$index];

    // Gets Date Modified
        $modtime=date("M j Y g:i A", filemtime($dirArray[$index]));
        $timekey=date("YmdHis", filemtime($dirArray[$index]));


    // Separates directories, and performs operations on those directories
        if(is_dir($dirArray[$index]))
        {
                $extn="&lt;Directory&gt;";
                $size="&lt;Directory&gt;";
                $sizekey="0";
                $class="dir";

            // Gets favicon.ico, and displays it, only if it exists.
                if(file_exists("$namehref/favicon.ico"))
                    {
                        $favicon=" style='background-image:url($namehref/favicon.ico);'";
                        $extn="&lt;Website&gt;";
                    }

            // Cleans up . and .. directories
                if($name=="."){$name=". (Current Directory)"; $extn="&lt;System Dir&gt;"; $favicon=" style='background-image:url($namehref/.favicon.ico);'";}
                if($name==".."){$name=".. (Parent Directory)"; $extn="&lt;System Dir&gt;";}
        }

    // File-only operations
        else{
            // Gets file extension
            $extn=pathinfo($dirArray[$index], PATHINFO_EXTENSION);

            // Prettifies file type
            switch ($extn){
                case "png": $extn="PNG Image"; break;
                case "jpg": $extn="JPEG Image"; break;
                case "jpeg": $extn="JPEG Image"; break;
                case "svg": $extn="SVG Image"; break;
                case "gif": $extn="GIF Image"; break;
                case "ico": $extn="Windows Icon"; break;

                case "txt": $extn="Text File"; break;
                case "log": $extn="Log File"; break;
                case "htm": $extn="HTML File"; break;
                case "html": $extn="HTML File"; break;
                case "xhtml": $extn="HTML File"; break;
                case "shtml": $extn="HTML File"; break;
                case "php": $extn="PHP Script"; break;
                case "js": $extn="Javascript File"; break;
                case "css": $extn="Stylesheet"; break;

                case "pdf": $extn="PDF Document"; break;
                case "xls": $extn="Spreadsheet"; break;
                case "xlsx": $extn="Spreadsheet"; break;
                case "doc": $extn="Microsoft Word Document"; break;
                case "docx": $extn="Microsoft Word Document"; break;

                case "zip": $extn="ZIP Archive"; break;
                case "htaccess": $extn="Apache Config File"; break;
                case "exe": $extn="Windows Executable"; break;

                default: if($extn!=""){$extn=strtoupper($extn)." File";} else{$extn="Unknown";} break;
            }

            // Gets and cleans up file size
                $size=pretty_filesize($dirArray[$index]);
                $sizekey=filesize($dirArray[$index]);
        }

    // Output
     echo("
        <tr class='$class'>
            <td><a href='./$namehref'$favicon class='name'>$name</a></td>
            <td><a href='./$namehref'>$extn</a></td>
            <td sorttable_customkey='$sizekey'><a href='./$namehref'>$size</a></td>
            <td sorttable_customkey='$timekey'><a href='./$namehref'>$modtime</a></td>
        </tr>");
       }
    }
    ?>

        </tbody>
    </table>

</div>
</body>
</html>

En principio me gustaría saber si es o no posible hacerlo. Si la respuesta es sí, algún tipo de documento o alguna ayuda para poder intentar algo, y si no es posible, se lo comentaré al trabajador que me preguntó.

También he estado pensando en meter propiamente los directorios con un href o cualquier cosa así, pero no sería productivo, ya que hay muchos directorios y subdirectorios y hacerlo en cada uno sería mucho trabajo.

Muchas gracias por su tiempo.

2
  • 1
    No comprendo muy bien lo que quieres decir con es posible poner una imagen al lado de unos directorios. Fijándome en la imagen de la tabla que adjuntas... ¿Lo que se quiere es añadir a cada fila del tabla una imagen en una columna?
    – phpMyGuel
    el 27 feb. 2020 a las 9:57
  • 1
    Sí, creo que eso se acercaría a lo que digo en la pregunta
    – Lucía
    el 27 feb. 2020 a las 9:58

1 respuesta 1

3

Lo que estás tratando es con una generación de una tabla dinamicamente desde PHP. Lo que se hace es delegar a PHP la tarea de inyectar HTML en el DOM. Como lo que quieres es añadir la imagen dentro de un <td> que ya existe, lo único que tendrías que hacer es modificar la sección del código de PHP que se ocupa de pintar cada una de las filas de la tabla:

echo ("
  <tr class='$class'>
    <td><img src='mi_imagen'><a href='./$namehref'$favicon class='name'>$name</a></td>
    <td><a href='./$namehref'>$extn</a></td>
    <td sorttable_customkey='$sizekey'><a href='./$namehref'>$size</a></td>
    <td sorttable_customkey='$timekey'><a href='./$namehref'>$modtime</a></td>
  </tr>
");

Luego ya solo te quedaría colocarla donde quieres por medio de CSS.

7
  • 1
    Editada para ajustarse más a lo que se requiere.
    – phpMyGuel
    el 27 feb. 2020 a las 10:19
  • 1
    ¿En qué parte del código debería insertar esto? ¿Debe sustituir otra cosa?
    – Lucía
    el 27 feb. 2020 a las 10:28
  • Abajo del todo del código que nos pasas, tienes un fragmento de código que es como el mío pero sin la <img> en el primer <td>. Tendrías que modificarlo para que se parezca al mío.
    – phpMyGuel
    el 27 feb. 2020 a las 10:48
  • Disculpa, que tenía la máquina virtual más abajo de lo debido y me salté esa parte jaja Ya tengo eso actualizado, pero se podría llegar a poner una imagen distinta para cada una? No sé si formular una nueva pregunta con esta cuestión
    – Lucía
    el 27 feb. 2020 a las 10:52
  • Se podría. ¿Pero cuál sería el criterio para establecer una imagen u otra? ¿El tipo de archivo?
    – phpMyGuel
    el 27 feb. 2020 a las 10:55

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.