Image Display

Display image is easy in phpGrid. Simply set the column name in set_col_img(), phpGrid will take care of the rest.

 

phpGrid Image Display

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
$dg = new C_DataGrid("select * from products", "productCode", "productCode");
$dg -> set_col_title("productCode", "Product Code");
$dg -> set_col_title("productName", "Product Name");
$dg -> set_col_title("productLine", "Product Line");

// display static Url
$dg -> set_col_link("productUrl");                                            

// dynamic url. e.g.http://www.example.com/?productCode=101&foo=bar
$dg -> set_col_dynalink("productCode", "http://www.example.com/", "productCode", '&foo=bar');

// column format
$dg -> set_col_currency("buyPrice");
$dg -> set_col_format("quantityInStock", "integer", array("thousandsSeparator" => ",",
                                                          "defaultValue" => "0"));  
$dg -> set_col_format("MSRP", 'currency', array("prefix" => "$",
                                                "suffix" => '',
                                                "thousandsSeparator" => ",",
                                                "decimalSeparator" => ".",
                                                "decimalPlaces" => '2',
                                                "defaultValue" => '0.00'));

// the above line is equivalent to the following helper function                        
$dg -> set_col_currency("MSRP", "$", '', ",",".", "2", "0.00");                                      

// display image
$dg -> set_col_img("Image");
                                                 
$dg -> display();


You can also further adjust image display options such as width, height and border with CSS using set_col_property method. The CSS will only apply the specific column.

1
2
3
<style>
    .image_css img{width: 40pt;border:1px solid black;}
</style>
1
$dg->set_col_property('Image', array("classes"=>'image_css'));

Alternatively, you can also resize images for the entire grid with CSS.

 
See Live Example!