I'm building a custom wordpress theme.So I have my Theme folder with the following files/folders:
header.php
index.php
footer.php
style.css
/images
picture-1.jpg
My problem is that I can't display correctly images using img TAG either in index.php,header.php and footer.php:
[..]
<div class="module">
<h4>General info</h4>
<img src="images/picture-1.jpg"/>
[..]
Images are existing and are displaying correctly if referenced by style.css :
.banner{
background-image:url(images/picture-1.jpg);
}
Do I miss something?
thanks
Luca
It's because your files aren't in /images relative to the page you're viewing, they're in wp-content/themes/[yourthemename]/images.
You can get round this by setting a base URL to the root of your site in the head section of your site and linking images as shown above or by using something like this:
<img src="<?php bloginfo('template_directory'); ?>/images/picture-1.jpg" alt="alt text" />
Try this:
<img src="<?php echo get_template_directory_uri();?>/images/img-9.png"/>
Related
I'm doing a test for a job and I already have a folder with some images and a HTML & CSS already done. They just want me to put this in Wordpress.
How can I display this images that I have into the HTML or functions?
Ex:
<div class="container container-nav w-container"><img src="images/Logo_Trust_White.png" alt="">
This is what i have in my HTML file. Can I use "wp_get_attachment_image('imagename');"?
Thank you already!
If you want to display the image file located within your theme directory, just specify the location with the img tag, and style it with CSS.
<img src="<?php echo get_template_directory_uri() . '/images/Logo_Trust_White.png'; ?>" />
Reference : https://developer.wordpress.org/themes/functionality/media/images/
The function wp_get_attachment_image only gets an image that was uploaded to wordpress, it doesn't output an image in the content of the post.
You have to output the content of the post for your example image.
Like: echo $attachments['post_content'];
you're passing in the post id (54 in your example; typically $post->ID in WP parlance) to wp_get_attachment_image(). As can be seen in the codex, you're supposed to use the attachment id (see $attachment_id below):
wp_get_attachment_image( $attachment_id, $size, $icon );
In other words, you've got to do something like this:
$image_attr = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'medium');
In general I would avoid using theme specific images in the content,
because when you change and delete the old theme, then they are gone.
So I would consider using /wp-content/uploads/ for content images.
What is a Custom Logo?
Using a custom logo allows site owners to upload an image for their website, which can be placed at the top of their website. It can be uploaded from Appearance > Header, in your admin panel. The custom logo support should be added first to your theme using add_theme_support(), and then be called in your theme using the_custom_logo(). A custom logo is optional, but theme authors should use this function if they include a logo to their theme.
https://developer.wordpress.org/themes/functionality/custom-logo/
Replace your img tag with
<img src="<?php echo get_template_directory_uri(); ?>/images/Logo_Trust_White.png" alt="">
Place your images folder in the wp-content folder
Using get_template_directory_uri() to link a static image with its correct path in html :
<img src="<?php echo get_template_directory_uri(); ?>/images/logo.png" width="" height="" alt="" />
Place you images in your active theme. Path will be wp-content/themes/{theme-name}.
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 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'm building my first WP theme. My images are linked this way:
<img src="<?php bloginfo('wp-content/themes/SRPrint'); ?>images/freephone.png" />
Obviously theme folder called SRPrint and inside it there is an images folder.
Can't understand why images do not show up? I don't know any php so I asume problem is in php code? Images specified through style.css show up ok.
Please help.
Link to test site http://www.designstest.co.uk/
you must use <?php bloginfo('template_directory'); ?>/images/freephone.png to get the images in the current theme.
See: bloginfo
<img src="<?php bloginfo('template_url'); ?>/images/logo.jpg" alt="<?php bloginfo('name'); ?>">
Change all image to src="
<?php echo get_template_directory_uri();?>
/images/picname.jpg"
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.