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?

I think you're trying to fix a CSS path problem with your application configuration. Can't you fix the CSS? — isherwood, Mar 11 '13 at 17:29
I do not want to hack twitters stock css to fix this as long as play offers me a gentle way to remap paths over routes. — Jürgen Zornig, Mar 11 '13 at 17:30
I understand that philosophy, but Bootstrap's variables are intended to be... variable. :-) — isherwood, Mar 11 '13 at 17:32
Don't you like a directory called something like "public/template" with all the bootstrap stuff (js+css+img)? — TizianoPiccardi, Mar 11 '13 at 17:40
@Tiziano yes, for sure, but how is that different if the directory is called "public/assets/img" (what bootstraps css is looking for) or "public/template"? The thing is that play already offers a file structure template to put my files into. — Jürgen Zornig, Mar 11 '13 at 17:44
Yes yes, your solution is the correct one. I was just suggest to move the whole directory to be accessible from /assets/bootstrap/img and the css from /assets/bootstrap/css (that works without edit play routes) — TizianoPiccardi, Mar 11 '13 at 17:53
@Tiziano ...seems that this was just too simple for me... ;) of course, because bootstrap paths are already relative, this should work and be the simplest solution as well — Jürgen Zornig, Mar 11 '13 at 18:05

score 9 · Answer 1 · edited May 23 '17 at 12:25

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

This solution worked for me, but at first I had a problem because I put the bootstrap images AFTER the other assets: remember they have to be in the order that Jürgen suggested! — nozebacle, May 13 '13 at 14:53

score 4 · Accepted Answer · answered Mar 12 '13 at 20:29

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.

Tiziano also mentioned this already in the Question comments. I absolutely agree with you, thats probably the best and correct way. No clue, why I did not do it that way in the first place ;) ... I accept this answer and the very good description why it is the best way. — Jürgen Zornig, Mar 13 '13 at 07:30

score 2 · Answer 3 · answered Mar 11 '13 at 17:30

2

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

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

answered Mar 11 '13 at 17:30

isherwood

58,414
16
114
157

ok, I hoped to not come in touch with the whole LESS and CoffeeScript thing, because this is completely new to me. Although I understand the advantages, I still like some things in my web app to be static ;) ... ok, let's have a look if i can learn how to do this, I'll give it a try. – Jürgen Zornig Mar 11 '13 at 17:34

Bootstrap glyphicons in play framework

3 Answers3