nginx-proxy-manager
nginx-proxy-manager copied to clipboard
NginxProxyManager
How to set a custom 404 page including an image
Hi, How do I set a custom 404 page with an image in the page? I heave found these in the settings, but where do I save the image and how to link it to the image?
TIA
Can you try uploading the image to an image hosting site like imgur, ie:
<img src="https://i.imgur.com/example.png" />
You can convert the picture to base64 and embed it as plain text. There are plenty of neat little online tools to do this. The result looks like this:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4 //8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />
You can convert the picture to base64 and embed it as plain text. There are plenty of neat little online tools to do this. The result looks like this:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4 //8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />
I used this site to convert the picture Base64 Encode Image But when I paste the output in the Costum page field I get an error message.
So after waiting for a while I was hoping for a fix or a solution but it still isn’t working for me. This time I tried to add a custom page without images and even that isn’t working.
<!DOCTYPE html>
<html>
<head>
<style type=text/css>
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
padding: 0;
margin: 0;
}
#notfound {
position: relative;
height: 100vh;
}
#notfound .notfound {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.notfound {
max-width: 520px;
width: 100%;
line-height: 1.4;
text-align: center;
}
.notfound .notfound-error {
position: relative;
height: 200px;
margin: 0px auto 20px;
z-index: -1;
}
.notfound .notfound-error h1 {
font-family: 'Montserrat', sans-serif;
font-size: 200px;
font-weight: 300;
margin: 0px;
color: #211b19;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
@media only screen and (max-width: 767px) {
.notfound .notfound-error h1 {
font-size: 148px;
}
}
@media only screen and (max-width: 480px) {
.notfound .notfound-error {
height: 148px;
margin: 0px auto 10px;
}
.notfound .notfound-error h1 {
font-size: 120px;
font-weight: 200px;
}
.notfound .notfound-error h2 {
font-size: 30px;
}
.notfound a {
padding: 7px 15px;
font-size: 24px;
}
.h2 {
font-size: 148px;
}
}
</style>
</head>
<body>
<div id="notfound">
<div class="notfound">
<h1>Sorry the page can't be loaded!</a></h1>
<div class="notfound-error">
<p>Contact the site's administrator or support for assistance.</p>
</div>
</div>
</div>
</body>
</html>
for others struggling with this, I found this was being cased by a missing cert folder, when fixed, I was able to use a full complex web page in custom.
for others struggling with this, I found this was being cased by a missing cert folder, when fixed, I was able to use a full complex web page in custom.
would you please share your findings on how to do this with a bit more info? an example of the config code
for others struggling with this, I found this was being cased by a missing cert folder, when fixed, I was able to use a full complex web page in custom.
would you please share your findings on how to do this with a bit more info? an example of the config code
Not much to share, but I will try and elaborate.
First, I may have misled folks, this is NOT a custom 404 page, this is the SETTINGS->Default Site->Custom Page setting. which has an option to use a congrats page, 404 page, a redirect or custom page (Insert html)
I was getting an error every time I tried to set the custom HTML for a a custom 404, it was an odd error, and did not capture it, but in trying to resolve why my custom 404 was not working, I found my way to this issue.
my custom 404 code was this (yes it had the malformed HTML in it, but it worked)
<h1> NPM2 - You have hit a dead end </h2>
The error was something like
unable to properly close json structure
and I would get it, trying to change the above incorrect code to anything else.
when I went to the core logs I noticed many errors like this:
nginx: [emerg] cannot load certificate "/etc/letsencrypt/live/npm-79/fullchain.pem": BIO_new_file() failed (SSL: error:02001002:system library:fopen:No such file or directory:fopen('/etc/letsencrypt/live/npm-79/fullchain.pem','r') error:2006D080:BIO routines:BIO_new_file:no such file)
and my research had shown that when the NPM system hits a failure like this, it stops processing the other certificate renewals and just stops there.
so I examined the folders there and found that a cert folder npm-79 was indeed missing causing this error, so I copied the npm-78 to npm-79 restarted the container, then manually updated all my certificates and the next time I altered my custom 404, It worked. I was then able to paste an entire complex HTML page, with images, javasscript, css and all.
So I have tried to set this many times but it still isn't working for me! Even after the latest NPM update 2.10.2
When I set a custom page I still get to see the default 404 openresty page. Has anyone manage to get this working?
See my config below:
This is the html code I'm using:
<!doctype html>
<html>
<head>
<title>Nothing Here</title>
<meta charset="utf-8"/>
<meta name="robots" content="noindex"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
text-align: center;
padding: 20px;
# font-weight: bold;
font-family: "Trade Gothic LT Std", Bold;
color: #3333;
}
@media (min-width: 768px){
body{ padding-top: 150px;
}
}
h1 {
font-size: 50px;
font-weight: bold;
font-family: "Trade Gothic LT Std", Bold;
color: #085294;
}
article {
display: block;
text-align: left;
max-width: 650px;
margin: 0 auto;
}
</style>
</head>
<body>
<article>
<h1>Oops!</h1>
<div>
<p>Sorry for the inconvenience but you are not supposed to be here. You won't get anything here!</p>
</div>
</article>
</body>
</html>
Any suggestion or tips how to get this working would be much appreciated!
I am having a similar issue (which is possibly a direct cause of the above issue)?
Essentially I have a domain name mysite.com that points at my web server (port 80/443), this web server runs NPM and intercepts the domain name entered (i.e. photos.mysite.com and redirects it to my self-hosted photo sharing service). Each of these has been configured in NPM (with ssl provided by letsencrypt) which is all working perfectly.
However, when I set a custom 404 web page, for example to intercept invalid.mysite.com it displays my custom error page, HOWEVER, the SSL is not valid as it's not used the correct certificate for the invalid subdomain. It should use my wildcard certificate *.mysite.com which is used for all my subdomains. Any idea how to configure NPM to use an SSL certificate for a custom error page?
Below shows an invalid subdomain being "loaded" and NPM displaying the custom 404 page (as expected), but I have to set my browser to accept insecure connections (and that might be the cause of the above issue?):
Oh fun, I just ran into the same issue as you @mattconway1984 . Ever find a solution?
@CorvetteCole unfortunately I did not, I did have a quick look in the config files, but couldn't see anything obvious and as it's (for me) low priority I gave up.
Bei mir hat es damit funktioniert: Eine Custom Block Page hinterlegen und den Rest könnt Ihr den Screenshots entnehmen.
RAW Text: location /test { proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme;
root /data/nginx/default_www;
index index.html;
rewrite ^/* /index.html break;
}
