New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Optional header bar #60
Comments
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? |
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:
While the text would just be the What do you think? |
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. |
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? |
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). |
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. |
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? |
I'd go with the |
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. |
I copied the css code from https://jad.photos/ to my website : https://instantanes.loeuillet.org/ |
Just try setting Great photos btw! |
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. |
🎉 It works: https://instantanes.loeuillet.org/ now each page has a header bar and the title changes for each page. |
How about a little how-to that we could add to a Wiki page here until we have a ready-to-use solution integrated? :) |
It's possible .. but when you'll release a new version of photo-stream, we'll have to make the changes again. |
Last night I've been working on a simple implementation for this:
|
Good news! |
Former-commit-id: cc02996
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.
The text was updated successfully, but these errors were encountered: