Support » Themes and Templates » How does one target images in a subdirectory of the theme’s root?

  • i.e., ~/my_theme/images/photo.jpg

    I want to embed photo.jpg directly into my template, let’s say index.php. If I reference photo.jpg in the style.css it works fine. But if I try using the <img> tag it does not work.

    I’ve tried several different template tags to form the qualified path but nothing seems to work.

    I’m using WP 2.7.1.

    Please help.

Viewing 10 replies - 1 through 10 (of 10 total)
  • Have you tried the following?

    <img src="<?php echo bloginfo( 'template_directory' ) . 'images/photo.jpg'; ?>">

    Ooops, you will likely need to make that /images/photo.jpg in the code (I missed the first backslash). Sorry!

    You should only need…



    The extra backslash will work from the server or wordpress root, not the theme root…

    For example / would be your index…

    Check your stylesheet, you can see lots of examples where this folder is referenced for background images…. and they don’t use a backslash..

    Of couse i could be wrong, and you may need the bloginfo(‘template_directory’) path…

    The ~ character is a *NIX alias for a user’s home directory. I don’t think it means anything in HTML.

    t31os is right about the leading slash in general. That causes the server to start looking in the root directory where wp-config.php is kept. That isn’t what you want unless you want to write out the full path to the file– /wp-content/mytheme/images/photo.jpg— which maybe isn’t a bad idea actually. bloginfo('template_directory'), as already mentioned, saves you some writing at the cost of a function call.

    But, avanimisra is right about the slash when using bloginfo('template_directory'). bloginfo('template_directory') doesn’t spit out a trailing slash so you have to add one or you’ll end up with directories crammed together– ‘mythemeimages/photo.jpg’ rather than ‘mytheme/images/photo.jpg’.

    bernk, if none of this solves the problem, post the full path to your image and the full path(s) to the files that are trying to include the image.

    Oops, should have checked back in here sooner! I did indeed find that bloginfo(‘template_directory’) works. There are some depricated tags though, so it makes a it a bit confusing when you find older sollutions on other sites…

    Thanks anyway for all the replies!

    @t31os: I don’t think a relative path works in this case because of how WP includes your template files. I think.
    even though to your index.php file your images folder is in the same place, when you target an image in that folder using something like images/myphoto.jpg it won’t work.

    By the way, is this all I need to do in order to successfully embed Flash? Or are there some other things I need to be aware of?

    I’m a total noob to WP, but I know my way around PHP ok.

    I think the relative url weirdness actually has more to do with permalinks and mod_rewrite than with the way WP includes files.

    Well, evidently they should both work (I mean, absolute or relative links), but if you are running into issues with relative links (which I presumed from the initial post), generating the full path should work with near certainty. But yes, the relative links should usually work, and I’m usually puzzled when they don’t 🙂

    Glad you got it fixed, though… I’m not sure about the flash inclusion; pingback if you run into any issues!

    Relative links do work if you start the path at the root directory, as the codex page posted by avanimisra explains. This is weird behavior for a relative link. ‘mypage.php’ in ‘themes/mytheme’ can access an image in ‘themes/mytheme/images’ via the relative url ‘/wp-content/themes/mytheme/images/image.jpg’ but not via the relative url ‘images/image.jpg’. That is the snag.

    I think that has something to do with where the file is being called from – the theme index file, for instance, is called by the index file (or some file) in the wp root, so if the links have to be relative, they should be relative from the wp root, because from the servers’ point of view, the “current directory” is still the directory in which the file that it is reading is residing, which is clearly not the themes’ index file (considering you visit a blog at, and not…

    I could be mistaken, of course. 😐

    And by the way, you could call me Avani 🙂


    I think you are probably right, in contrast to an earlier comment, but it doesn’t surprise me that this behavior confuses people.

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘How does one target images in a subdirectory of the theme’s root?’ is closed to new replies.