Referencing images from CustomLayout files

Vaadin 6 / 7 / 8 Framework UI
1

There is another issue I got when migrating from 5.2 to 5.3. Not sure if this a bug or something was redesigned, so posting as separate topic.

In 5.2 I used some static images in my CustomLayout files. The images were all referenced as “…/…/” , e.g. , where “img” folder was located inside the custom theme folder.

In 5.3 all images become broken. I checked their URLs and it seems that the base had changed. I figured out that a single backstep is required now - “…/public/images/design/logo.gif”. But this appears to be true only for the first image in layout file. All other images stays broken as their base, for some reason, is an application base - localhost:8080/myapp/ , not layout file location as it is with the first image.

So, what should be the correct base for referencing images from CustomLayout files ?

2

Here is a couple of first lines of my CustomLayout file:


<div id="container">
    <div id="header"><img src="ITMILL/themes/cyberprint/public/images/design/hc_lt.png" alt="corner"
                          id="header_left_corner"/> <a href="/rus/" title="Home page"><img
            src="ITMILL/themes/cyberprint/public/images/design/logo.gif" alt="logo" id="logo"/></a>

The first image is broken, if I check it’s URL in a browser (via popup menu “Get Image Address” for instance), I get:


http://localhost:8080/cybersystem/ITMILL/themes/cyberprint/layouts/ITMILL/themes/cyberprint/public/images/design/hc_lt.png

but all other images (starting from second) are not broken and their URL’s are correct:


http://localhost:8080/cybersystem/ITMILL/themes/cyberprint/public/images/design/logo.gif
3

Hi,

Thought this would have been sorted when the other CL issue was fixed ( http://forum.itmill.com/posts/list/659.page ), but apparently it’s not.

Will take a look at this asap!

Best Regards,
Marc

4

Well, I finally had time to look at this, and here are some findings:
I was unable to reproduce the behaviour (first broken, second not).
Instead it worked as expected: no images.
The reason for this is that if the urls are relative, CustomLayout changes them to be relative to the layouts-directory, which is what happens with the first image. Why the others work is unclear - perhaps the img-tag is wrapped in the html, and the parsing does not work, I’ll try this later.

But in the end: try changing the urls from "ITMILL/themes/cyberprint/public/[…]
" to "…/public/[…]
", and see what happens! And please report back :slight_smile:

Best Regards,
Marc

5

Whooh, stop the presses!

I found the bug: in your code the IMG-tag is wrapped between “img” and “src” w/o any space, but our regexp expected a space. This was pretty hard to reproduce, since a single space in the ‘wrong’ place would make the regexp work.

Anyway, I’m committing this as we speak.

Oh, and this of course means that all your images will break, instead of just the first one :roll: But changing the url to …/ instead of ITMILL/themes/theme should fix that.

BTW one of the reasons for the relative url is that you can actually open your custom layout in some wysiwyg editor, or firefox, and the images will work since they point to an url that is relative to the .html -location.

Best Regards,
Marc

6

Ticket: http://dev.itmill.com/ticket/2654
Fix: http://dev.itmill.com/changeset/6908

7

Wow, what a nice bug it was :slight_smile:
For now just replaced the linebreak with the space and everything works :wink:

Thanks a lot Mark, a great work !