Gallery Website Header and Footer - options available?

markok · 2022-06-15T08:28:49+00:00

I posted the question again... this time with the correct Subject line... Are there any options available to modify Gallery header and footer content? .....

Karl

nina Yes it would be possible. My only issue with this, is that there isn't really room for any logo in the existing layout. We would need to add a new "bar" above the current topbar, which would be used specifically for the logo. The design will no longer be able to align the sidebar with the current topbar. We have to take mobile devices into consideration. Also, I can't easily anticipate what size and aspect of logo's, so users will need to style their logo with custom CSS.

Just to emphasize where the logo would be and what it would look like. In this case, with the image scaling to it's natural size. As you can see, design is no longer properly aligned.

With some optimization setting a max-width and centering the logo, it will look a bit more elegant. However, the topbar interface (filter, buttons) still looks clumsy when lowered further down on the page.

However, as you can see, there is no way I can create "magic" space for a logo and it will automatically look great. Adding a logo will affect the design, and it's up to each owner to accept the compromise and optimize it so that the impact is minimal.

nina Like we can do it in the gallery x3 application or so.

Yes, although X3 is a completely different design of course, where we can simply stack the logo on top of the page and move everything down. Files Gallery has crucial interface elements where you would normally put a logo.

nina

understand - thank you for expaining to me.
Still there is hope on this topic as far as I know you :-)

Karl

nina I'll add an option in next release.

I just wanted to emphasize that there is no perfect placement for the logo.

Karl

In latest release 0.14.0, there is now a new logo option in Javascript config.
https://www.files.gallery/docs/logo/

Basic instructions

Upload your logo into ./_files/logo/logo.svg (use whatever image format you like).

Create your custom.js, and add the following:

_c.config = {
  logo: './_files/logo/logo.svg',
}

On small screens, the logo will display on top:

On large screens, the logo will display inside the existing topbar:

You could make adjustments with custom CSS, but this might impact the interface, which has very limited space.

Logo link
If you want to make your logo into a link, you can insert the entire logo link HTML, instead of just the path.

_c.config = {
  // logo: './_files/logo/logo.png',
  logo: '<a href="/link/" target="_blank"><img src="./_files/logo/logo.png" class="logo"></a>',
}

Other insert custom HTML options
There are a few other Javascript config options that allow you to insert custom html, for example text, links or logo.

// insert custom header html (above all, but goes behind sidebar)
header: '<a href="#">link 1</a>',

// insert custom topbar html, above main topbar
topbar: '<a href="#">link 1</a><a href="#">link 1</a><a href="#">link 1</a>',

// insert custom footer html, at the bottom of main scroll area
footer: '<a href="#">link 1</a><a href="#">link 1</a><a href="#">link 1</a>',

// insert custom FIXED footer html at the bottom of page, which remains in place during scroll
footer_fixed: '<div class="custom-links"><a href="#">link 1</a><a href="#">link2</a><a href="#">somescheit</a><a href="#">homepage</a></div>',

nina

Karl Thank you so much for implementing this !

« Previous Page