Grow your CSS skills. Land your dream job.

i can’t get images to work [Solved]

  • # September 29, 2008 at 4:46 pm

    I’ve been working through Chris’s tutorials on WordPress, as you’ll see from the site http://www.whatkindareyou.com, but I can’t get the img tag to work. In the beginning, I thought it might be the fact that it was an anchor link, but that doesn’t seem to be the case either.

    I know it sounds like a complete noob question, and I’ll live with that mantle but I just need other eyes looking at it.

    Quote:
    <img src="/images/benefit_banner.png">

    That should be the left side bar image. I know that the link should be right, because I can get the image to show up as a background image css, but I can’t get the images to show from the html side.

    Thanks in advance everyone.

    # September 29, 2008 at 6:58 pm

    Hi!

    I’m not sure what it could be but it should have a closing backslash ” and an alt property:

    Quote:
    <img src="/images/benefit_banner.png" alt="benefit banner" />

    Depends on your DOCTYPE but this might be the cause.

    Let me know what you come up with!

    Whaleo :)

    # September 29, 2008 at 7:26 pm

    Whaleo, thanks for the response. I had an alt tag, but it was the only thing showing up. I’ve put it back in, as you can see… still the only thing you can see.

    I don’t know a whole lot about doctype. Shouldn’t that have been covered by wordpress?

    box
    # September 29, 2008 at 8:21 pm

    As far as I can see, the image, http://www.whatkindareyou.com/images/benefit_banner.png doesn’t exist – so check your spelling and location of the image you are trying to show.

    # September 29, 2008 at 8:29 pm

    I agree with box. When you go to view the image in FF you get a 404 error indicating it can’t be found. You most likely FTP’d the image with a different name. Either that, or take out the opening forward slash in your relative url. ie the url would be "images/benefit_banner.png".

    # September 29, 2008 at 8:49 pm

    I saw that too, I’ve been playing with this for days.

    Here’s the thing. I tried to remove the slash, no go, but here’s the other thing. If you check the site again, the image is there. It’s set as a background image though in css.

    code is this:

    Quote:
    #event-banner {width: 190px; height: 500px; background: url(images/benefit_banner.png) ; border: 1px solid black;}

    Doesn’t that mean it has to be in the right place?

    # September 29, 2008 at 10:01 pm

    sometimes when you are doing image work with php. You have to alter you path alittle. try doing something like this

    <img src="../images/your image_name_here" alt="a description" />

    if that doesn’t work add another ../ to your path like this

    <img src="../../images/your_image_here" alt="a description" />

    if that doesn’t work, do it again

    <img src="../../../images/your_image_here" alt="a description" />

    The idea is that the ../ stands for levels in your file structure. where the first ../ could mean your domain.com/images/

    so if your file is in the images folder in a named folder that is inside a theme folder then you would need ../../../ that’s three levels. The only other thing you can do is a direct path to the image. <img src="http://www.your_domain.com/themes/your theme/images/image name here" alt="some description" />

    # September 29, 2008 at 11:22 pm

    Thanks, cybershot. That did it. It turns out that I have multiple domains hosted on this server. I didn’t realize that, when I signed up, it would cause that type of confusion otherwise, I’d have made this site the main one.

    Take care guys. Thanks so much for all the suggestions.

    # September 29, 2008 at 11:23 pm

    If this is an image you want shown in your WordPress theme you can easily have it should but you need to have a direct path to it if your storing it in your themes images folder. So your img url would be:

    Code:
Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".