Image scaling markup does not work

ishayahu_lastov avatarishayahu_lastov created an issue

I try this code:

{{attachment:Switch.jpg||width=50}}

but image has still the same size like without "width=50" example

Comments (12)

  1. Thomas Waldmann

    that looks like moin 1.x syntax. did you try without attachment: ?

    and please: attach all files to the bug report, don't host them externally. use correct extension then, so that clicking on the files works.

  2. Thomas Waldmann

    confirmed.

    task now: find out how it worked in moin 1.9 / how it should work in moin 2.0

    hint: there are 2 ways how it could work:

    a) directly specifying width=... in the img tag (that's bad for big images that get downloaded full-size and then scaled down inside the browser)

    b) getting &w=... into the query string and triggering server side scaling and caching

  3. sharky93

    As per my understanding

    1. jpg, png, gif's become <img> tags

    2. {{http://someaddress}} this is a case of transclusion of web-pages and this is served as an object.

    3. At the moment svg's are also served as objects.

    For the first case (1), i propose modifying the /+get/ URL to enable server side scaling.

    For the second case(2), we can resize <object> 's with the use of "width" and "height" attributes in the HTML.

    The third case(3), is an interesting one,

    • I also came across an interesting link Can i use svg in img This shows support across browsers for using "SVG" inside an <img> tag, so we should try and improve that, since this (<img>) also has better support for resizing.
    <img width="400" src="image.svg"> </img>
    
    • An interesting case (4) arises when the URL points to an Image not on our servers, in such cases the server side scaling query would not have any effect.

    At the moment the plan is to continue using the <object> tag with "width" and "height" attributes.

    IMO, resizing for <objects> may / may not add scroll bars, behaviour could be different with diffrerent browsers. Tested with Chromium. (No scroll bars were added)

  4. Thomas Waldmann

    when I lasted tried (quite a while ago), some browsers (firefox?) had issues when svg was used with an img tag.

    of course server side scaling like in moin only works in moin (it also works in remote moins).

  5. Roger Haase

    I did not understand the zipped example until I realized the sunflower image included a lot of blank space surrounding the flower. I added the moin logo svg image to test.html and tried a few different sizes:

    <!DOCTYPE html>
    <html>
    <head>
        <title>test browser support for svg images within a img tag</title>
    </head>
    <body>
        <img src = "Sunflower.svg" width="700" height="600" alt="700x600">
        <img src = "Sunflower.svg" width="200" height="200" alt="200x200">
        <img src = "moinlogo.svg" width="100" height="100" alt="100x100">
        <img src = "moinlogo.svg" width="700" height="700" alt="700x700">
        <img src = "moinlogo.svg" width="700" height="300" alt="700x300">
    </body>
    </html>
    

    moinlogo.svg is currently on test.moinmo.in.

    I tested IE9, IE10, Firefox 16, Firefox 20, and current versions of Chrome, Opera, and Safari on Windows 7. All worked, but there were differences in the display. The webkit browsers (Chrome and Safari) skewed the image when displayed at 700x300. All other browsers maintained the aspect ratio and displayed the image at the smaller size.

    Serving svg images with img tags looks OK to me.

  6. sharky93

    Meanwhile, I think I located the bug, as to why despite of writing {{some.jpg||width=50}}, it doesnt do the scaling server side ?

    After the execution of this function internal_representation If I print

    p doc._children[0]._children[0]._children[0].__dict__
    

    The output is

    {'attrib': {Name(u'href', u'http://www.w3.org/2001/XInclude'): Iri(scheme=u'wiki.local', authority=None, path=IriPath(u'python.jpg'), query=u'width=50', fragment=None)}, 'tag': Name(u'include', u'http://www.w3.org/2001/XInclude'), '_children': []}
    

    But after the call to _expand_document and subsequently after include_conv

    The command - ( a bit modified than the previous one to actually refer to the image )

    p doc._children[0]._children[0]._children[0]._children[0]._children[0].__dict__
    
    {'attrib': {Name(u'href', u'http://www.w3.org/1999/xlink'): Iri(scheme=None, authority=None, path=IriPath(u'/+get/+8112c6929fb74503a1e93dcb815ed827/python.jpg'), query=None, fragment=None), Name(u'type', u'http://moinmo.in/namespaces/page'): u'image/jpeg'}, 'tag': Name(u'object', u'http://moinmo.in/namespaces/page'), '_children': [u'python.jpg']}
    

    The query for width=50 is just lost ?

  7. Thomas Waldmann

    note: this issue is mixing up 2 things that should be separate issues:

    a) whether svg images should get transformed into an <img> tag. I am fine with that IF it works flawlessly for recent browsers (it didn't back then when that code was written). This is a different issue (issue number TBD) and should be fixed separately and likely BEFORE b).

    b) making image scaling work (issue 340, this one here).

  8. Log in to comment
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.