How to add my own logo on the top left of the front page Elate Theme?

Hi
I’m looking for adding my own logo on the top left of the front page Elate Theme but after a long time I did not succeed
I am not really a web developper… any tips ?
I added a param logo with a link to /static/images/logo.png but it doesn’t work.

Thank you so much for your help !!

  1. Specify the image somewhere, I chose to add it at the end of the navigation section in the included config.toml
  # Navigation
  [params.navigation]
    #other stuff
    logo = "logo.png"
  1. find which layout adds the text logo (partials/nav.html) and add the image or replace the text logo. (line 8)
<a class="navbar-brand" href="index.html">{{ with .Site.Params.navigation.logo }} <img src="{{(( resources.Get . ).Resize "x22").RelPermalink}}" alt="logo" > {{ end }}{{ with .Site.Params.navigation.brand }}{{ . | markdownify }}{{ end }}</a> 

(the “x22” is 22pixels high, I did that to match the text height, you can obviously change this to suit)

  1. resources.Get will look in /assets so add the image there, so you have assets/logo.png

  2. Add some CSS to float left and add a margin to the text logo.
    I added this to the /static/styles.css file under the other references to navbar-brand

.navbar-brand img {float: left; margin-right: 4px;}

Thank you so much @andrewd72 for you quick and helpful answer.
I followed the 2 steps you recommanded. Nevertheless, I can’t find in my Elate Theme “/assets” (could it be /static ?) and I don’t know the function resources.Get . (sorry I’m a truly beginner :blush:) How should I mention my “logo.png” file (his path is : static/images/logo.png ? ) in this line code ?

{{ with .Site.Params.navigation.logo }} <img src=“{{(( resources.Get . ).Resize “x22”).RelPermalink}}” alt=“logo” > {{ end }}{{ with .Site.Params.navigation.brand }}{{ . | markdownify }}{{ end }}

Thank you very much !

Hugo creates the assets folder for you for a new site, it doesn’t need to be in the theme folder.
Your logo is theme independent usually.
If you want hugo to process the image (e.g. resize) then it should be in assets.

You can put it in static folder and hardcode it to /images/logo.png
with <img src=“/images/logo.png” alt=“logo” > if you want. You don’t need the surrounding with statement in that case.
Or you set the filepath in config and add that instead.

Best idea I think is in assets, you can, for example extend things and resize to a 1x version and 2x retina version.

Share the link to that theme or ask the theme author.

what are the consequences ?

I’m opting for this option “You can put it in static folder and hardcode it to /images/logo.png”
could you just precise me what you mean by “hardcode it to /images/logo.png” ? thank you

Put it in static/images/ either site or theme static folder, doesn’t matter.
And link to the image:
<a class="navbar-brand" href="index.html"><img src="/images/logo.png" alt="logo">{{ with .Site.Params.navigation.brand }}{{ . | markdownify }}{{ end }}</a>

Probably best to take the config param out now as it isn’t using that.

What should I do for linking to the image ? where should I past this code => logo{{ with .Site.Params.navigation.brand }}{{ . | markdownify }}{{ end }}

should I past this code in nav.html file ?

This is the link to an image in html.
Hugo will copy any static files to the root of your public folder, so a static/images/logo.png ends up at /images/logo.png
You add it to the template where you want it to appear. In this case, yes, the nav.html had the text logo so it can go there. On another theme it might be a different template, you just have to read them to see what they do.

thank @andrewd72 for your patience :sweat_smile:
I followed your instructions and it definitively works !
thank you very much for all !

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.