Image In Page Not Found ''404 Tpl''?

[defreytas]

Hi,

I want to place an image in the ''page not found'' page, how is this possible?

[tdr170]

In your themes directory you will find the 404.tpl file here you will see the default image code    

<img src="{$img_dir}/img-404.jpg" alt="{l s='Page not found'}" />.

 

In the themes folder you will also find an img folder, inside here you will find the img-404.jpg you can replace this with an image of your choice just name it the same and overwright the original.

You could also load an image to the themes img folder say 404default.jpg then change the name in the code like this  

<img src="{$img_dir}/404default.jpg" alt="{l s='Page not found'}" />

 

If you want to add an addition image add another image code line like below, if you need to add some space between the images add <br /> between the image code lines,add as many as needed to create the space you want.

 

<img src="{$img_dir}/img-404.jpg" alt="{l s='Page not found'}" />

<br />

<img src="{$img_dir}/404default.jpg" alt="{l s='Page not found'}" />

[defreytas]

Hi,

Thanks for the fast reply, However in my tpl file isn't any code that refers to the 404 jpg image.

Also there isn't any 404 image within my ''img'' folder at the template default location.

 

This is a picture of the tpl file (websitename.nl/themes/default-bootstrap).

Wich code can i put where to refer to the image if i put it in the: ''www.websitename.nl/themes/default/img'' folder?


 

Edited March 18, 2016 by defreytas (see edit history)

[tdr170]

OK I see the issue I looked at an older 1.6 version and the image line was there here is the code.

You can move the the image code to other places in the file to get your desired location:

 

This code:

<div class="img-404">
    <img src="{$img_dir}/img-404.jpg" alt="{l s='Page not found'}" />
</div>

<div class="pagenotfound">
	<div class="img-404">
    	<img src="{$img_dir}/img-404.jpg" alt="{l s='Page not found'}" />
    </div>
	<h1>{l s='This page is not available'}</h1>

	<p>
		{l s='We\'re sorry, but the Web address you\'ve entered is no longer available.'}
	</p>

	<h3>{l s='To find a product, please type its name in the field below.'}</h3>
	<form action="{$link->getPageLink('search')|escape:'html':'UTF-8'}" method="post" class="std">
		<fieldset>
			<div>
				<label for="search_query">{l s='Search our product catalog:'}</label>
				<input id="search_query" name="search_query" type="text" class="form-control grey" />
                <button type="submit" name="Submit" value="OK" class="btn btn-default button button-small"><span>{l s='Ok'}</span></button>
			</div>
		</fieldset>
	</form>

	<div class="buttons"><a class="btn btn-default button button-medium" href="{$base_dir}" title="{l s='Home'}"><span><i class="icon-chevron-left left"></i>{l s='Home page'}</span></a></div>
</div>

Edited March 18, 2016 by tdr170 (see edit history)

[defreytas]

I am using the latest 1.6 version,

Just uploaded the ''img-404'' file in the img map.
Then I copied and pasted the code you put above but the image just doesn't show up.
Maybe need to edit something in the CSS file?

[endriu107]

After change in tpl file you supposed to go to Advanced Parameters > Performance > check Force compilation and Clear cache.

Edited March 19, 2016 by endriu107 (see edit history)

[defreytas]

Yes thanks so much!!! that did the job   
It's showing my custom image.