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
Related
I have one template & i used base_url() to load the logo. In source the path can be accessible but the logo is not loading into the webpage ?
<a href="index.html" class="logo">
<img src="<?php echo base_url('assets/frontend/img/logos/logo.png'); ?>" alt="logo">
</a>
When i use without logo class its working
<img src="<?php echo base_url('assets/frontend/img/logos/logo.png'); ?>" alt="logo">
How i can load the logo within logo class ?
I have the following html code that tried to place in my WordPress page.
html:
<div class="hovereffect">
<img src="<?php echo get_template_directory_uri() ?>phone.jpg" >
<div class="overlay">
<h2>Hover effect 9</h2>
<a class="info" href="#">link here</a>
</div>
</div>
At the moment everything is in the site except the image that does not show.
How can I use this code WordPress in a way that it can display the image?
I think you forget to tell which place it should get the images from. And you are also forgetting a semicolon after the get_template_directory_uri();.
This is an example, but here i'm telling which folder to get the image from:
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/your_image.jpg">
you can do that but it is not a good practice to paste this code as it is in WordPress editor,
upload this image in media and get link of that image
Edit page, select text mode from top right corner of your editor and paste code these i.e
<div class="hovereffect">
<img src="http://example.com/wp-content/uploads/2016/07/img.png" >
<div class="overlay">
<h2>Hover effect 9</h2>
<a class="info" href="#">link here</a>
</div>
</div>
Here is good practice create a template for that page and write there your code.
Image replace with feature image
Heading with page title.
Detail with page content
link with page permalink.
Not enough reputation to leave a comment so I will leave this as an answer instead.
Assuming phone.jpg is at the root of your theme, you're forgetting the / (slash) before phone.jpg.
It should be
<img src="<?php echo get_template_directory_uri(); ?>/phone.jpg" >
PHP won't get parsed inside a page. Just upload the image to the WordPress media library and link to it directly.
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.