Alright, I have a file named slider.php which contains a bootstrap slider and I'm inserting pictures inside the slider but I can't figure out the correct way of writing the path to the pictures
<div class="carousel-inner">
<div class="item active">
<img class="slide-image" src="" alt="">
</div>
<div class="item">
<img class="slide-image" src="" alt="">
</div>
<div class="item">
<img class="slide-image" src="" alt="">
</div>
The slider.php is in this location ecomcopy/resources/front/slider.php
and the pictures are in ecomcopy/resources/img/
I tried everything and I can't get the correct pictures path
Can someone help?
The way paths work is to go "up" to parent folders until you're at a common ancestor. Then go back down naming folders until you get to the file you're referencing.
ecomcopy/resources/front/slider.php
ecomcopy/resources/front/ (start)
ecomcopy/resources/ (up 1) ../
ecomcopy/resources/templates/ (down to folder) templates/
ecomcopy/resources/templates/img/ (down to folder) img/
ecomcopy/resources/templates/img/yourimage.png
(down to file) yourimage.png
result: ../templates/img/yourimage.png
should be ../../img/image_name.png
It would be much easier (at least on a live server setting) to just specify absolute paths for your URLs.
For example, the following HTML is all that is needed to serve your images:
<img src="/ecomcopy/resources/templates/img/yourimage.png" />
There is no real need to worry about complicated relative file paths.
Related
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 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 like to include an image from the web root directory(www). In the HTML I am using the following code:
<img src="images/logo.png" alt="logo" />
But the above code is looking for the image from current directory and then images/logo.png
I do not want to include absolute path on my html code. Is there any easy method to do it?
You can use paths relative to the web root by starting with a slash.
<img src="/images/logo.png" alt="logo" />
As you've found, starting without a slash is relative to the current document.
<img src="../../../images/logo.png" alt="logo" />
try like this. each ".." will used to go parent directory
<img src="/images/logo.png" alt="logo" />
You have to mention in this manner. The reason is when u mention the path without slash like this
`<img src="images/logo.png" alt="logo" />`
It will consider it as the path from the root. But you are not actually providing the full path. The procedure to start without slash is
<img src="c:/wamp/www/{proj name}/images/logo.png" alt="logo" />
So better go for the first one by starting with "/"
How to include the image from the relative Directory to a root Directory in php
I have a site done in PHP using SMarty templates (that I didn't create). The following code is used in the view_video.tpl to generate a button with a function attached to the onclick action.
<div class="user-button" id="user-button-up">
<a href="javascript:void();" onclick="video_description_toggle()">
<img height="16" width="16" src="images/user-arrow.jpg">
</a>
</div>
<div class="user-button" id="user-button-down" style="display:none;">
<a href="javascript:void();" onclick="video_description_toggle()">
<img height="16" width="16" src="images/user-arrow-down.jpg">
</a>
</div>
I noticed these buttons were not showing up on the page, so I ran the page through Pingdom (tools.pingdom.com) which breaks down each element of a page and how long it took to load etc. On the page results, the two images (user-arrow.jpg and user-arrow-down.jpg) show a file path of: sitename.com/video/41137/images/
None of the other images have this incorrect file path, just these two.
When I view the source of the page from a browser it shows:
<div class="user-button" id="user-button-up">
<a href="javascript:void();" onclick="video_description_toggle()">
<img height="16" width="16" src="images/user-arrow.jpg">
</a>
</div>
<div class="user-button" id="user-button-down" style="display:none;">
<a href="javascript:void();" onclick="video_description_toggle()">
<img height="16" width="16" src="images/user-arrow-down.jpg">
</a>
</div>
In the video/ directory there are only videos, no folders with numbers (or with image directories in them)... I'm sure this should be easy for anyone with PHP experience using templates (that's just not me... yet).
Thank you.
The path in img is relative to the url shown, not where the template is stored, so if you're in sitename.com/video/41137/ it will look for the images folder here, unless you add a slash or "../../" before "images"