Optional header bar

[waschinski]

As being asked for in #58 it'd be nice to have a header bar similar to what jad.photos has been done manually.

It could show the already existing TITLE next to an icon (maybe from a pre-defined selection or just use an icon library like Fontawesome?). Background and font color set using hex color codes.

[sameer920]

Hey, I just discovered this issue while searching for good first issues. This seems like something I can do, but I have a few questions. In the discussion, you mentioned some customization; are options you included in this issue all the customizations you want? Secondly, how would these customizations take place? As much as I have seen from the documentation, the customizations usually happen through environment variables. Is it going to be the case with the header bar as well?

[waschinski]

Hi Sameer!

I must admit I haven't put much thought into it yet.

My first idea was to just add an empty template which is always getting included but that would mean you would have to come up with your own HTML which is not very convenient for some users. Maybe with some inline documentation or a proper Wiki entry could be good enough though? But when running photo-stream in a docker container it would also mean having to map that file though.

On a second thought I was like lets just define new environment variables that configure a few things on the header bar:

• icon (optional)
• text (and icon) alignment left or right
• font color (hex)
• background color (hex)

While the text would just be the TITLE env variable.

What do you think?

[sameer920]

Those seem like good ideas.

Maybe we can use background color as a boolean variable so you'll not get a header bar if background color is an empty string? Or maybe we can add another boolean variable to control if the header bar shows up or not.

Icons are something I am having trouble with. If we choose font awesome, will it be self hosted or will we use kits. If we use kits, then maybe we can include a kit url variable as well, as that would allow users who want to use paid icons to use them. Another problem with using a kit url tied to one account is that it results in reliance on the account holder, and if that kit is free, then there will also be the issue of overage fees as it will easily exceed the page view limit.

[sameer920]

Something I have used in the past is material symbols by Google which has an easier linking process as it doesn't require your to sign up to add icons, so that's something we can look into as well?

[waschinski]

Maybe we can use background color as a boolean variable so you'll not get a header bar if background color is an empty string? Or maybe we can add another boolean variable to control if the header bar shows up or not.

Good point, I think I'd rather add another Boolean variable to enable the header bar. Or, if we also allow for a bottom bar, it could be HEADER_SHOW which could be top, bottom or empty (none).

[waschinski]

Something I have used in the past is material symbols by Google which has an easier linking process as it doesn't require your to sign up to add icons, so that's something we can look into as well?

I haven't considered the requirement of external resources in order to allow a variety of different icons. The project never used external icons even before I adopted it and when extending it I kept adding free icons directly to the code base.

Long story short, I would prefer fewer options but free and included in the project.

[sameer920]

That's easy enough. So the icon will just be placed in the img folder along with other SVGs? Or maybe in the main directory like we have favicon.svg?

[waschinski]

I'd go with the img folder.

[sameer920]

Seems like a good idea. I'll try and see if I get the time to implement it this week, if not, I'll implement it over the weekend.

[nicosomb]

I copied the css code from https://jad.photos/ to my website : https://instantanes.loeuillet.org/ I just want to keep this bar on photo details page. But I have to play with z-index ...

[waschinski]

Just try setting z-index: 100 on the header, should do what you want.

Great photos btw!

[nicosomb]

It works. Now I have to see why the title don’t change when I change the page. I have to play with javascript I think.

[nicosomb]

:tada: It works: https://instantanes.loeuillet.org/ now each page has a header bar and the title changes for each page.

[waschinski]

How about a little how-to that we could add to a Wiki page here until we have a ready-to-use solution integrated? :)

[nicosomb]

It's possible .. but when you'll release a new version of photo-stream, we'll have to make the changes again.

[waschinski]

Last night I've been working on a simple implementation for this:

• No icon support (yet), just text (website title and photo name next to it when a photo is being shown).
• Only the background color is customizable right now.

[nicosomb]

Good news!