You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@ofbiz.apache.org by "Wai (Created) (JIRA)" <ji...@apache.org> on 2012/02/04 09:31:53 UTC

[jira] [Created] (OFBIZ-4678) widget tag to use css for resizing

widget <image> tag to use css for resizing
------------------------------------------

                 Key: OFBIZ-4678
                 URL: https://issues.apache.org/jira/browse/OFBIZ-4678
             Project: OFBiz
          Issue Type: Improvement
          Components: ALL COMPONENTS
    Affects Versions: SVN trunk
            Reporter: Wai
            Priority: Minor




--
This message is automatically generated by JIRA.
If you think it was sent incorrectly, please contact your JIRA administrators: https://issues.apache.org/jira/secure/ContactAdministrators!default.jspa
For more information on JIRA, see: http://www.atlassian.com/software/jira

        

Re: [jira] [Updated] (OFBIZ-4678) widget tag to use css for resizing

Posted by Wai <bz...@gmail.com>.
Hello Committers,

Would anyone care to commit these changes?

Thanks,
Wai

--
View this message in context: http://ofbiz.135035.n4.nabble.com/jira-Created-OFBIZ-4678-widget-image-tag-to-use-css-for-resizing-tp4356909p4373532.html
Sent from the OFBiz - Dev mailing list archive at Nabble.com.

[jira] [Commented] (OFBIZ-4678) widget tag to use css for resizing

