How to replace brand text with an image in flask-nav

Question

I've got a nav-bar showing in my flask-bootstrap application by importing flask-nav and using the following:

@nav.navigation()
def mynavbar():
    return Navbar(
        'MyCompany',
        View('Main', 'index'),
        View('Config', 'config'),
        View('Help', 'help')
    )

But I can't find for the life of me how to swap the text "MyCompany" for an image, e.g. img/mylogo.png . Can anyone tell me how?

Answer 1

I'm not entirely happy with this as I think the solution should be a lot simpler, but this works:

import dominate
from dominate.tags import img

nav = Nav()
branding = img(src='static/img/myimage.png')

@nav.navigation()
def mynavbar():
    return Navbar(
    branding,
    View('Main', 'index'),
    View('Config', 'config'),
    View('Help', 'help')
)


nav.init_app(app)

The problem with just putting the html string in, for example <img src="myimage.png">, was that the string was printed rather than being interpreted as an element that should be displayed. The dominate package seems to overcome this.

Answer 2

My answer isn't 100% complete but what I have so far. What I am working on is having images displayed based on the site

I created nav.py looks like this below

nav = [
    {'name': 'Home', 'url': '/'},
    {'name': 'About', 'url': 'about'},
    # {'name': 'pycURL', 'url': 'pythoncurl'},
    {'name': 'Contact', 'url': 'contact'},
    # {'name': 'cartest', 'url': 'bob'},
    # {'name': 'socialtest', 'url': 'social'},
    {'name': 'Search', 'url': 'search'},
    # {'name': 'Searchtest2', 'url': 'search2'},
    {'name': 'layouttest', 'url': 'layouttest'},
    # {'name': 'Login', 'url': 'userauth'}
]

I then import nav into views.py and add to each route (I have not tested yet with out nav added to every route)

@app.route('/social')
def social():
    """Renders the about page."""
    return render_template(
        'social.html',
        title='socialicons',
        year=datetime.now().year,
        message='test',
        #import nav
        nav=nav
    )

Then in layout.html I call nav in a for loop

    <ul class="nav navbar-nav">
        {% for link in nav %}
            <li><a href="{{ link.url }}" class="btn-large">{{ link.name }}</a></li>
        {% endfor %}
    </ul>

I extend layout.html to all of the pages I want the layout applied with

{% extends 'layout.html' %} 

at the top of the page

When I want to add a new link to nav pretty much copy and paste a new line and change things to match the new route and it will apply to every page.

Why I answered this question is because what I am doing right now is working on something like what you are wanting but I want to make it work in a similar system. My goal is to apply different images to the navbar dynamically based on the page.