INL / corpus-frontend

BlackLab Frontend, a feature-rich corpus search interface for BlackLab.
16 stars 7 forks source link

Putting a logo on the search page #446

Closed stcoats closed 1 year ago

stcoats commented 1 year ago

I want to add a logo, like in the OpenSonar interface. The documentation I can find is comments on the default search.xml page. There it says

        <!--
        So when you create a static/img/ directory containing logo.png for the 'zeebrieven' corpus,
        the url here would be '${request:contextPath}/zeebrieven/static/img/logo.png', or '${request:corpusPath}/static/img/logo.png'
        and the directory structure would be ${interfaceDataDir}/zeebrieven/static/img/logo.png
       -->
(...)
        <FaviconDir>${request:contextPath}/img</FaviconDir>

I tried ${request:contextPath}/img/logo.png and ${request:corpusPath}/static/img/logo.png. A logo isn't a favicon, though. Does the tag name need to be different? Where can I find documentation about the xml tags that can appear in search.xml and other pages?

Thanks!

jan-niestadt commented 1 year ago

@KCMertens can elaborate on this if needed, but looking at OpenSonar's configuration, it seems the logo is configured in the custom CSS:

.navbar-logo {
    background-image: url(../img/logo.png);
    width: 188px;
    height: 120px;
    background-size: 100% 100%;
    pointer-events: none;
}

The logo.png lives in the static/img dir.

I'm not sure if FaviconDir in search.xml is needed as well (I would guess not), but just in case, this is how OpenSonar configures it:

<FaviconDir>${request:corpusPath}/static/img</FaviconDir>
KCMertens commented 1 year ago

That is indeed what we do (I probably would have designed it differently these days though).

stcoats commented 1 year ago

It's still not showing. I created the same structure as OpenSonar and copied their logo.png into my static/img folder. I added the navbar-logo css to custom.css When I render my page, the logo.png file is not there, and manifest.json is there. This doesn't change if I refresh the browser cache and restart Blacklab. Earlier, I had copied the entire structure of the default img folder, including the images and the manifest.json file. I guess manifest.json it is being cached and restored somewhere within Blacklab?

image

image

image

How should I trouble-shoot this?

stcoats commented 1 year ago

Never mind, I got it working with

.navbar-logo {
    background-image: url(../static/img/logo.png);
    width: 188px;
    height: 120px;
    background-size: 100% 100%;
    pointer-events: none;
}

image