WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] How to reference image in template file (6 posts)

  1. tmptplayer
    Member
    Posted 6 years ago #

    Hey All,

    I'm trying to add an image to a template file (the header), but I'm just getting the alternate text. My header text file looks like:

    <img class="left" src="/images/indians.gif" height="100px" alt="Indians Logo" />

    Do I need to hard code in the full path, or is there a way to use a relative path here? The image is stored in the images folder, under the name indians.gif

    Thanks!

    -B

  2. Kafkaesqui

    Posted 6 years ago #

    Path to the image:

    /images/indians.gif

    So, there is an images/ directory right off the root directory of your site (/), with that image in it?

  3. Sridhar Katakam
    Member
    Posted 6 years ago #

    Place the image in your theme's images directory and use this:

    <img class="left" src="<?php bloginfo('template_url'); ?>/images/indians.gif" alt="Indians" height="100px"/>

  4. tmptplayer
    Member
    Posted 6 years ago #

    Thanks! That worked great. But now the title of my site just went invisible. Any ideas? This is the header file info:

    <div id="header"><div class="title">
    
    	<img class="left" src="<?php bloginfo('template_url'); ?>/images/indians.gif" alt="Indians Logo" height="100px"/>
    			<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
    			<h4><?php bloginfo('description'); ?></h4>
    
    		</div>

    This is based off the networker-10 theme. I'm not much of a php person, so if I'm doing something obviously stupid here and you can point it out quickly I'd appreciate it, otherwise I'll dig more to find the solution. If you want to see what this looks like: http://www.dawgpounddiaspora.com/blog Thanks!

  5. Sridhar Katakam
    Member
    Posted 6 years ago #

    Resize indians.gif to 100x100. Place it in your theme's images directory.

    Then edit style.css like so:

    #header{

    background: #003380 url('images/indians.gif') no-repeat 500px 50%;
    }

  6. tmptplayer
    Member
    Posted 6 years ago #

    Thanks! I don't exactly understand why this works (and the other way didn't), but I guess that means I need to read more. I also played around with it, and found that creating a table in the header, and putting the title and picture in separate cells also works.

Topic Closed

This topic has been closed to new replies.

About this Topic