Bootstrap glyphicons in play framework

Question

I want to use Bootstraps glyphicons in play framework

so when i use <i class="icon-search" />, bootstrap is looking for the icons in "assets/img/...". This behaviour conflicts with the anatomy of a play application because images are in "assets/images/...".

So I tried to remap this by defining an extra route for GET requests to "assets/img":

# Map static resources from the /public folder to the /assets URL path
GET     /assets/img/*file           controllers.Assets.at(path="/public/images", file)
GET     /assets/*file               controllers.Assets.at(path="/public", file)

But doing so, I get an Compilation error "not enough arguments for method at: (path: String, file: String)play.api.mvc.Call. Unspecified value parameter file. " on every other public asset I'm calling.

What am I doing wrong?

Answer 1

Actually describing my problem helped me to search for it here ;) ...stackoverflow already has the answer. Hopefully my question is bringing at least more relevance to this issue I am answering it myself.

According to How to use Twitter Bootstrap 2 with play framework 2.x I had to define static routes for every single glyphicons file, then requests to other assets do not get "misrouted".

I simply added

# Map Bootstrap images
GET     /assets/img/glyphicons-halflings.png            controllers.Assets.at(path="/public", file="/images/glyphicons-halflings.png")
GET       /assets/img/glyphicons-halflings-white.png      controllers.Assets.at(path="/public", file="/images/glyphicons-halflings-white.png")

# Map static resources from the /public folder to the /assets URL path
GET     /assets/*file               controllers.Assets.at(path="/public", file)

to my routes, so I do not need to modify any framework in a special way.

Thanks to your suggestions anyway

Answer 2

Actually... people often confuse some initial structure with it must be exactly the same. In case of app folder, that's correct. Play uses some implicit imports for controllers and models and changing it with no reason will bring more troubles than it's worth. Anyway public folder isn't rendered in any default action/controller/view, so its layout can be totally customized.

(note: OK, I must confese, I didn't read this doc, they wrote You should organize your static assets like this to keep all Play applications consistent. but it is not true! :))

General rule is: don't break the ready to use frameworks, plugins, etc, which are placed in public dir. For an example while you can modify bootstrap quite easy with some additional routes, if you'll try the same with Aloha editor, you'll probably damage it permanantly. If you want to keep a clean structure - create for an example public/frameworks/bootstrap-current folder and extract there package from original authors.

It will allow you update to newer version with just simple unziping the pack, Also will avoid your headache.

Answer 3

If you're using Bootstrap LESS, change the path in variables.less:

// Sprite icons path
// -------------------------
@iconSpritePath:          "assets/images/techcore/glyphicons-halflings.png";