proportional scaling of thumbnails in filepicker (for images) [message #1461] |
Mon, 14 July 2008 10:35 |
ikatz
Messages: 40 Registered: December 2007 Location: Durham, NH
|
Member |
|
|
I am trying to make my image filepicker easier to use. I am storing company logos of all shapes and sizes, so there is no single width/height combination that I can use; some logos will appear squashed in the filepicker screen.
I was able to get the desired effect in the company detail screen by specifying only the image height in the dict file:
$fieldspec['image'] = array('type' => 'string',
'size' => 255,
'subtype' => 'image',
//only specify height //'imagewidth' => 45,
'imageheight' => 45,
'control' => 'filepicker',
'task_id' => 'auvac_organization(filepicker)');
(If you only specify one dimension, HTML will scale proportionally.)
This does not seem to affect the filepicker. In fact, the filepicker seems to completely ignore my screen structure file as well:
$structure['xsl_file'] = 'std.filepicker.list1.xsl';
$structure['tables']['main'] = 'file';
$structure['main']['columns'][] = array('width' => '40%');
$structure['main']['columns'][] = array('width' => '10%');
// identify the field names and their screen labels
$structure['main']['fields'][] = array('file' => 'File Name');
$structure['main']['fields'][] = array('image' => 'Image',
'imagewidth' => 75,
'imageheight' => 45
);
In my filepicker screen, the images are all 60px squares.
What I think should be happening here is that the image dimensions should be read from the image itself and the scaling done accordingly per-image (the imagewidth and imageheight should specify the bounding box, not the absolute sizes).
I have attached a std.filepicker1.inc file where I have an unfinished attempt to do that.
What should I do to get proportional scaling in my filepicker? Is my std.filepicker1.inc edit worth pursuing?
|
|
|
|
Re: proportional scaling of thumbnails in filepicker (for images) [message #1464 is a reply to message #1462] |
Mon, 14 July 2008 16:05 |
ikatz
Messages: 40 Registered: December 2007 Location: Durham, NH
|
Member |
|
|
I see the problem.
std.filepicker.list1.xsl is looking for a "/root/params/image_width" instead of "/root/params/imagewidth"
With this patch, the thumbnails in the filepicker screen will properly respond to the values in the screen structure file:diff --git a/xsl/std.filepicker.list1.xsl b/xsl/std.filepicker.list1.xsl
index 320a20d..a14094a 100644
--- a/xsl/std.filepicker.list1.xsl
+++ b/xsl/std.filepicker.list1.xsl
@@ -31,8 +31,8 @@
<xsl:variable name="image_directory" select="/root/params/image_directory" />
<xsl:variable name="image_width">
<xsl:choose>
- <xsl:when test="/root/params/image_width">
- <xsl:value-of select="/root/params/image_width" />
+ <xsl:when test="/root/params/imagewidth">
+ <xsl:value-of select="/root/params/imagewidth" />
</xsl:when>
<xsl:otherwise>
<xsl:value-of select="//root/structure/main/row/cell/@imagewidth" />
@@ -41,8 +41,8 @@
</xsl:variable>
<xsl:variable name="image_height">
<xsl:choose>
- <xsl:when test="/root/params/image_height">
- <xsl:value-of select="/root/params/image_height" />
+ <xsl:when test="/root/params/imageheight">
+ <xsl:value-of select="/root/params/imageheight" />
</xsl:when>
<xsl:otherwise>
<xsl:value-of select="//root/structure/main/row/cell/@imageheight" />
I would still like to have the images be scaled proportionally to fit into a bounding box specified by imagewidth and imageheight. Based on my reading of your code, it would have to be implemented something like this:
- std.filepicker1.inc will perform additional processing on the files it reads, based on their type.
- For images, the width and height will be extracted with getimagesize($file)
- For other files... some other relevant metadata?
- std.table.class.inc will need setFieldArray() to accept a second argument for an array of metadata key/value pairs whose indexes line up with the $file_list
- include.xml.*.inc will need to accept an array of key/value pairs for a file's row entry and insert them using setAttribute($key, $value)
- std.filepicker.list1.xsl will need to run the scaling code using the image dimensions stored as attributes in the "/root/file" tags and the bounding boxes specified in "/root/params/image*"
Is there a better way to do any part of that? I am trying to decide whether it is worth doing.
|
|
|
Re: proportional scaling of thumbnails in filepicker (for images) [message #1465 is a reply to message #1464] |
Mon, 14 July 2008 17:01 |
AJM
Messages: 2371 Registered: April 2006 Location: Surrey, UK
|
Senior Member |
|
|
You are mistaken. The code in std.filepicker.list1.xsl reads as follows:
<xsl:variable name="image_width">
<xsl:choose>
<xsl:when test="/root/params/image_width">
<xsl:value-of select="/root/params/image_width" />
</xsl:when>
<xsl:otherwise>
<xsl:value-of select="//root/structure/main/row/cell/@imagewidth" />
</xsl:otherwise>
</xsl:choose>
</xsl:variable>
which means that for the variable $image_width it looks first in "/root/params/image_width", and if that is not found it looks in "//root/structure/main/row/cell/@imagewidth" which is supplied from the screen structure file. In my tests I modified the values in the screen structure file, and it was these which were picked up by the XSL transformation. If I supply only one value then only that value goes through the XSL transformation and appears in the HTML output.
The reason that I do not show each image full size is that full size is not, or should not be, necessary in the file picker. Nor should it be necessary in any maintenance screens.
Tony Marston
http://www.tonymarston.net
http://www.radicore.org
|
|
|
|
|
|
|
|
|
|
|
Re: proportional scaling of thumbnails in filepicker (for images) [message #1492 is a reply to message #1491] |
Wed, 16 July 2008 18:19 |
AJM
Messages: 2371 Registered: April 2006 Location: Surrey, UK
|
Senior Member |
|
|
My current ERP application, which is being used by several clients, has the ability to upload product images which are used by a separate web site as well as being displayed in the Radicore application. The web site has the ability to display each image in one of four sizes - 60x60, 100x100, 200x200 and 400x400. All images are uploaded as 400x400, and the upload function has code which automatically produces copies in all the other dimensions. When an image is picked for display the copy with the desired dimension is selected, which means that it does not have to be rescaled at runtime.
The essence of this is:
(a) All images have consistent dimensions. It is up to the person creating the image to stick to the standard size.
(b) Rescaling is done just once during the upload procedure, no each time the image is loaded into a web page.
Tony Marston
http://www.tonymarston.net
http://www.radicore.org
|
|
|