Images in menus?

Is there a way to put an image into a menu?

I tried putting an image into the pre or into the name but neither of those worked.

name = β€˜Sensr.net Cloud DVR for your Security camera’

Is there some way to put HTML into the name so it ends up on the menu maybe?

Cheers,
Adam

Your string quoting is wrongful.

Try β€œβ€ (double quotes) on the outside, and use ’ (single) quotes for attribute values.

For example: pre = "<i class='fa fa-newspaper-o' aria-hidden='true'></i>"

No luck. The entire string just shows up as the menu name instead of the image.

Thanks for trying though!

Cheers,
Adam

Your string quoting is wrongful.
Try β€œβ€ (double quotes) on the outside, and use ’ (single) quotes for attribute values.
For example: pre = "<i class='fa fa-newspaper-o' aria-hidden='true'></i>"

Use double quotes outside. Use single quotes for attribute values.

name = '<img src="/img/logo-1-4-12.png" alt="Sensr.net Cloud DVR for your Security camera">'

Should be:

name = "<img src='/img/logo-1-4-12.png' alt='Sensr.net Cloud DVR for your Security camera'>"

The above works for me.

For example:

[[menu.main]]
    name = "Home"
    url  = "/"
    weight = 1
    pre = "<img src='/img/og.jpg' style='height: 20px; width: 20px;' alt='test menu image'>"

You can view the result here at: http://dev.marijuanadaily.net/ Look at the β€œHome” menu image.

Hope this helps! :slightly_smiling:

You don’t have to mix single/double quotes if you don’t want to. I just do it b/c it keeps it readable/cleaner for me. Feel free to escape the attribute double quotes w/ a backslash if you wish to use only double quotes.

[[menu.main]]
    name = "Home"
    url  = "/"
    weight = 1
    pre = "<img src=\"/img/og.jpg\" style=\"height: 20px; width: 20px;\" alt=\"test menu image\">"

Could you just include the image url in the menu item list and then put all the styling and whatnot in the template?
Like:

[[menu.main]]
  ...
  img = "/img/og.jpg"
  alt = "test menu image"

template.html:

<img src="{{ .img }}" alt="{{ .alt }}"  />
1 Like

A post was split to a new topic: Images in Menu Entries