GWT ImageResource with locale specific url

Question

Is it possible to have GWT ImageResource with locale specific url, without having to replicate the underlying images?

I read the url of an image influences SEO, one ought to pick good meaningful key words for improved ranking. So I would ideally like to have the locale specific keywords in the image url, that is the image name coming from a i18n Constants class.

Could it be as simple as calling myImageResource.setUrl? If so, does it matter when to call it?

Or is there an annotation to set the url?

Below is some code context.

public interface MyImageBundle extends ClientBundle
{
  public static final MyImageBundle INSTANCE = GWT.create(MyImageBundle.class);

  public static final String IMAGE_PATH = "image/";

  @Source(IMAGE_PATH + "foo1.png")
  ImageResource foo1();

  @Source(IMAGE_PATH + "foo2.png")
  ImageResource foo2();
}

In the browser, I would like the url's to look something like that:

French:
- foo1: mydomain.com/myFrenchPath/myFrenchKeywordFoo1.png
- foo2: mydomain.com/myFrenchPath/myFrenchKeywordFoo2.png
English:
- foo1: mydomain.com/myEnglishPath/myEnglishKeywordFoo1.png
- foo2: mydomain.com/myEnglishPath/myEnglishKeywordFoo2.png
...

Images foo1 & foo2 are the same in all locales, I just want the url to be locale specific.

I would ideally like the path and keywords forming the url to come from a Constants, something like:

public interface MyConstants extends com.google.gwt.i18n.client.Constants
{
  String path();
  String keywordFoo1();
  String keywordFoo2();
}
MyConstants myConstant = (MyConstants) GWT.create(MyConstants.class);

Would the following work? Would it be the right way to go about it?

Image foo1Image = new Image(MyImageBundle.INSTANCE.foo1());
foo1Image.setUrl(myConstant.path() + "/" + myConstant.keywordFoo1() + ".png");

Or is there an annotation to set the url in MyImageBundle?

shukshuk shukshuk · Accepted Answer · 2013-09-22T20:24:23

It seems like you are missing the underlying logic of ClientBundle I'll try to explain shortly but you should take a look at the GWT specs for the TLTR version.

In short, upon compilation of your app, the gwt compile will take all the image files located annotated by ImageResource in MyImageBundle class and pack the into one single sprite sheet image file (with a scrambled SHA1 hash filename) to save space and time for downloading it.

this file is saved under the GWT compiled directory and GWT Image class knows how to work with it to display images properly.

seems like you should skip using ImageResource for this purpose:

fix your code:

Image foo1Image = new Image();
foo1Image.setUrl(myConstant.path() + "/" + myConstant.keywordFoo1() + ".png");

and instead of cloning files on the server side you can write (or find on the web) a very simple http router that serves content calls to both: mydomain.com/myFrenchPath/myFrenchKeywordFoo1.png mydomain.com/myEnglishPath/myEnglishKeywordFoo1.png from: mydomain.com/images/KeywordFoo1.png

GWT ImageResource with locale specific url

2 Answers