Skip to content
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

image chrome tab error #2

Closed
robertovaldesperez opened this issue Jan 26, 2021 · 6 comments · May be fixed by #3
Closed

image chrome tab error #2

robertovaldesperez opened this issue Jan 26, 2021 · 6 comments · May be fixed by #3
Assignees
Labels
bug Something isn't working
Milestone

Comments

@robertovaldesperez
Copy link

robertovaldesperez commented Jan 26, 2021

app.UseHangfireDashboardCustomOptions(new HangfireDashboardCustomOptions
{
DashboardTitle = () => "<img style="display: inline !important; margin-top: -7px;" src="/images/logo.png" /> Titulo"
});
image

@augustoproiete
Copy link
Owner

augustoproiete commented Jan 26, 2021

Thanks for reporting @robertovaldesperez Looks like we need to adjust the Regex so that it skips the title header.

Let me know if this is something you're keen to send a PR to fix, otherwise I'll take a look over the weekend.

@augustoproiete augustoproiete added the bug Something isn't working label Jan 26, 2021
@robertovaldesperez
Copy link
Author

Don't worry, I'm not in a hurry, check it out on the weekend if you can. Thanks a lot @augustoproiete

@augustoproiete
Copy link
Owner

augustoproiete commented Feb 2, 2021

@robertovaldesperez I've just published Hangfire.Dashboard.Customize v1.1.0-preview which should fix the issue you reported and allow a little more control over the title replacement.

When doing the replacement of the DashboardTitle I make sure to skip to the HTML <body> first to ensure the title you see on the browser tab is not replaced with the contents of your DashboardTitle property (where you can have the image as in your example).

I also introduced a new property called BrowserTitle (optional) which allows you to replace the title you see in the browser tab separately. This allows you to have a one title in the browser tab (no images) and another in the nav bar (with or without images).

The configuration code looks like this:

app.UseHangfireDashboardCustomOptions(new HangfireDashboardCustomOptions
{
    BrowserTitle = () => "Titulo",
    DashboardTitle = () => "<img style=\"display: inline !important; margin-top: -7px;\" src=\"/images/logo.png\" /> Titulo",
});

e.g.

image

If you have a chance, please take it for a spin and let me know if this fixes and/or if you see any other issue.

<PackageReference Include="Hangfire.Dashboard.Customize" Version="1.1.0-preview" />

If everything works, I'll release version 1.1.0 RTM later this week.

@robertovaldesperez
Copy link
Author

robertovaldesperez commented Feb 2, 2021

It works very well, thank you very much @augustoproiete.

image

Is it possible to customize the icon of the browser tab? It would be great to be able to customize the image of the browser tab

@augustoproiete
Copy link
Owner

augustoproiete commented Feb 2, 2021

@robertovaldesperez Great!

As for the icon of the browser tab, we need a slightly different approach because the Hangfire Dashboard doesn't define a link tag, so it's not a 1:1 replacement like the title is.

I've just published Hangfire.Dashboard.Customize v1.1.0-preview2, which adds a couple more optional properties: AppendToHead and AppendToBody.

  • AppendToHead allows you to inject any content just before </head> tag - this gives you the ability to, for example, add icons, or perhaps load other CSS files to override existing styles.

  • AppendToBody allows you to inject any content just before the </body> tag - this gives you the ability to, for example, load other javascript files.

app.UseHangfireDashboardCustomOptions(new HangfireDashboardCustomOptions
{
    BrowserTitle = () => "Titulo",
    DashboardTitle = () => "<img style=\"display: inline !important; margin-top: -7px;\" src=\"/images/logo.png\" /> Titulo",

    AppendToHead = () => "<link rel=\"shortcut icon\" type=\"image/x-icon\" href=\"/favicon.ico\" />",
});

image

As before, if you have a chance, please take it for a spin and let me know if this works.

<PackageReference Include="Hangfire.Dashboard.Customize" Version="1.1.0-preview2" />

Again, if everything works, I'll release version 1.1.0 RTM later this week.

@robertovaldesperez
Copy link
Author

It works very well, thank you very much @augustoproiete.

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
2 participants