Image preview in browse list Topic is solved

[justme636]

In my nuBuilder database application I set up a file system, especially for images. I decided to store them on the file system and not in the database, because the images are rather big files. On upload, the file is renamed, the new file name is retrieved with a JavaScript code and set to a form field. In the browse and edit form, the image is displayed in a HTML object with the file name from this field as a Hash Cookie:

Code: Select all

<img src="/uploads/images/#images_filename#" height="200">

This works so far, but after uploading some images, it's hard to keep an overview on all the uploaded images with only their file name, ID... in the browse list. It would be great to have a preview of the image in the row of each record in the browse list. Does anybody have an idea how to show images form the file system in the browse list?

[kev1n]

I did something similar a while ago and used nuOnProcessBrowseRows() in PHP BB.

Code: Select all

function nuOnProcessBrowseRows() {

    $fileRoot = "/uploads/images/";
    $fileNameColumn = 3; // 0 = ID, 1 = 1st column etc.
    $imageColumn = 4; // column to display the image

    $count = count($f->browse_rows);
    for ($i = 0;$i < $count;$i++) {

        $fileName = $f->browse_rows[$i][$fileNameColumn];
        if ($fileName != '') {

            $file = $fileRoot . '/' . $fileName;
            if (file_exists($file)) {
                $f->browse_rows[$i][$imageColumn] = '<img width="100" height="90" src="' . $fileRoot . $fileName . '?id=' . uniqid() . '">';
            }

        }

    }
}

Let me know if something is not clear. (code untested)

[kev1n]

nuOnProcessBrowseRows() is a PHP function that (pre-)processes rows of a browse form. In your case, it is used to generate HTML Code to display thumbnail images for each row that contains a valid image file.

Here is a breakdown of the code:

$fileRoot is set to the directory path where the image files are stored. This should be modified to match the actual file path on the server.

$fileNameColumn is set to the column index (0-based) where the file name is stored in the array of browse rows. (the name can be in a hidden column)

$imageColumn is set to the column index where the generated HTML code for the thumbnail image should be stored in the array of browse rows.
The loop iterates through each row in the array of browse rows, starting from 0 and ending at $count - 1.

The file name for the current row is extracted from the array of browse rows using $fileNameColumn.

If the file name is not empty, the script checks if the file exists in the server using file_exists().

If the file exists, a thumbnail image is generated with the <img> tag and the URL for the image file with a unique query string to prevent caching. The
HTML code for the image tag is then stored in the array of browse rows using $imageColumn.

The function does not return any value, but the browse rows array is modified by reference.

[justme636]

Hi kev1n,

thank you for your help again! It's great to get so much support!

I'm trying to implement your code in the form's BB code. At the moment, my browse list form (Prop > Browse) contains only one column "File name" displaying the input field "images_filename", that is filled with the image's file name after upload. That would be then column $fileNameColumn of your code as '1':

Code: Select all

$fileNameColumn = 1;

Right?

How did you set up the other column, that displays the thumbnail image? What kind of nuBuilder object did you use for this column?

[kev1n]

NULL in the display column and empty string as Title.

[justme636]

Thank you, kev1n!

I changed your code to

Code: Select all

function nuOnProcessBrowseRows() {

    $fileRoot = "/uploads/images/";
    $fileNameColumn = 2; // 0 = ID, 1 = 1st column etc.
    $imageColumn = 1; // column to display the image

    $count = count($f->browse_rows);
    for ($i = 0;$i < $count;$i++) {

        $fileName = $f->browse_rows[$i][$fileNameColumn];
        if ($fileName != '') {

                $f->browse_rows[$i][$imageColumn] = '<img width="100" height="90" src="' . $fileRoot . $fileName . '?id=' . uniqid() . '">';
            

        }

    }
}

Basically, I just removed the file_exists part. I think checking for empty values and skipping these rows with image preview is quite enough. So this works for me

Now I can display preview images in the browse list with a file name column and this is great for an images/files db But for other purposes (e.g. a product db...) with a preview image you propably don't want to have a file name column. I tried a little bit to use the field value of filename in this BB code with Hash Variable or nuGetNuDataValue(). But either all columns show the same image or I get a 500 server error. I suppose, retrieving the individual file name per each row doesn't work so far.
Do you (or somebody else) have an idea how to get in this BB nuOnProcessBrowseRows() code the indvidiual file name from the form field values (not a from column in the browse list) of each row and use it to display the image in this image column?

[kev1n]

You will need to run a query on the db to retrieve this information.

[justme636]

Thank you for giving this hint! I tried to add a SQL query, but it seems I can't get the file name stored in the DB:

Code: Select all

function nuOnProcessBrowseRows() {

    $fileRoot = "/uploads/images/";
    $imageColumn = 1; // column to display the image

    $count = count($f->browse_rows);
    for ($i = 0;$i < $count;$i++) {

        $sqlfilename = "SELECT images.images_filename FROM images WHERE images.images_id = '#RECORD_ID#'";
        $pdofilename = nuRunQuery($sqlfilename);
        $filename = db_fetch_row($pdofilename);
        nuDebug($filename);

        if ($filename != '') {

                $f->browse_rows[$i][$imageColumn] = '<img width="100" height="90" src="' . $fileRoot . $filename . '?id=' . uniqid() . '">';
            
        }

    }
}

In the Debug log I can see only:

Code: Select all

[0] : 

for each record.

Can you say what's wrong with my query? Maybe '#RECORD_ID#' doesn't work in the BB function, does it?

[kev1n]

$f->browse_rows[$i][0] contains the record id.

[justme636]

Awesome! Now it works! Thank you, kev1n!