Radicore Forum
Fast Uncompromising Discussions. FUDforum will get your users talking.

Home » RADICORE » How To » proportional scaling of thumbnails in filepicker (for images)
proportional scaling of thumbnails in filepicker (for images) [message #1461] Mon, 14 July 2008 10:35 Go to next message
ikatz is currently offline  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 #1462 is a reply to message #1461] Mon, 14 July 2008 13:49 Go to previous messageGo to next message
AJM is currently offline  AJM
Messages: 2367
Registered: April 2006
Location: Surrey, UK
Senior Member
You need to be modifying the '*.filepicker.screen.inc' file that the task uses as this contains the dimensions used in the filepicker screen.

I have played around with only specifying one of the dimensions, and have made a small change to the XSL template (see attachment) so that it only outputs a value which is greater than zero, thus avoiding a null value which is treated as zero.


Re: proportional scaling of thumbnails in filepicker (for images) [message #1464 is a reply to message #1462] Mon, 14 July 2008 16:05 Go to previous messageGo to next message
ikatz is currently offline  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:

  1. 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?

  2. 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
  3. 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)
  4. 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 Go to previous messageGo to next message
AJM is currently offline  AJM
Messages: 2367
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.


Re: proportional scaling of thumbnails in filepicker (for images) [message #1466 is a reply to message #1465] Mon, 14 July 2008 17:19 Go to previous messageGo to next message
ikatz is currently offline  ikatz
Messages: 40
Registered: December 2007
Location: Durham, NH
Member
OK, I see what I did. By changing "image_width" to "imagewidth", it failed to find the "/root/params/image_width", and fell back on "//root/structure/main/row/cell/@imagewidth".

So, the real reason it was not working for me before was that there is a value of 60 stored in "/root/params/image_width" and "/root/params/image_height". Where does that come from? I want to get rid of those, because they are overriding the values in my screen structure file.

Re: proportional scaling of thumbnails in filepicker (for images) [message #1467 is a reply to message #1466] Mon, 14 July 2008 18:05 Go to previous messageGo to next message
AJM is currently offline  AJM
Messages: 2367
Registered: April 2006
Location: Surrey, UK
Senior Member
You must be setting a value in $this->xsl_params somewhere in your code.

Re: proportional scaling of thumbnails in filepicker (for images) [message #1471 is a reply to message #1467] Tue, 15 July 2008 10:37 Go to previous messageGo to next message
ikatz is currently offline  ikatz
Messages: 40
Registered: December 2007
Location: Durham, NH
Member
The value of 60 was indeed hiding in the class file. Thanks Smile

What are your thoughts on my idea for implementing proportional scaling for thumbnails?
Re: proportional scaling of thumbnails in filepicker (for images) [message #1472 is a reply to message #1471] Tue, 15 July 2008 12:19 Go to previous messageGo to next message
AJM is currently offline  AJM
Messages: 2367
Registered: April 2006
Location: Surrey, UK
Senior Member
In all the live systems I have implemented the size of all thumbnail images has been fixed, so the idea of allowing images of different sizes does not have any merit.

Re: proportional scaling of thumbnails in filepicker (for images) [message #1480 is a reply to message #1472] Tue, 15 July 2008 16:06 Go to previous messageGo to next message
ikatz is currently offline  ikatz
Messages: 40
Registered: December 2007
Location: Durham, NH
Member
Maybe I'm not being clear enough.

I want the cell size for each image to be identical, but I want the image to be scaled to fit that cell in such a way that the proportions remain the same. In other words, if my image is 100x200 and my cell is 100x100, I want the thumbnail to be 50x100 (not 100x100, which would appear stretched).

The attached xsl and thumbnail script accomplish this.
Re: proportional scaling of thumbnails in filepicker (for images) [message #1481 is a reply to message #1480] Tue, 15 July 2008 16:08 Go to previous messageGo to next message
ikatz is currently offline  ikatz
Messages: 40
Registered: December 2007
Location: Durham, NH
Member
Here is the PHP file (thumbnail script) associated with the XSL file in the previous post.
  • Attachment: viewimage.php
    (Size: 4.12KB, Downloaded 1015 times)
Re: proportional scaling of thumbnails in filepicker (for images) [message #1483 is a reply to message #1481] Tue, 15 July 2008 19:40 Go to previous messageGo to next message
AJM is currently offline  AJM
Messages: 2367
Registered: April 2006
Location: Surrey, UK
Senior Member
My code will not supply separate dimensions for indvidual images, so if you want everything displayed at 100x100 then they will be displayed at 100x100 - not one at 100x50, one at 100x75 and another at 75x100. If you want each image to be displayed in its correct proportions then you should ensure that each image is uploaded in the correct dimensions, i.e. 100x100.

Re: proportional scaling of thumbnails in filepicker (for images) [message #1491 is a reply to message #1483] Wed, 16 July 2008 17:11 Go to previous messageGo to next message
ikatz is currently offline  ikatz
Messages: 40
Registered: December 2007
Location: Durham, NH
Member
The previously-attached .xsl and .php files I am using have accomplished the result I desired.

I would like to pursue this line of inquiry though, because it looks like you and I have a fundamentally different approach to uploading images and I am genuinely interested in your opinion.

Attached is an example of mixed image sizes using my new code; I upload fairly large (print quality) images in their original dimensions/proportions. Rather than perform scaling on the images once they are uploaded, I do it when they are displayed on the frontend site. This allows me to use a single source image to generate any size I need (depending where on the site it is being used).

What motivates your decision to standardize the sizes on the way in?
Re: proportional scaling of thumbnails in filepicker (for images) [message #1492 is a reply to message #1491] Wed, 16 July 2008 18:19 Go to previous message
AJM is currently offline  AJM
Messages: 2367
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.


Previous Topic: Weird Parent->Child->Child screens help
Next Topic: override noedit on foreign field in multi2
Goto Forum:
  


Current Time: Fri Nov 22 00:06:35 EST 2024

Total time taken to generate the page: 0.01450 seconds