Posted by "Jacques Le Roux (Commented) (JIRA)" <ji...@apache.org>.
    [ https://issues.apache.org/jira/browse/OFBIZ-4678?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel&focusedCommentId=13213453#comment-13213453 ] 

Jacques Le Roux commented on OFBIZ-4678:
----------------------------------------

Hi Wai,

Not sure when exactly but should be "soon"
                
> widget <image> tag to use css for resizing
> ------------------------------------------
>
>                 Key: OFBIZ-4678
>                 URL: https://issues.apache.org/jira/browse/OFBIZ-4678
>             Project: OFBiz
>          Issue Type: Improvement
>          Components: ALL COMPONENTS
>    Affects Versions: SVN trunk
>            Reporter: Wai
>            Priority: Minor
>         Attachments: ofbiz-4678.patch, ofbiz-4678.patch, ofbiz-4678.patch, ofbiz-4678.patch
>
>


--
This message is automatically generated by JIRA.
If you think it was sent incorrectly, please contact your JIRA administrators: https://issues.apache.org/jira/secure/ContactAdministrators!default.jspa
For more information on JIRA, see: http://www.atlassian.com/software/jira

        

[jira] [Commented] (OFBIZ-4678) widget tag to use css for resizing

Posted by "Anne Jessel (Commented) (JIRA)" <ji...@apache.org>.
    [ https://issues.apache.org/jira/browse/OFBIZ-4678?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel&focusedCommentId=13213231#comment-13213231 ] 

Anne Jessel commented on OFBIZ-4678:
------------------------------------

I would be sorry to see the width and height go, but do not object as I understand the reasons.

The ideal solution would indeed be for the server to insert the real width and height. However as I said before, I couldn't see a practical way to do that.
                
> widget <image> tag to use css for resizing
> ------------------------------------------
>
>                 Key: OFBIZ-4678
>                 URL: https://issues.apache.org/jira/browse/OFBIZ-4678
>             Project: OFBiz
>          Issue Type: Improvement
>          Components: ALL COMPONENTS
>    Affects Versions: SVN trunk
>            Reporter: Wai
>            Priority: Minor
>         Attachments: ofbiz-4678.patch, ofbiz-4678.patch, ofbiz-4678.patch, ofbiz-4678.patch
>
>


--
This message is automatically generated by JIRA.
If you think it was sent incorrectly, please contact your JIRA administrators: https://issues.apache.org/jira/secure/ContactAdministrators!default.jspa
For more information on JIRA, see: http://www.atlassian.com/software/jira

        

[jira] [Updated] (OFBIZ-4678) widget tag to use css for resizing

Posted by "Wai (Updated) (JIRA)" <ji...@apache.org>.
     [ https://issues.apache.org/jira/browse/OFBIZ-4678?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ]

Wai updated OFBIZ-4678:
-----------------------

    Attachment: ofbiz-4678.patch

This patch supercedes all previous ones.
-forgot to include changes in framework/widget/dtd/widget-form.xsd
                
> widget <image> tag to use css for resizing
> ------------------------------------------
>
>                 Key: OFBIZ-4678
>                 URL: https://issues.apache.org/jira/browse/OFBIZ-4678
>             Project: OFBiz
>          Issue Type: Improvement
>          Components: ALL COMPONENTS
>    Affects Versions: SVN trunk
>            Reporter: Wai
>            Priority: Minor
>         Attachments: ofbiz-4678.patch, ofbiz-4678.patch, ofbiz-4678.patch, ofbiz-4678.patch
>
>


--
This message is automatically generated by JIRA.
If you think it was sent incorrectly, please contact your JIRA administrators: https://issues.apache.org/jira/secure/ContactAdministrators!default.jspa
For more information on JIRA, see: http://www.atlassian.com/software/jira

        

[jira] [Updated] (OFBIZ-4678) widget tag to use css for resizing

Posted by "Wai (Updated) (JIRA)" <ji...@apache.org>.
     [ https://issues.apache.org/jira/browse/OFBIZ-4678?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ]

Wai updated OFBIZ-4678:
-----------------------

    Attachment: ofbiz-4678.patch

This patch supersedes all previous ones.
                
> widget <image> tag to use css for resizing
> ------------------------------------------
>
>                 Key: OFBIZ-4678
>                 URL: https://issues.apache.org/jira/browse/OFBIZ-4678
>             Project: OFBiz
>          Issue Type: Improvement
>          Components: ALL COMPONENTS
>    Affects Versions: SVN trunk
>            Reporter: Wai
>            Priority: Minor
>         Attachments: ofbiz-4678.patch, ofbiz-4678.patch
>
>


--
This message is automatically generated by JIRA.
If you think it was sent incorrectly, please contact your JIRA administrators: https://issues.apache.org/jira/secure/ContactAdministrators!default.jspa
For more information on JIRA, see: http://www.atlassian.com/software/jira

        

[jira] [Commented] (OFBIZ-4678) widget tag to use css for resizing

Posted by "Jacques Le Roux (Commented) (JIRA)" <ji...@apache.org>.
    [ https://issues.apache.org/jira/browse/OFBIZ-4678?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel&focusedCommentId=13206400#comment-13206400 ] 

Jacques Le Roux commented on OFBIZ-4678:
----------------------------------------

Hi Wai,

Could you explain with some details what/how you did and why you did it?
For instance why do you redefine the same styles, why do yo use a border, etc?
                
> widget <image> tag to use css for resizing
> ------------------------------------------
>
>                 Key: OFBIZ-4678
>                 URL: https://issues.apache.org/jira/browse/OFBIZ-4678
>             Project: OFBiz
>          Issue Type: Improvement
>          Components: ALL COMPONENTS
>    Affects Versions: SVN trunk
>            Reporter: Wai
>            Priority: Minor
>         Attachments: ofbiz-4678.patch, ofbiz-4678.patch
>
>


--
This message is automatically generated by JIRA.
If you think it was sent incorrectly, please contact your JIRA administrators: https://issues.apache.org/jira/secure/ContactAdministrators!default.jspa
For more information on JIRA, see: http://www.atlassian.com/software/jira

        

[jira] [Commented] (OFBIZ-4678) widget tag to use css for resizing

Posted by "Jacques Le Roux (Commented) (JIRA)" <ji...@apache.org>.
    [ https://issues.apache.org/jira/browse/OFBIZ-4678?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel&focusedCommentId=13206753#comment-13206753 ] 

Jacques Le Roux commented on OFBIZ-4678:
----------------------------------------

Thanks for the explanations,

The css looks fine with me now, though I will comment out the border. I will review later but I think it's ok.
                
> widget <image> tag to use css for resizing
> ------------------------------------------
>
>                 Key: OFBIZ-4678
>                 URL: https://issues.apache.org/jira/browse/OFBIZ-4678
>             Project: OFBiz
>          Issue Type: Improvement
>          Components: ALL COMPONENTS
>    Affects Versions: SVN trunk
>            Reporter: Wai
>            Priority: Minor
>         Attachments: ofbiz-4678.patch, ofbiz-4678.patch, ofbiz-4678.patch, ofbiz-4678.patch
>
>


--
This message is automatically generated by JIRA.
If you think it was sent incorrectly, please contact your JIRA administrators: https://issues.apache.org/jira/secure/ContactAdministrators!default.jspa
For more information on JIRA, see: http://www.atlassian.com/software/jira

        

[jira] [Updated] (OFBIZ-4678) widget tag to use css for resizing

Posted by "Wai (Updated) (JIRA)" <ji...@apache.org>.
     [ https://issues.apache.org/jira/browse/OFBIZ-4678?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ]

Wai updated OFBIZ-4678:
-----------------------

    Attachment: ofbiz-4678.patch
    
> widget <image> tag to use css for resizing
> ------------------------------------------
>
>                 Key: OFBIZ-4678
>                 URL: https://issues.apache.org/jira/browse/OFBIZ-4678
>             Project: OFBiz
>          Issue Type: Improvement
>          Components: ALL COMPONENTS
>    Affects Versions: SVN trunk
>            Reporter: Wai
>            Priority: Minor
>         Attachments: ofbiz-4678.patch
>
>


--
This message is automatically generated by JIRA.
If you think it was sent incorrectly, please contact your JIRA administrators: https://issues.apache.org/jira/secure/ContactAdministrators!default.jspa
For more information on JIRA, see: http://www.atlassian.com/software/jira

        

[jira] [Commented] (OFBIZ-4678) widget tag to use css for resizing

Posted by "Anne Jessel (Commented) (JIRA)" <ji...@apache.org>.
    [ https://issues.apache.org/jira/browse/OFBIZ-4678?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel&focusedCommentId=13211688#comment-13211688 ] 

Anne Jessel commented on OFBIZ-4678:
------------------------------------

In the old days, one always included width and height in an img tag so that the browser could layout the page before the image had been downloaded. If width and height were not present, then as each image arrived the page would be completely reformatted and redrawn. This flashing of the page was disconcerting for users with slow connections. I see this patch removes the width and height from the img tags. Is that because browser technology has moved on, and the major reason for including those attributes no longer applies?

BTW I looked a while ago at including the real image size in the img tag, but couldn't see a practical way to do it.
                
> widget <image> tag to use css for resizing
> ------------------------------------------
>
>                 Key: OFBIZ-4678
>                 URL: https://issues.apache.org/jira/browse/OFBIZ-4678
>             Project: OFBiz
>          Issue Type: Improvement
>          Components: ALL COMPONENTS
>    Affects Versions: SVN trunk
>            Reporter: Wai
>            Priority: Minor
>         Attachments: ofbiz-4678.patch, ofbiz-4678.patch, ofbiz-4678.patch, ofbiz-4678.patch
>
>


--
This message is automatically generated by JIRA.
If you think it was sent incorrectly, please contact your JIRA administrators: https://issues.apache.org/jira/secure/ContactAdministrators!default.jspa
For more information on JIRA, see: http://www.atlassian.com/software/jira

        

[jira] [Commented] (OFBIZ-4678) widget tag to use css for resizing

Posted by "Jacques Le Roux (Commented) (JIRA)" <ji...@apache.org>.
    [ https://issues.apache.org/jira/browse/OFBIZ-4678?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel&focusedCommentId=13213458#comment-13213458 ] 

Jacques Le Roux commented on OFBIZ-4678:
----------------------------------------

Anne,

I think we can assume that not much users are using a slow connections nowadays. Also browsers are much faster to render (faster machines, faster algorithms) and now people use mostly larger screens were you don't need to downsize the images and can use real size. So statistically I think Wai's solution is good and less and less you need to really specify image sizes in HTML.

My 2 cts
                
> widget <image> tag to use css for resizing
> ------------------------------------------
>
>                 Key: OFBIZ-4678
>                 URL: https://issues.apache.org/jira/browse/OFBIZ-4678
>             Project: OFBiz
>          Issue Type: Improvement
>          Components: ALL COMPONENTS
>    Affects Versions: SVN trunk
>            Reporter: Wai
>            Priority: Minor
>         Attachments: ofbiz-4678.patch, ofbiz-4678.patch, ofbiz-4678.patch, ofbiz-4678.patch
>
>


--
This message is automatically generated by JIRA.
If you think it was sent incorrectly, please contact your JIRA administrators: https://issues.apache.org/jira/secure/ContactAdministrators!default.jspa
For more information on JIRA, see: http://www.atlassian.com/software/jira

        

[jira] [Commented] (OFBIZ-4678) widget tag to use css for resizing

Posted by "Wai (Commented) (JIRA)" <ji...@apache.org>.
    [ https://issues.apache.org/jira/browse/OFBIZ-4678?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel&focusedCommentId=13206551#comment-13206551 ] 

Wai commented on OFBIZ-4678:
----------------------------

The purpose of ofbiz-4678 was to harmonize on the display size of images with a standardized set of width/height constraints in which an image must fit and preserve the aspect ratio of images.

Currently the source files (eg. ftl, xml) either manually specifies the width or height of a displayed image (ie widget <image> and html <img> tag).  The problem with specifying only one constraint is that an image can affect the layout of the page if the user uploads an image where the aspect ratio could be large.

Some ftl and xml files specify both the width and the height.  The problem with this is that if the aspect ratio of the image in question does not match that of the width and height of the <img> tag, the image would be displayed distorted.

The solution was to create a standardized set of CSS styles that both configure the displayed image size and preserve the image aspect ratio (eg. thumbnail size, medium size and large size).  Of course, the developers can further define or modify the styles to suit their need.

By using CSS, one can change the size of displayed images without having to tamper with the ftl and/or xml files.  This helps to reduce potential bugs that come with modifying the ftl and xml files.  The existing way of doing things is to go through each ftl or xml file in question and manually modify the width and/or height of the <image> and/or <img> tag.

The question about the "border" around images.  If you do not wish to have a border around the image, just remove it from the CSS style.  It's that easy :)  No need to change anything else.  Ie. configuration to the image is done on the CSS style and not on the <image>, <img> tag.

In addition to this post, I have changed the CSS styles for the displayed images.  The existing one did not work properly.  Please refer to the latest patch.

NB: The current patch does not apply to all displayed images.  I have only made appropriate modifications to widget <image> and html <img> tags that have either specified the width and/or height.  There are numerous <image> and <img> tags spread all over the project that do not specify dimensions.  I would have to modify them as I encountered them when I could see where and how they are displayed on the screen.  Note that these images would not be affect by this patch.

                
> widget <image> tag to use css for resizing
> ------------------------------------------
>
>                 Key: OFBIZ-4678
>                 URL: https://issues.apache.org/jira/browse/OFBIZ-4678
>             Project: OFBiz
>          Issue Type: Improvement
>          Components: ALL COMPONENTS
>    Affects Versions: SVN trunk
>            Reporter: Wai
>            Priority: Minor
>         Attachments: ofbiz-4678.patch, ofbiz-4678.patch
>
>


--
This message is automatically generated by JIRA.
If you think it was sent incorrectly, please contact your JIRA administrators: https://issues.apache.org/jira/secure/ContactAdministrators!default.jspa
For more information on JIRA, see: http://www.atlassian.com/software/jira

        

[jira] [Commented] (OFBIZ-4678) widget tag to use css for resizing

Posted by "Wai (Commented) (JIRA)" <ji...@apache.org>.
    [ https://issues.apache.org/jira/browse/OFBIZ-4678?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel&focusedCommentId=13212808#comment-13212808 ] 

Wai commented on OFBIZ-4678:
----------------------------

Hello Jacques,
Do know when you're going to commit this patch to the trunk?
Thanks
                
> widget <image> tag to use css for resizing
> ------------------------------------------
>
>                 Key: OFBIZ-4678
>                 URL: https://issues.apache.org/jira/browse/OFBIZ-4678
>             Project: OFBiz
>          Issue Type: Improvement
>          Components: ALL COMPONENTS
>    Affects Versions: SVN trunk
>            Reporter: Wai
>            Priority: Minor
>         Attachments: ofbiz-4678.patch, ofbiz-4678.patch, ofbiz-4678.patch, ofbiz-4678.patch
>
>


--
This message is automatically generated by JIRA.
If you think it was sent incorrectly, please contact your JIRA administrators: https://issues.apache.org/jira/secure/ContactAdministrators!default.jspa
For more information on JIRA, see: http://www.atlassian.com/software/jira

        

[jira] [Commented] (OFBIZ-4678) widget tag to use css for resizing

Posted by "Wai (Commented) (JIRA)" <ji...@apache.org>.
    [ https://issues.apache.org/jira/browse/OFBIZ-4678?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel&focusedCommentId=13212806#comment-13212806 ] 

Wai commented on OFBIZ-4678:
----------------------------

Regarding including the real image size, the width/height attributes in <img> specifies the boundary of the image when shown on the page.  If you need to specify the real size of the image, the server code would have to perform the determination.  Afterwards, you can include the actual dimensions of the image in the title attribute of <img>

                
> widget <image> tag to use css for resizing
> ------------------------------------------
>
>                 Key: OFBIZ-4678
>                 URL: https://issues.apache.org/jira/browse/OFBIZ-4678
>             Project: OFBiz
>          Issue Type: Improvement
>          Components: ALL COMPONENTS
>    Affects Versions: SVN trunk
>            Reporter: Wai
>            Priority: Minor
>         Attachments: ofbiz-4678.patch, ofbiz-4678.patch, ofbiz-4678.patch, ofbiz-4678.patch
>
>


--
This message is automatically generated by JIRA.
If you think it was sent incorrectly, please contact your JIRA administrators: https://issues.apache.org/jira/secure/ContactAdministrators!default.jspa
For more information on JIRA, see: http://www.atlassian.com/software/jira

        

[jira] [Commented] (OFBIZ-4678) widget tag to use css for resizing

Posted by "Wai (Commented) (JIRA)" <ji...@apache.org>.
    [ https://issues.apache.org/jira/browse/OFBIZ-4678?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel&focusedCommentId=13212765#comment-13212765 ] 

Wai commented on OFBIZ-4678:
----------------------------

The purpose of this patch was to address the following:

1. Provide a standardized set of image width and height specs for page layout in ofbiz. This gives ofbiz a uniform look throughout as it applies to image display.
2. Preserve the aspect ratio of the image when using these standardized image sizes.
3. One place to make styling modifications (eg. css file).
4. Decouple styling from code (eg. java,ftl,xml,html,jsp,etc).

Manually specifying the image width and height does help with preserving the layout of a page regardless of the image size to be shown. The challenge with this method is that the image shown on the page in question may be distorted if the aspect ratio of the image differed from that of the width and height attributes of <img>.  This basically forces the person uploading the image to be more vigilant about image aspect ratios.


                
> widget <image> tag to use css for resizing
> ------------------------------------------
>
>                 Key: OFBIZ-4678
>                 URL: https://issues.apache.org/jira/browse/OFBIZ-4678
>             Project: OFBiz
>          Issue Type: Improvement
>          Components: ALL COMPONENTS
>    Affects Versions: SVN trunk
>            Reporter: Wai
>            Priority: Minor
>         Attachments: ofbiz-4678.patch, ofbiz-4678.patch, ofbiz-4678.patch, ofbiz-4678.patch
>
>


--
This message is automatically generated by JIRA.
If you think it was sent incorrectly, please contact your JIRA administrators: https://issues.apache.org/jira/secure/ContactAdministrators!default.jspa
For more information on JIRA, see: http://www.atlassian.com/software/jira

        

[jira] [Updated] (OFBIZ-4678) widget tag to use css for resizing

Posted by "Wai (Updated) (JIRA)" <ji...@apache.org>.
     [ https://issues.apache.org/jira/browse/OFBIZ-4678?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ]

Wai updated OFBIZ-4678:
-----------------------

    Attachment: ofbiz-4678.patch

this patch supercede all previous.
                
> widget <image> tag to use css for resizing
> ------------------------------------------
>
>                 Key: OFBIZ-4678
>                 URL: https://issues.apache.org/jira/browse/OFBIZ-4678
>             Project: OFBiz
>          Issue Type: Improvement
>          Components: ALL COMPONENTS
>    Affects Versions: SVN trunk
>            Reporter: Wai
>            Priority: Minor
>         Attachments: ofbiz-4678.patch, ofbiz-4678.patch, ofbiz-4678.patch
>
>


--
This message is automatically generated by JIRA.
If you think it was sent incorrectly, please contact your JIRA administrators: https://issues.apache.org/jira/secure/ContactAdministrators!default.jspa
For more information on JIRA, see: http://www.atlassian.com/software/jira

        

[jira] [Closed] (OFBIZ-4678) widget tag to use css for resizing

Posted by "Jacques Le Roux (Closed) (JIRA)" <ji...@apache.org>.
     [ https://issues.apache.org/jira/browse/OFBIZ-4678?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ]

Jacques Le Roux closed OFBIZ-4678.
----------------------------------

       Resolution: Fixed
    Fix Version/s: SVN trunk
         Assignee: Jacques Le Roux

Thanks Wai,

Your patch is in trunk at r1296782. As I said previsouly, I just commented out the border.


                
> widget <image> tag to use css for resizing
> ------------------------------------------
>
>                 Key: OFBIZ-4678
>                 URL: https://issues.apache.org/jira/browse/OFBIZ-4678
>             Project: OFBiz
>          Issue Type: Improvement
>          Components: ALL COMPONENTS
>    Affects Versions: SVN trunk
>            Reporter: Wai
>            Assignee: Jacques Le Roux
>            Priority: Minor
>             Fix For: SVN trunk
>
>         Attachments: ofbiz-4678.patch, ofbiz-4678.patch, ofbiz-4678.patch, ofbiz-4678.patch
>
>


--
This message is automatically generated by JIRA.
If you think it was sent incorrectly, please contact your JIRA administrators: https://issues.apache.org/jira/secure/ContactAdministrators!default.jspa
For more information on JIRA, see: http://www.atlassian.com/software/jira