Skip to main content

I havent seen this image before. Problem is that it doesn´t follow our brand guidelines.

How to change it?

 

Hi @revote !  We hadn’t missed your question about this in the phrases thread - sorry we haven’t been able to get you an answer yet.  I’ve been through all of our hidden phrases and also can’t find a phrase for this image.  I’m still looking for an answer.  As a last resort I expect it’s potentially possible to have a bit of third-party script code that ‘swaps’ the image for something else.  But let me chase some more for you.


Nice, thanks @Kenneth R. I am looking forward 😊


Hey @revote - I might still get a better answer, but here is an approach I was just able to validate as workable in our staging environment.  This simple bit of CSS will simply swap the image out:

imgisrc="https://d3qhpmzl5oynt5.cloudfront.net/2024-07-18-13-25-05-b733e7f227/dist/images/errors/404.png"] {
content: url('https://via.placeholder.com/404'); /* URL of the new image */
}

 


Thanks a lot @Kenneth R, I’ll test this. Hopefully there will be other/better solution in the future but I think we can use this by now 🙂


It seems there is new 403 image as well.

I hope that when you renew your platform, no matter how less or much, you send info & instructions to your customers. Thanks 😊

 


Hey @revote - I might still get a better answer, but here is an approach I was just able to validate as workable in our staging environment.  This simple bit of CSS will simply swap the image out:

img>src="https://d3qhpmzl5oynt5.cloudfront.net/2024-07-18-13-25-05-b733e7f227/dist/images/errors/404.png"] {
content: url('https://via.placeholder.com/404'); /* URL of the new image */
}

 

I added this code to our sandbox but your image remains. I replaced the source image url and new image url as well. Any ideas?


The image `src` attribute value will not necessarily be the same across communities/users.
 

@revote I was able to get the above css idea to work by changing the selector to:
.destination_error_imagegsrc*="404.png"] {

  content: url("https://via.placeholder.com/404");

}


And, I’m assuming this should work for the 403:
.destination_error_imageisrc*="403.png"] {

  content: url("https://via.placeholder.com/404");

}


Hey @revote - I might still get a better answer, but here is an approach I was just able to validate as workable in our staging environment.  This simple bit of CSS will simply swap the image out:

img>src="https://d3qhpmzl5oynt5.cloudfront.net/2024-07-18-13-25-05-b733e7f227/dist/images/errors/404.png"] {
content: url('https://via.placeholder.com/404'); /* URL of the new image */
}

 

I added this code to our sandbox but your image remains. I replaced the source image url and new image url as well. Any ideas?

 

Hey @revote - I’m going to DM you so I can take a look with you on your sandbox.  :)


And just to close the loop here, the CSS code above worked but we needed to update the URL of the standard 404 image as it wasn’t the same as in the environment I tested.  :)


And just to close the loop here, the CSS code above worked but we needed to update the URL of the standard 404 image as it wasn’t the same as in the environment I tested.  :)

Yeah, I can confirm, works now ok. Thanks @Kenneth R 

I think I was using correct url´s, with sandbox site sandbox url´s 😀


Hmm, it seems that url of the original error image keep changing and that´s why this workaround works only until url the changes. It seems that url changes 1-2 days period.

Any ideas @Kenneth R?

 

EDIT: We can use the error page without error images, if it is easier?


The image `src` attribute value will not necessarily be the same across communities/users.
 

@revote I was able to get the above css idea to work by changing the selector to:
.destination_error_imagegsrc*="404.png"] {   content: url("https://via.placeholder.com/404"); }


And, I’m assuming this should work for the 403:
.destination_error_imageisrc*="403.png"] {   content: url("https://via.placeholder.com/404"); }

Yep, with this solution it doesnt matter even the source url keep changing during the time.

Thanks.


Hey @revote @Kenneth R, can I bug to ask you WHERE you load the CSS to swap out the image. Sorry, basic newbie question! 


Hey @revote @Kenneth R, can I bug to ask you WHERE you load the CSS to swap out the image. Sorry, basic newbie question! 

Here.

Note: Test code in your testing site before adding code to your live community.

 

 


I´ll add this hint to this topic as well. In cases if you want to hide image, not to change it to another:

 

you can set the default 404 and 403 images to not show with this bit of CSS:

.destination_error_imagegsrc*="404.png"],
.destination_error_imagegsrc*="403.png"] {
display: none;
}

 

 


@revote WOHOOOOO It worked. Thanks so much for the guidance!!! 


@revote WOHOOOOO It worked. Thanks so much for the guidance!!! 

Glad to help 👍


Reply