I'm using Local by Flywheel and my local URL is: http://sarasota-soccer-club.local/. What I'm doing is adding a background image to a div in WordPress: <?php echo get_site_url(); ?>/wp-content/uploads/2023/01/hero-image.jpg. The thing is that the image sometimes doesn't show. When this happens I just replace the get_site_url() with the local URL and the background image comes back. I'm using PHPStorm and running NGINX on macOS Ventura. Any idea what's going on? Thanks.
When using image as a background, it should be located in your theme's folder (since it's part of the style) something like this:
"/wp-content/themes/your-theme/assets/img/hero-image.jpg"
If you use this approach, then you need to call it using this function:
get_template_directory_uri() (that will return the path of your theme's location):
<div class="img" style="background-image: url(<?php echo esc_url(get_template_directory_uri()) ?>/assets/img/hero-image.jpg)" >
</div>
If you want to continue using your approach you can use:
<?php echo get_home_url(); ?>
or
<?php echo site_url(); ?>
The actual problem is with your theme because sometime theme code conflict issue is happening.
Better to use get_template_directory_uri() intead of get_site_url().
<div class="img" style="style="background-image: url('<?php echo get_template_directory_uri()./foldername/imagename' ?>)"
For Reference visit https://developer.wordpress.org/reference/functions/get_site_url/
https://developer.wordpress.org/reference/functions/get_template_directory_uri/
Related
Problem: Hard to synchronise image between 2 folder
My project has 2 image folder:
Home/user/public_html/image
Home/user/m.fruit.com/image
public_html serves the main page for desktop version
m.fruit.com serves the mobile page
Both version serves the same images.
When I have new fruit image, I need to put it into both folder. This becomes double work...
my way of accessing image for desktop version is: (index.php in public_html folder)
<img id="image" src="image/<?php echo $image; ?>.jpg">
my way of accessing image for mobile version is: (index.php in m.fruit.com folder)
<img id="image" src="image/<?php echo $image; ?>.jpg">
For mobile version, I did try to access image in public_html so that I don't need 2 image folder. But it seems like not possible:
<img id="image" src="public_html/image/<?php echo $image; ?>.jpg">
Is there any way to use only 1 image folder to serves these 2 version of website instead of 2 in this case?
Other better solution also welcomed.
First, you can set base URL: like
define('BASE_URL', 'http://example.com/');
then set image src:
<img src="<?php echo BASE_URL ?>image/imagename.jpg ">
or create a helper function:
PHP CODE
function asset(path){
return BASE_URL . path;
}
HTML CODE:
<img src="<?php echo asset('image/imagename.jpg'); ?> ">
This will work on both sides.
Try to change the image url scheme with this
<?php echo "http://".$_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI']; ?>
define base_url();
define('base_url', 'http://Home/user');
and then call this base url where you want show image.
<img id="image" src="image/<?php echo base_url('/public_html/').$image; ?>">
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">
So,
My images are located in wp-content/themes/mytheme/images
Originally, when i converted my site from html/css the path looked like this:
<img src="images/myimage.png" alt="some text" />
That did not work and I have now tried two diffrent solutions:
<img src='<?php get_template_directory_uri(); ?>/images/myimage.png'>
and
<img src="<?php bloginfo(); ?>images/myimage.png">
Have i missed something? I am new to wordpress an php and would appreciate some help. Thanks!
You almost had it. You left off echo.
http://codex.wordpress.org/Function_Reference/get_template_directory_uri
Output the URI
<?php echo get_template_directory_uri(); ?>
The full result is:
<img src='<?php echo get_template_directory_uri(); ?>/images/myimage.png'>
I recommend you use Drupal if you haven't gotten too far with WP already. :)
Try
get_stylesheet_directory(). '/images';
/images/myimage.png">
This will return the images directory path in the currently selected theme, even if it's a child theme.
Function Reference/get stylesheet directory
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"