How to correctly use get_template_directory_uri() WordPress function to load an image that is in a subfolder of my theme?

I am pretty new in WordPress and I have the following doubt about how to insert in my homepage an immage that is in a subfolder into my theme directory.

So I have the following situation: Into my custom theme directory I have the following folder that contains a jpg immage: /assets/img/flexslider/flex-1.jpg

Read More

Now in my header.php file I have something like this:

   <li>
       <img src="assets/img/flexslider/flex-1.jpg">
       <div class="flex-caption">
           <p class="flex-caption-text">
               <span>Lorem ipsum</span><br>
               <span>sit dolor</span><br>
               <span>adipiscing elitur</span>
           </p>
       </div>
   </li>

Obviously, when I load the page, the immage flex-1.jpg is not loaded because there is not the right path (infact using FireBug I obtain that it try to load the assets/img/flexslider/flex-1.jpg immage) so I think that I could use the absolute path but this is pretty orrible !!!

So I am thinking to use the get_template_directory_uri() function provided from WP to do this and I have try to change the previous code in this way:

   <li>
       <img src=<?php get_template_directory_uri().'/assets/img/flexslider/flex-1.jpg' ?>>
       <div class="flex-caption">
           <p class="flex-caption-text">
               <span>Lorem ipsum</span><br>
               <span>sit dolor</span><br>
               <span>adipiscing elitur</span>
           </p>
       </div>

But don’t work and using FireBug I can see that load nothing, infact in my brower source code I have:

<img src="">

Why don’t work? What am I missing?

Tnx

Andrea

Related posts

Leave a Reply

3 comments

  1. I hope it will work:

    <img src="<?php echo get_template_directory_uri(); ?>/assets/img/flexslider/flex-1.jpg" />
    

    If your assets folder inside theme.

  2. please try :

    <img src="<?php print(get_template_directory_uri()); ?>/assets/img/flexslider/flex-1.jpg" />
    

    just check for slash, if double before “assests”, remove static one.