I'm trying to load an image using bloginfo('template_directory')
My code:
<img class="img-fluid" style="max-height: 500px" src="<?php bloginfo('template_directory'); ?>/assets/home-image.png" />
The assets folder is inside my theme folder.
It works perfectly in my localhost.
But when I upload the code to my server I doesn't show the image.
When I inspect the element, here what it shows:
<img class="img-fluid" style="max-height: 500px" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="https://www.mywebsite.com/wp-content/themes/mytheme/assets/home-image.png">
Any guess?
Okay. I figured out that WP Rocket plugin was the problem. I had to disable the cache for imagens into the settings of that plugin.
Related
I'm creating a new WordPress Theme and I want a media folder to contain some images that are not considered to be posts.
e.g. themes/theme-name/media/sampleIMG.jpg
adding
<img src="media/sampleIMG.jpg">
in my theme folders index.php leads to an 404 error code output because apparently my local apache server is requesting that file from a different directory:
/html/media/sampleIMG.jpg
What am I doing wrong?
<img src="<?php echo get_stylesheet_directory_uri();?>/assets/images/logo.svg" alt="" class="svg logo">
Using get_template_directory_uri() to link a static image with its correct path in html :
<img src="<?php echo get_template_directory_uri(); ?>/media/sampleIMG.jpg" alt="theme logo" />
Note: get_template_directory_uri() return absolute path to the
directory of the current theme.
I started to learn Wordpress and I'm making my own theme. Within the design I have some images that are supposed to show up... but they don't.
I was using this code:
<div class="col-xs-4">
<img src="images/html_brand.jpg" class="img-responsive">
</div>
and then I found I should use php to link to my image:
<div class="col-xs-4">
<a href="#">
<img src="<?php bloginfo('stylesheet_directory'); ?>html_brand.jpg"
class="img-responsive">
</a>
</div>
But the problem is, the image still doesn't get displayed. And yes I did upload them to my web server. I have them in the directory of my theme: mythemename/images/html_brand.jpg
If you use bloginfo() to output your theme path, you need to add another /, followed by the remaining path to your image. Based on where you've placed your image, this should work:
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/html_brand.jpg" class="img-responsive">
However, bloginfo() ultimately relies on get_template_directory_uri() to work, so you might as well just use that:
<img src="<?php echo get_template_directory_uri(); ?>/images/html_brand.jpg" class="img-responsive">
Slight Correction:
bloginfo() with the specific argument of stylesheet_directory actually relies on get_stylesheet_directory_uri() to function -- get_template_directory_uri() like I originally said.
https://core.trac.wordpress.org/browser/tags/3.4.2/wp-includes/general-template.php#L439
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
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
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.
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.
You can also use:
<img src="<?php bloginfo('template_url'); ?>/images/yourimage.jpg">
I have been seriously been looking at this forever! I'm going out of my mind And can't figure out why my images are not displaying in my custom made footer.
I have firefox with firebug and it is simply saying that the url is failing to load. so I copy and pasted a url to an image that is currently working and is being shown via the background property in CSS just fine. (thats the top one that says dakota jones). copy and pasting the exact img src proves it still not to work.
my folder is images. My functions.php is right outside. the hierarchy is correct. what the heck?? The testing text in the p tags work just fine. uhuhuhu
Somebody help me! I'm using wp and genesis theme.
add_action('genesis_before_footer', 'include_sponsors');
function include_sponsors() { ?>
<div class="sponsors">
<p>This is testing text</p>
<img src="images/dakotajonesheader3.jpg" alt="Smiley face" height="42" width="42" />
<img src="images/tfobw.png" />
<img src="images/basskingbw.png" />
<img src="images/bighawgbw.png" />
<img src="images/kbw.png" />
<img src="images/mccoybw.png" />
<img src="images/nfcbwpng" />
<img src="images/rayjusbw.png" />
<img src="images/rrbw.png" />
</div>
<?php }
Use WordPress' inbuilt function:
<?php
bloginfo('template_directory'); ?>/images/dakotajonesheader3.jpg
?>
.. which will reference /wp-content/themes/your-theme/images/dakotajonesheader3.jpg
Wordpress dynamically rewrites URLs, so the URL you use to access a page is not the same as the path to the scripts that are running on the server. So you might request your page with example.com/Home. But your images are not stored in example.com/Home/images, which is where you're telling your browser to look. They're stored in example.com/wordpress/wp-content/themes/your_theme/images. So you have to give the absolute path to the images to the browser in your <img> tags.
Carson is correct, and you can use absolute paths to your images. Alternatively, if you want to avoid using absolute paths, you can call your images using bloginfo('template_directory');
For example:
<img src="<?php bloginfo('template_directory'); ?>/images/dakotajonesheader3.jpg" alt="Smiley face" height="42" width="42" />
This question already has an answer here:
How can I get the image url in WordPress?
(1 answer)
Closed 2 years ago.
I am developing a theme for wordpress. And I have many images in 'images' folder. But when I take the page in browser it is not comming.
My code is
index.php
<ul>
<li><img src="images/mindset.jpg" width="145" height="32" /></li>
Is there any function for getting the image path in wordpress ?
src="<?php echo base_url()?>your_theme_dir/image_dir/img.ext"
As well
src="<?php bloginfo('template_url'); ?>/image_dir/img.ext"
get_template_directory_uri();
This function will help you retrieve theme directory URI, and can be used with your images, your example below:
<img src="<?php echo get_template_directory_uri(); ?>/images/mindset.jpg" />
I had to use Stylesheet directory to work for me.
<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/image.png">
You need to use
<?php bloginfo('template_directory'); ?>
It returns the directory of the current WordPress theme.
Now for example, if your theme has some image named example.jpg inside some folder name subfolder folder in the images folder.
themes
|-> your theme
|-> images
|->subfolder
|-> examples.jpg
You access it like this
<img class="article-image" src="<?php bloginfo('template_directory'); ?> /images/subfolder/example.jpg" border="0" alt="">
src="<?php bloginfo('template_url'); ?>/image_dir/img.ext" worked for me for wordpress 3.6 i used it to get header logo using as
<img src="<?php bloginfo('template_url'); ?>/images/logo.jpg">
If you are developing a child theme you can use:
<img src="<?php echo get_template_directory_uri(); ?>-child/images/example.png" />
get_template_directory_uri() will return url to your currently active theme (parent theme), then you add -child/, then add path to your image (the example above assumes your image is at <child-theme-directory>/images/example.png)
I strongly recommend the following:
<img src="<?php echo get_stylesheet_directory_uri(); ?>/img-folder/your_image.jpg">
It works for almost any file you want to add to your wordpress project, be it image or CSS.
If your img folder is inside your theme folder, just follow the example below:
<img src="<?php echo get_theme_file_uri(); ?>/img/yourimagename.jpg" class="story-img" alt="your alt text">
You asked of Function but there is an easier way too. When you will upload the image, copy it's URL which is at the top right part of the window (View Screenshot) and paste it in the src='[link you copied]'. Hope this will help if someone is looking for similar problem.