Solved

Images not loading vs. server permissions

Posted on 2011-03-02
15
283 Views
Last Modified: 2012-06-21
I’m having serious issues.
I set up WordPress both on a web server and my testing server.

The same code works and loads perfectly on my testing server (I’m running Xampp for Windows 7)
But when I load the same code to the web server, nothing is loading properly. I have triple checked image file paths and code.
Is it possible that there are some write permission errors on the server or in my late night fog, missed something?
I reloaded the images folder and nothing changed, I checked my code, and again, it's the same so any advice is appreciated. I’m embedding some screen shots as the actual site isn't live.

testserverscreen.png
webserverscreen.png
0
Comment
Question by:BluesMama
  • 8
  • 7
15 Comments
 
LVL 6

Expert Comment

by:MatthewP
ID: 35018530
Possibly permissions, a few thoughts: Can you right click the image and open it in a new tab? Presumably the file path it displays in the address bar is correct?

If so can you upload another image via ftp into the same folder and see if that displays? If so set the permissions (chmod) on the images and maybe set the owner of the image files (chown command - Im assuming linux here...)  

If you cant see the one you uploaded check there's no .htaccess file restricting the directory, check also that no url rewriting is happening elsewhere..
0
 

Author Comment

by:BluesMama
ID: 35018585
I'm not able to right click the image file on the web server. When I check on the server there is no .htaccess file I'll check on the url rewriting.
0
 
LVL 6

Expert Comment

by:MatthewP
ID: 35018606
I meant right click it in a browser and open it in a new tab then check the address in the address bar check it is pointing to the right place on the server. It may also give an error message (404 not found, 501 server error for example) which may help pinpoint the problem.
0
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 

Author Comment

by:BluesMama
ID: 35018784
I tried to right click in the browser and nothing happens at the header. At the images that are there they seem to be coming from a root images folder and a images folder within the theme in wordpress.
0
 
LVL 6

Expert Comment

by:MatthewP
ID: 35018812
If the image isn't displaying have you got a red cross icon (internet explorer) at least? Can you not right click this and "open image in new tab" or something?
0
 
LVL 6

Expert Comment

by:MatthewP
ID: 35018817
Or are the images not actually being included in the HTML code for the page? Have you checked the source code? You should be able to see the image paths there as well.
0
 

Author Comment

by:BluesMama
ID: 35018892
I have them in the css  and call them up with div ids and classes
#header>#logo {
	float: left;
	width: 310px;
	background: url('images/see_dekalb_trans.png') no-repeat 0px 0px;
	height: 233px;
	}
  
.logoimg {
  	float: left;
	width: 310px;
	background: url('images/see_dekalb_trans.png') no-repeat 0px 0px;
	height: 233px;
	}

#logosmall{
	float:left;
	background: url('images/see_dekalb_trans_sm.png') no-repeat 0px 0px;
	width: 215px;
	height: 175px;
	margin-top: 10px;
	margin-right: 150px;
	}
#header>#rightbox {
	width:557px;
	float:right;
	padding-top: 5px;
	}
#header>#rightbox_sm {
	float:right;
	padding-top: 5px;
	padding-left: 225px;
        }
#title {
	font-size:26px;
        }
.text {
       padding-left:20px;
       width:360px;
       font-size:14px;
       }
#events {
       padding-top:60px;
       background:url('images/home_bg.png') no-repeat;
       min-height: 165px;
       }

Open in new window

<div id="header">
<div id="logo"></div>
<div id="rightbox">
<p id="title">Shop, Eat, and Enjoy Downtown DeKalb IL<br/>
<p class="text">What's happening in downtown DeKalb Illinois.</p>
<div id="events">
<p><a href="http://www.seedowntowndekalb.com">3/31/2011 - Meet Me Downtown</a></p>
<p><a href="http://www.seedowntowndekalb.com">4/9/2011 - Second City - Egyptian Theatre</a></p>
<p></p>

Open in new window

0
 
LVL 6

Expert Comment

by:MatthewP
ID: 35019399
Oh right backgrounds.

Note your css file is expecting to find the images in a directory called images which iss OFF the directory that the css file itself is in - not relative to the root of the server. Is that how you have it set up?
0
 

Author Comment

by:BluesMama
ID: 35019466
There is a folder within the theme for images and I have a root images folder. The css is calling from the images folder in the theme.
0
 
LVL 6

Expert Comment

by:MatthewP
ID: 35019611
OK and where in the theme folder is the css, is it in theme/css with the images in theme/css/images for example?

Also, is this css included as a css script or is wordpress sucking it into the main html source, this will make a difference too.
0
 

Author Comment

by:BluesMama
ID: 35019710
it's a css script and it's in theme/style.css
0
 
LVL 6

Expert Comment

by:MatthewP
ID: 35019755
OK so the images must be in theme/images. Therefore if you go to yourdomain.com/path_to_wordpress_installation/theme/images/home_bg.png in a web browser is it showing or do you get any error messages?
0
 

Author Comment

by:BluesMama
ID: 35022273
Ok, I ended up doing a reinstall because the web server had issues. The hosting company didn't have write permissions set up for the php files. Now everything views except the facebook and twitter icons.
www.seedowntowndekalb.com
0
 
LVL 6

Accepted Solution

by:
MatthewP earned 500 total points
ID: 35022372
Cool getting somewhere than.

Now I can see the site I can see that the missing images are:

seedowntowndekalb.com/images/twitter-64x64.png
seedowntowndekalb.com/images/facebook-64x64.png

and they are getting ERROR 404 Status - image does not exist. If you put these images into this directory that should be it.
0
 

Author Closing Comment

by:BluesMama
ID: 35022561
I took your advice. I think that paired with the reinstall worked. Thank you for your patience and your time.
0

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to count occurrences of each item in an array.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

803 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question