Why do some photos work and some don't?


#1

I am using generic free clip art that I downloaded by right-clicking on web images. I inserted them into my web editor and uploaded them onto my site, but only some of them show up when I view it through my browser, and some come up as little blue boxes with question marks. Is there any reason why some work and some don’t?

Thanks so much!!!


#2

What format are the images? Jpg, gif and png are best. Make sure you upload the actual image and not a link to the image. Some websites block hotlinking.
Silk


#3

That’s the weird thing, they’re all just jpg images from the same stock photo site, downloaded and uploaded exactly the same way.


#4

The most common reason for what you describe is usually a bad link, and the clue is in your statement that you “inserted them into your web editor”. What “web editor” did you use? NVU? Frontpage? Dreamweaver? Another one?

Often, the “WYSIWIG” editors mangle the lilnk, and you will find that some of them are actually linked to files on “your” computer, or to the original “hosting” computer (you can thank Cut N Paste for that confusion) These other sites will often prevent the “hotlinking” of images from their webspace.

If you post the URL to your “broken” page, it will probably be easy enough to tell what happened. Generally speaking, you don’t want to “cut n paste” images into your webeditor; you rather want to save the images to your own computer, then link to them with your editor, uploading everything via FTP to your server.

Post the url, and I’ll take a look. BTW - I strongly advise that you only use images from other sites with proper permission and credt. You did mention that these were “generic” and “free”, so I’m not meaning to lecture, but remember that many “generic” and “free” images still require you to link back to the site that provided them, or in some other way give credit to/for the source of the images ,-).

–rlparker


#5

Thanks so much! My URL is www.birthmattersnyc.com. I’d be grateful if you took a look and could tell what was wrong. I think I did what you said I should–downloaded the images to my desktop, then inserted them to my web editor (Oh, which is NVU).

As you can tell I am a real Luddite, but hoping to catch up soon. Thanks again.


#6

Depending on the settings of your ftp client (ascii, binary, auto, etc), and the client itself (some handle ‘auto’ better than others) you may have managed to get some of the images uploaded in the incorrect mode, which will usually break/bork the images.

In your browser, right-click and check “properties” of the broken image, and you will ususally get the necessary clue (image not found, strange size, etc.).

Again, the easiest way for us to help you with this is to provide the url so we can check it out :slight_smile:
–rlparker


#7

I did! It’s http://www.birthmattersnyc.com.


#8

Oh, and I just had a friend log on and look at it and it doesn’t look anything like what I uploaded, she says it has a different background color and everything, and NO photos at all. This is sooo frustrating.


#9

All of your images were only linked to your desktop it would appear…

img src=“file:///Users/ashacurran/Desktop/1776032.jpg”

Best bet…

  1. Create a folder on your computer, name it BirthMatters or something.
  2. Copy the html page you created, BirthMattersHomePage.index.html into that folder and then rename it to index.htm or index.html…nothing else.
  3. Inside your BirthMatters folder, create a new folder called Images.
  4. Move all of your images into this Images folder.
  5. Insert them again (or fix the links manually) into your index.htm page using your Web editor.
  6. Save your index.htm page.
  7. Upload the index.htm page and the Images folder into your website directory.

You should be all set then. As for a background image, I didn’t see one in your BODY tag of your page…

body style=“color: rgb(68, 34, 68); background-color: rgb(255, 255, 204);” link="#000099" alink="#000099" vlink="#990099"


#10

Also…get rid of that hard link to email: asha@birthmattersnyc.com

Instead just put text like this (as an example):
asha {at} birthmattersnyc {dot} com

Good for stopping SPAM harvesting bots but still easy enough that most people get it…or you might want to consider using a mail to form…a bit more advanced though.


#11

Yep, your problem is a pretty common one. It all has to do with the location of the image files, and the way the image is “linked” in your page.

In NVU, and most other WYSIWYG “webeditors”, when you “select” your image by “clicking”, watch what NVU places in the “text input box” for the graphic/image filename. For instance, on the first “broken” image on your page, the image file is defined as being:

file:///Users/ashacurran/birthmatters/22696523.jpg

Now, this is not where the image “lives” on your webserver, it is where the image lives on your computer. The “dangerous” part is, you will probably see the image just fine: The page loads from the webserver, and then loads the image from your computer, and you will not likely realize that I (or others on the web) can’t see the image at all…it is not “on the web”…your page’s contents are “split” between the webpage on the server, and the image, on your computer. Accordingly, I see no images at all. The matter is further complicated in your case by the fact that the images are stored in different directories on your computer, some of which (I’m guessing you are using XP) are viewable "from the webpage (shared) and others are not - hence you see some images, and others broken (in directories that can’t been “seen” by the webpage on the server).

TO make this all make a little more sense, after you load your page in your browser by going to :
http://www.birthmattersnyc.com/BirthMattersHomePage.index.html

Right-click on any “text” portion of the page, and click “view source”. It will look like “gobbledygook-code” but look for wherever you see the words “<img src=”. You will see the “paths” for the images embedded in that “img src” tag, and see where the differences are (which will make the problem easier to understand, I think)

Since you didn’t name your page “index.html”, or “main.html”, or any of the other “default” pages, I can see the contents of your web space directory, and there are no images there at all, only your single page. You only see images at all because the page can display images that are in the proper “path” in “shared” directories on your computer.

WHat you want to do it as follows:

  1. put all your image file in the same directory on your computer, and copy your .html file into the same directory.

  2. Re-open the file in NVU

  3. Right-click over each image, and change the “image properties” to remove *everything other than the image name and file type - for ex, the above image should show"

22696523.jpg

