header image not loading

Hi everyone,

I basically have a page (http://flowerart.uk/index.php?route=pro ... ry&path=20) and on the header it should have an image loading as background, but for some reason, its not appearing. The image is uploaded and visible at (http://flowerart.uk/image/catalog/demo/ ... rallax.jpg)

Pressing F12 on the browser I can see that there is an error "Failed to load resource: the server responded with a status of 404 (Not Found)"

The thing is: I have checked the CSS responsible for loading the image and I can't find the tags related to the DIV. I cant find the path that brings the image to the html. Very strange. I wonder if this image is being loaded by a JavaScript or something similar.

is there any way I could check what is going wrong with my page/css code overall as I have been struggling to find out where the problem is.

I contacted the developer of the theme but he is not replying and my knowledge is limited.

Anyone could give me some ideas of what is wrong with the page?

Thanks in advance

How exactly are you adding this image to your code ?
There is no reference at all to the image in the source code using devtools
other than the 404 error

Re-upload your parallax image - it appears to be in the wrong place
all your images that work OK come from yourdomain/image/catalog/demo/banners/filename.jpg
and some from the cache
your parallax image is coming from
http://yourdomain/OPC190_nursery/OPC08/ ... rallax.jpg

Maybe there is something off with you file layouts
.

Hi Mike,

thanks for your question.

I have no idea also, because I bought the theme. I have access to all files but I can't find how it brings the image. Checking the html/CSS by the F12 of my browser, it looks like that there is a line somewhere in my CSS that brings the image to the page, but when I check the CSS on the server side, I cant find anything. It goes beyond my kwoledge.

I was comparing my page with the example of the developer theme 8 (link below) and the codes seems to be exactly the same.

(https://demo.templatetrip.com/Opencart/ ... ry&path=20)

THanks

The path to the image is wrong.

Its loaded as a background style, however the path is incorrect as you can see below.

sw!tch wrote: ↑

Tue Jan 05, 2021 2:56 am

The path to the image is wrong.

Its loaded as a background style, however the path is incorrect as you can see below.

Code: Select all

<div style="background-image: url('../../OPC190_nursery/OPC08/image/catalog/demo/banners/parallax.jpg'); background-position: 50% 27.1486%;" data-source-url="../../OPC190_nursery/OPC08/image/catalog/demo/banners/parallax.jpg" class="parallex">

I really appreciate your reply. Could you tell me exactly how it should be? I'm not a developer, I have basic knowledge of the things. THANK YOU!

How are you editing the image now? Via source code or a module in the backend?

Switch has it :-)
looks like it is probably selected via a banner module

sw!tch wrote: ↑

Tue Jan 05, 2021 3:02 am

How are you editing the image now? Via source code or a module in the backend?

I am using the Cpanel of the server, editing the files there, but if needed, I use Dreamweaver. Not sure if I am answering your question to be honest.

Yeah I dunno, if its a module it should be proper and build the full path and cache for you. If its hard-coded into the source then you can try something like

../image/catalog/demo/banners/parallax.jpg

If its a paid theme they should help you resolve it.

Your directory structure looks less than optimal.
There are different paths to different directories.
I think that's where the confusion lay

sw!tch wrote: ↑

Tue Jan 05, 2021 3:09 am

Yeah I dunno, if its a module it should be proper and build full path for you. If its hard-coded into the source then you can try something like

../image/catalog/demo/banners/parallax.jpg

If its a paid theme they should help you resolve it.

What would be a module? Maybe I can try to read the codes and find how it works. Is it a block of codes that bring other functions to the page? I found several files with a twig extension? Maybe I could try to read them?

Leave the twig files
How are you adding the image to the page - how did you upload this image
are you selecting the image in an editor ?
Like banner manager

I just had the brilliant idea to open a TWIG file because I was wondering how come there is no html files into this theme and bang!!! I found exactly where the code is.


<!DOCTYPE html>
<!--[if IE]><![endif]-->
<!--[if IE 8 ]><html dir="{{ direction }}" lang="{{ lang }}" class="ie8"><![endif]-->
<!--[if IE 9 ]><html dir="{{ direction }}" lang="{{ lang }}" class="ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html dir="{{ direction }}" lang="{{ lang }}">
<!--<![endif]-->
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>{{ title }}</title>
<base href="{{ base }}" />
{% if description %}
<meta name="description" content="{{ description }}" />
{% endif %}
{% if keywords %}
<meta name="keywords" content="{{ keywords }}" />
{% endif %}
<script src="catalog/view/javascript/jquery/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="catalog/view/javascript/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>

<link href='https://fonts.googleapis.com/css?family ... 00,600,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family ... i,800,800i' rel='stylesheet' type='text/css'>
<link href="catalog/view/javascript/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<!--<link href="catalog/view/theme/{{ theme_path }}/stylesheet/TemplateTrip/bootstrap.min.css" rel="stylesheet" media="screen" />-->

<link href="catalog/view/javascript/jquery/owl-carousel/owl.carousel.css" rel="stylesheet" media="screen" />
<link href="catalog/view/theme/OPC190_08/stylesheet/TemplateTrip/bootstrap.min.css" rel="stylesheet" media="screen" />
<link href="catalog/view/theme/OPC190_08/stylesheet/stylesheet.css" rel="stylesheet">
<link href="catalog/view/theme/OPC190_08/stylesheet/TemplateTrip/ttblogstyle.css" rel="stylesheet" type="text/css" />
<link href="catalog/view/theme/OPC190_08/stylesheet/TemplateTrip/ttcountdown.css" rel="stylesheet" type="text/css" />
<link href="catalog/view/theme/OPC190_08/stylesheet/TemplateTrip/category-feature.css" rel="stylesheet" type="text/css" />
<link href="catalog/view/theme/OPC190_08/stylesheet/TemplateTrip/animate.css" rel="stylesheet" type="text/css" />
<link href="catalog/view/theme/OPC190_08/stylesheet/TemplateTrip/newsletter.css" rel="stylesheet" type="text/css" />
<link href="catalog/view/theme/OPC190_08/stylesheet/TemplateTrip/ttinstafeed.css" rel="stylesheet" type="text/css" />
{% if direction=='rtl' %}
<link href="catalog/view/theme/OPC190_08/stylesheet/TemplateTrip/rtl.css" rel="stylesheet" type="text/css" />
<link href="catalog/view/theme/OPC190_08/stylesheet/TemplateTrip/ttblogstyle-rtl.css" rel="stylesheet" type="text/css" />
<link href="catalog/view/theme/OPC190_08/stylesheet/TemplateTrip/ttcountdown-rtl.css" rel="stylesheet" type="text/css" />
<link href="catalog/view/theme/OPC190_08/stylesheet/TemplateTrip/newsletter-rtl.css" rel="stylesheet" type="text/css" />
{% endif %}
<link href="catalog/view/theme/OPC190_08/stylesheet/TemplateTrip/lightbox.css" rel="stylesheet" type="text/css" />

{% for style in styles %}
<link href="{{ style.href }}" type="text/css" rel="{{ style.rel }}" media="{{ style.media }}" />
{% endfor %}

<script src="catalog/view/javascript/common.js" type="text/javascript"></script>

<!-- TemplateTrip custom Theme JS START -->
<script src="catalog/view/javascript/TemplateTrip/addonScript.js" type="text/javascript"></script>
<script src="catalog/view/javascript/TemplateTrip/ttcountdown.js" type="text/javascript"></script>
<script src="catalog/view/javascript/TemplateTrip/inview.js" type="text/javascript"></script>
<script src="catalog/view/javascript/TemplateTrip/parallex.js" type="text/javascript"></script>
<script src="catalog/view/javascript/TemplateTrip/lightbox-2.6.min.js" type="text/javascript"></script>
<script src="catalog/view/javascript/TemplateTrip/waypoints.min.js" type="text/javascript"></script>
<script src="catalog/view/javascript/jquery/owl-carousel/owl.carousel.min.js" type="text/javascript"></script>
<script src="catalog/view/javascript/TemplateTrip/tt_quickview.js" type="text/javascript"></script>
<script src="catalog/view/javascript/TemplateTrip/bootstrap-notify.min.js" type="text/javascript"></script>
<!-- TemplateTrip custom Theme JS END -->

{% for link in links %}
<link href="{{ link.href }}" rel="{{ link.rel }}" />
{% endfor %}

{% for script in scripts %}
<script src="{{ script }}" type="text/javascript"></script>
{% endfor %}

{% for analytic in analytics %}
{{ analytic }}
{% endfor %}
</head>

<body class="{{ class }}">
<div id="page">
<header>
<!--<nav id="top">
<div class="container">
<div class="header-top-left">
{% if header_left %}
<div class="header-left-cms">
{{ header_left }}
</div>
{% endif %}


</div>

<div class="header-top-right">
<div class="contact-link">
<ul>
<li class="header-phone pull-left">
<a href="{{ contact }}"><i class="fa fa-phone"></i>
<span>{{ telephone }}</span>
</a>
</li>
<li class="header-mail">
<a href="{{ contact }}"><i class="fa fa-envelope"></i>
<span>{{ email }}</span>
</a>
</li>
</ul>
</div>
{% if header_right %}
<div class="header-right-cms">
{{ header_right }}
</div>
{% endif %}
</div>
</div>
</nav>-->
<div class="full-header">

<div class="header-left">
<div id="logo">
{% if logo %}
<a href="{{ home }}"><img src="{{ logo }}" title="{{ name }}" alt="{{ name }}" class="img-responsive" /></a>
{% else %}
<h1><a href="{{ home }}">{{ name }}</a></h1>
{% endif %}
</div>
</div>

<div class="right-block">
<div class="search">{{ search }}</div>
<div class="user-info">
<div class="dropdown"><a href="{{ account }}" title="{{ text_account }}" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i>
<span class="ttuserheading">{{ text_account }}</span><i class="fa fa-caret-down"></i></a>
<ul class="dropdown-menu dropdown-menu-right account-link-toggle">
{% if logged %}
<li><a href="{{ account }}"><i class='fa fa-user'></i> {{ text_account }}</a></li>
<li><a href="{{ order }}"><i class='fa fa-calendar'></i> {{ text_order }}</a></li>
<li><a href="{{ transaction }}"><i class='fa fa-credit-card'></i> {{ text_transaction }}</a></li>
<li><a href="{{ download }}"><i class='fa fa-download'></i> {{ text_download }}</a></li>
<li><a href="{{ logout }}"><i class='fa fa-sign-out'></i> {{ text_logout }}</a></li>
<li><a href="{{ wishlist }}" id="wishlist-total" title="{{ text_wishlist }}"><i class="fa fa-heart"></i> <span class="hidden-sm hidden-md">{{ text_wishlist }}</span></a></li>
<li class="ttlanguage">{{ language }}</li>
<li class="ttcurrency">{{ currency }}</li>
{% else %}
<li><a href="{{ register }}"><i class='fa fa-user'></i> {{ text_register }}</a></li>
<li><a href="{{ login }}"><i class='fa fa-sign-in'></i> {{ text_login }}</a></li>
<li><a href="{{ wishlist }}" id="wishlist-total" title="{{ text_wishlist }}"><i class="fa fa-heart"></i> <span class="hidden-sm hidden-md">{{ text_wishlist }}</span></a></li>
<li class="ttlanguage">{{ language }}</li>
<li class="ttcurrency">{{ currency }}</li>
{% endif %}
</ul>
</div>
</div>
<div class="cart">{{ cart }}</div>
</div>

{% if header_left %}
<div class="header-left-cms">
{{ header_left }}
</div>
{% endif %}

{% if header_top %}
<div class="header-top-cms col-sm-8">
{{ header_top }}
</div>
{% endif %}

</div>
{% if header_bottom %}
<div class="header-bottom">
{{ header_bottom }}
</div>
{% endif %}

</header>
<div class="header-content-title">
<div style="background-image: url('../../OPC190_nursery/OPC08/image/catalog/demo/banners/parallax.jpg'); background-position: 50% 78.1106%;" data-source-url="../../OPC190_nursery/OPC08/image/catalog/demo/banners/parallax.jpg" class="parallex">
</div>
</div>


<script><!--
$(document).ready(function() {
/* ---------------- start Templatetrip link more menu ----------------------*/
var max_link = 3;
var moretext= "{{ text_more }}";
var items = $('.menu-category > ul.dropmenu > li');
var surplus = items.slice(max_link, items.length);
surplus.wrapAll('<li class="dropdown more-menu"><div class="dropdown-menu"><div class="dropdown-inner"><ul class="list-unstyled childs_1 single-dropdown-menu"></ul></div></div></li>');
$('.more-menu').prepend('<a href="#" class="level-top">'+moretext+'</a>');


/* ---------------- End Templatetrip link more menu ----------------------*/
});
--></script>

mikeinterserv wrote: ↑

Tue Jan 05, 2021 3:16 am

Leave the twig files
How are you adding the image to the page - how did you upload this image
are you selecting the image in an editor ?
Like banner manager

The developer told me to upload the image by FTP straight into the directory of the server, and I have done that, nothing changed. Since then, he didnt reply to me now Im here.

That is the template
That image code got INTO that code SOMEHOW - you did not type it in.
HOW did you ADD the image to your page ?

Right I think this is it
The theme ALREADY has code for an image called parallax
so you rename YOUR image to parallax and upload it.

So - just as Switch and myself pointed out, it is in the wrong directory
You have all the information in front of you - just upload it to the correct directory and I am sure it will be fine.

mikeinterserv wrote: ↑

Tue Jan 05, 2021 3:27 am

That is the template
That image code got INTO that code SOMEHOW - you did not type it in.
HOW did you ADD the image to your page ?

Right I think this is it
The theme ALREADY has code for an image called parallax
so you rename YOUR image to parallax and upload it.

So - just as Switch and myself pointed out, it is in the wrong directory
You have all the information in front of you - just upload it to the correct directory and I am sure it will be fine.

I did add the image using Cpanel of my server, I have changed the name of the image to parallax.jpg, I uploaded into the directory that the developer told me, but it still did not work. This is the problem. There is something else wrong. Yes, you are right: the Theme has a code for an image called parallax.

One thing I noticed: I am not 100% of the logic to create the path, I will have to refresh my mind. but not sure if its correct?

The image is located at Path: /opencart/image/catalog/demo/banners

The Twig file is located: Path: /opencart/catalog/view/theme/OPC190_08/template/common

Are these path make sense?


And the twig code that seems to function to bring the image:


</header>
<div class="header-content-title">
<div style="background-image: url('../../OPC190_nursery/OPC08/image/catalog/demo/banners/parallax.jpg'); background-position: 50% 78.1106%;" data-source-url="../../OPC190_nursery/OPC08/image/catalog/demo/banners/parallax.jpg" class="parallex">
</div>
</div>

http://flowerart.uk/index.php?route=pro ... ry&path=20

HOW TO TRANSFER YOU GUYS A MILLION DOLLARS?????

Since then, he didn't reply to me now Im here

Whatever, just please understand, that the 'general' OC Forum Sections
are not the place, to post your Matters, because your Problems are NOT
OpenCart- , but Custom-Theme-related, and therefore only belong into the
'commercial' Forum Sections. And I don't like to move such postings around
every time, just to have them placed in the 'matching' sections. You will still
get some free Support in those Places, as you just found out.

Your Theme Seller would be the only Person in charge, to eventually assist
you for free, but even that has it's limits, if one realizes, that a Buyer has not
the basic Potential, required, in order to play around, trying to change
existing things. And better never use Tools like Dreamweaver, but a
regular Text-Editor, like Notepad++, to manipulate Code Source, or you
will run into other problem too.
Good Luck, you'll need it ...
Ernie

ip-cam he did post it in themes with an s at the end.
indicating NOT just the standard theme. So for most it is in the right place :-)

Site looks nice
hope it goes well