Hi all, I just moved my wordpress to self-host it myself. Everything been smooth less the header image. I am using the theme ChaoticSoul and trying to change the Header image. Have found the path in my Cpanel to the image to be wp-content/theme/chaoticsoul/images/headerimage.jpg. I tried replacing the headerimage with my own image but everytime I save it, it just retains back to the original image. I believe the problem lies in the CSS code somewhat making the image irreplaceable. Can anyone help tell how to rectify this problem? The codes are below. Tnks. <div id="headerimg" class="clearfix"> <div id="header-overlay"> </div> <div id="header-image"><img alt="header image" src="http://website.com/wp-content/themes/chaoticsoul/images/headerimage.jpg" /></div> </div>
First make sure you've cleared your browser cache. Then go directly to the url for the image, make sure it loads properly from your side and do a forced reload on it to be sure. If that doesn't work then it's time to look at the code.
ps: also check the style sheet for the theme and see what's up with any background images being called into the header image div, such as or whatever - the style may be overriding the image tag.
Not sure if you fixed the problem yet, but I'm curious if you tried this: <img src="<?php bloginfo('template_directory'); ?>/images/headerimage.jpg" /> Whether that helps or not, hope you solve your problem! : )
Really thanks for all the reply. Hi Carribbean Catch, I came across these codes. Is there anything I need to change in them? #wrapper { background: url('images/content_bkg.gif') repeat-y top left;} #header-overlay { background: url('images/header_overlay.gif') no-repeat top left; As I said before, I am using Cpanel and going through filemanager to upload my picture. I actually deleted the original imageheader.jpg file and uploaded my picture under the same filename. When I right click on the file and view, it still shows the same original picture. But when I right click and press download/open, it shows the picture I uploaded. When I visited my site after that, it still showed the original picture. Today I open my site and now it shows the picture I uploaded. I don't understand how come it can change in the morning. Also when I see the size of the picture, it is increasing. Initially was about 20kb. I deleted and uploaded my picture and it became 60kb. I deleted the uploaded picture again and reloaded and now it is at 110kb. I believe I am doing something wrong but don't know why. Do advice. Tnks.
Yeah, so there's a header "overlay" in the styles but it doesn't sound like it's affecting your graphic - sounds more like combination of a cached image and image compression. How are you editing your image? How are you saving it? Check the file size of the image before you upload it, it's probably just not properly compressed for the web. Also check the actual diminsions (pixels) to make sure you're not uploaded a larger image that's being resize by the html code. Also make sure you're doing a forced reload when viewing any of it: http://support.wordpress.com/web-browser/#force-refresh
Hi, tnks. The actual size of the image is supposed to be 760px X 151px. The picture I am downloading is slightly larger about 760px X 180px. Does that matter? The size is only a few kb about 20-30. The image is as it is. I didn't edit it. As for saving it, what method should I use? As of now, the image that I uploaded for the third time is up on the site. Though it is correct now, I wish to update this header image now and then. Its going to be a problem as every image I add just keeps increasing the size of that image file (headerimage.jpg) even though I deleted all the previous images. Also the image doesn't immediately appears after I upload it. Tnks.
No uploading new images won't keep increasing the size - servers everywhere would blow up ;^) The slight difference in image size won't matter much in terms of file size and download time, but it makes a slight difference in the quality of how the image is rendered in the browser. If you use an image editor such as Photoshop to resize the image, it does a much better job of resampling the pixels and scaling it down properly. If you upload one that's a little larger instead, then you're leaving it up to the users' browsers to resize the image according to the size specified in the html code - and browsers are all different and don't do as good a job of rendering an html resized image as an image program does because the image program is actually altering the image itself. It's not a huge difference, but it's one of those little things that almost subconsciously makes a difference in the user's sense of quality of the site - it's the little things that add up and make a difference. The images should be saved off for the web - meaning compressed properly - reducing the filesize. Photoshop and other editors have the ability to save images compressed properly for the web. How much you compress images, how much color you decide to leave in it (gif indexing) etc. all an art that required some study to learn properly - jpgs and gifs are different formats, which one you use depends on the type of image, etc. They all are basically intelligent algorithms which attempt to throw out as much information (size) from an image file as possible (called "lossy" because the image actually loses information and it cannot be reversed once it's processed) yet still make the image appear to be of a certain quality according to the way the human eye processes visual information. It's worth looking up some tutorials on the internet for web image processing and how to do it properly - it's one of the things that separates a decent site from the masses of poor quality ones out there... I'm sure the image not appearing immediately after you upload it either has to do with the fact that it really is still uploading in the background or it's just your browser caching the old image until it realizes there's a new one on the server. It's a matter of either getting into the habit of doing forced reloads on images, emptying your browser cache, (or - what I do is temporarily alter my code headers on the web pages so they don't cache anything during development). Browsers normally want to save you download time by grabbing images from your hard drive cache if they already have them. You have to force them to reload sometimes.