Can't add logo Hugo Bootstrap 5

[caiourtiga]

Hello folks, I am making a website with Bootstrap 5.1 following FutureWebDesign’s videos and I couldn’t add a logo to my header. I made it show an image space(?) on the right side of the logo’s name but it needs to be on the left. How do I fix this? Hugo is the first framework I am learning and templates are still foreign to me.

Repo: GitHub - caiourtiga/bananalearn

File: layouts/partials/header.html

<nav class="navbar navbar-expand-lg navbar-light " style="background-color: #fda117;">
  <div class="container p-0 h3" >
    <a class="navbar-brand" href=""> Bananaz 
      <img src="./content/logo/banan.jpg" alt="" width="30" height="24">
    </a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
     </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
         {{- $currentPage := . -}}
         {{ range .Site.Menus.main -}}
         <li class="nav-item">
           <a class="nav-link{{ if $currentPage.IsMenuCurrent "main" . }} active" aria-current="page{{ end }}" href="{{ .URL }}">
           {{ .Pre }}<span>{{ .Name }}</span>{{ .Post }}
           </a>
         </li>
         {{ end -}}
        </ul>
      </div>
    </div>
</nav>

[andrewd72]

@caiourtiga

<img src="./content/logo/banan.jpg" alt="" width="30" height="24">

This doesn’t look usual. A site logo would normally be pulled from static folder if used exactly as it is, or from an assets folder (personally preferred, you can generate a 1x and 2x sized image). I tried your site and it gives a broken image place holder.

Put it in assets/images/ and use:
<img src=“{{ ((resources.Get “images/banan.jpg”).Resize “20x”).RelPermalink}}” alt=“” width=“30” height=“24”>

Switching the position with the text - just swap the order within the a tag.

[caiourtiga]

Can you show the full code you made? Something broke on my end

<div class="container p-0 h3" >
    <a class="navbar-brand" href=""> Bananaz 
      <img src=“{{ ((resources.Get “images/banan.jpg”).Resize “20x”).RelPermalink}}” alt=“” width=“30” height=“24”>
    </a>

Edit: As Andrew said I swapped positions and the logo is where I want now. I just couldn’t implement his code. <img src="./content/logo/banan.jpg" alt="" width="30" height="24"> <a class="navbar-brand" href=""> Bananaz

I don’t understand why but /banan.jpg”).Resize is all red. Also, how can I make the logo’s words as big as my link elements?

[andrewd72]

Did you move the image? you will get an error if it can’t find the image.
You want the .Resize or .Fill to match the width and height you are hardcoding.
Looks like you have got some curly quotes rather than straight quotes.

[caiourtiga]

Yes I put the image on two different asset folders (don’t know why I have 2 of them) but the problem persists.

[andrewd72]

curly quotes won’t work. It was probably because I didn’t put the line you pasted in a code block.

    <a class="navbar-brand" href="">
      <img src="{{ ((resources.Get "images/banan.jpg").Fill "30x24").RelPermalink}}" alt="" width="30" height="24">Bananaz
    </a>

Don’t put stuff in resources folder.

[caiourtiga]

Your solution worked! This is the working code now <a class="navbar-brand" href=""> <img src="{{ ((resources.Get "images/banan.jpg").Fill "30x24").RelPermalink}}" alt="" width="30" height="24">Bananaz </a>
The image is no longer in the resources folder, just the assets folder.

Thank you very much Andrew.