Link to a static file from Hamlet

Question

I'm currently experimenting with Yesod by following the tutorial on the Yesod Wiki.

First I created a yesod application using yesod init, and created a Root handler that renders a widget file called homepage:

getRootR = do
mu <- maybeAuth
defaultLayout $ do
    h2id <- lift newIdent
    setTitle "Home"
    addWidget $(widgetFile "homepage")

I have an image file in the static directory call static/img/logo.png

After touching Settings/staticFiles.hs, I successfully managed to link this file from default-layout.hamlet via

<img src=@{StaticR img_logo_png}

The problem occurs now that I want to include this static file in my homepage widget, using exactly the same line of code. The following error occurs at compilation:

Handler/Root.hs:19:21:
    Not in scope: `img_logo_png'
    In the result of the splice:
      $(widgetFile "homepage")
    To see what the splice expanded to, use -ddump-splices
    In the first argument of `addWidget', namely
      `$(widgetFile "homepage")'
    In the expression: addWidget ($(widgetFile "homepage"))

So my question is: how do I link static resources in widgets defined with widgetFile, and why does it behave differently in the default layout template?

Answer 1

You need to add an import to Handler/Root.hs:

import Settings.StaticFiles

If a hamlet file requires it then whichever handler.hs file that calls that hamlet file will need to import it first. The reason why default-layout.hamlet doesn't require any changes is because it is called somewhere in I believe Application.hs which has imports for pretty much everything, including static stuff.