in the text imput box for the image name.

  1. Repeat this process for each image.

  2. save the file in NVU, making sure the resulting .html file is in the same directory as the image file (I think you said your desktop- then ok, desktop it is.)

  3. upload *alll these files, via ftp, or NVU’s built-in ftp client, to your webspace, keeping them in the same directory on the webserver:

23119452.jpg
56094457.jpg
DVC00333.JPG
22483298.jpg
22696523.jpg
BirthMattersHomePage.index.html

Having done all of that, your page will display as intended.

Going forward, you may want to keep all you images in a seperate directory of your webspace, and if you do, you will them preceed the name of the image with “directoryname/”, for example, if you store all your images in a direcory called “images”, you would enter “images/23119452.jpg” for the name of the first picture indicated above. I suggest you also take the time to read through the NVU “help” on linking imagesm now that you have read this; it should make better sense given the additional explanations I have provided.

This is the quick and dirty version, and you can easily fin great tutorials on the net by “googling” for “linking images in html”, or similar.

You will find the whole process much easier, if you “mirror” a folder structure on you computer that is the same as the structure you establish on your web server.

Hope this helps a bit!

–rlparker


#12

When you use NVU to create your your html page as normal with images from your own harddisk etc make sure you save the page first to your hard disk using the normal ‘save/saveas’ functions before you publish your web site.

Then when you publish make sure that when the ‘Publish Page’ box opens that you have ticked the box ‘include images and other files’ adding a location directory for images if you have/want one. This will ensure the images are uploaded from your local PC to the remote website at DreamHost.

Now because you have already saved your page locally NVU will change all the image source settings from file:// to the correct location for your website when you publish. But the main thing is to save locally first else NVU will not convert the image source entries in your html.


Norm


#13

Thanks so much for all your help. I did just what you guys told me to do–created a folder with an “Images” folder within it on my hard drive; saved all the jpegs to that folder, then re-inserted them into my NVU web editor; then uploaded them all to my web-based FTP. They’re all there, in my directory. I also changed the name of my home page to just plain index.html. And I’m making sure to save the NVU file before I upload it to FTP.

And yet, still, the photos are not showing up. I’m taking rlparker’s advice and googling for tutorials, but unfortunately nothing is as clear as the advice you folks have already given me!


#14

Gemini,

I’ve looked at the newest version of your page and it looks like you are almost there! Now your problems is that you do not have an “Images” folder (beneath your “main” directory, yet that is where you have linked the images files to be deisplayed from.

You can see this for yourself if you view the “properties” of any of the undisplayed images within your browser (right-click on an image, select “view properties”). This shows you that the image is expected to be found in “http://www.birthmattersnyc.com/Images/”, but when you try to go to that url, you will see it is “not found”.

This is probably the unintended result of us giving you similar, but slightly different advice. I suggested you just put all the files the same folder, initially, to avoid this problem, and dontpanic suggested storing them in their own directory, named “images”. Dontpanic’s way is actually better, but can be a little more confusing for novices. Either way, you have to make sure the “links” point to where the images files actually are present.

To make the images show up properly, for the code you now have on your page:

  1. make sure you place all the image files in a directory named “Images” (Case Is ImPortAnt!)

  2. Make sure that the “Images” directory is created in, or beneath, your “main web” directory (on your server, it is most likely named “birthmattersnyc.com” on DH (though some older system will have that directory named as “public_html”.

When you have it right, using your FTP program,you should see only “index.html” and “Images” in your “web home” directory, if you descend into the “Images” directory, you will see all your individual image file names. If they are not there, just FTP them into that directory (and delete them from wherever else you had them - grin), and you will be good to go.

–rlparker


#15

Your images should be in your ‘Images’ folder according to your index.html file. Just make sure that in your website root on DreamHost that the images are in a folder called ‘Images’ and not ‘images’ since case matters.

I’ve looked and can find no images folder under your root directory so double check that you have indeed created the folder in the correct place and is under birthmattersnyc.com

So that when you first ftp to your site you need to click on birthmattersnyc.com and create an ‘images’ folder there where you can place your images. Then in your HTML you can put …src=“images/imagefilename.jpg” .

You need to change this entry as well:-
src=“file:///Users/ashacurran/Pictures/iPhoto Library/2005/02/02/DVC00333.JPG”

A lot of people have trouble with the publish settings for NVU. With DreamHost you need to ensure you have the FTP location correct under ‘settings’ as:-
ftp://ftp.servername.dreamhost.com/example.com/
or
ftp://ftp.birthmattersnyc.com/birthmattersnyc.com/

in your case.

Then under ‘publish’ you would just put ‘images’ (without the quotes) under the option for the folder for your images.


Norm


#16

Thank you, thank you, thank you!!! I think I finally got it. If you look, are they there? www.birthmattersnyc.com

Thanks so much for all this help, you guys are really, really great. If I can ever give you any, um, birth or breastfeeding advice, let me know :-).


#17

Congratulations! You got it figured out, all the images display just fine for me. I’m glad you were able to get it to work.

(Big Smile to you!)
–rlparker


#18

One small remaining suggestion:

You probably want to change the “Title” of your page (What shows up at the top of the browser window), which currently reads “BirthMatterHomePage3.index.html”, to something else.

You can do this by editing the source code (select the “source” tab at the bottom of the NVU screen window) and changing the text between the and tags near the top of the page, OR , using the WYSIWIG “normal” tab of NVU, pulling down the “Format” menu and selecting “Page Title and Properties” at the bottom of the drop-down menu.

Regards,
–rlparker


#19

Come on then let us see a few more pages added before the night is out. :slight_smile:


Norm


#20

thanks for the tip, I will definitely change the title.

And Norm: HAH! Look for my next posting asking how the hell I go about creating page #2 ;-).