get_template_directory_uri for image and video loading
Avoid the error 404 when loading the image, pdf, or image in WordPress.
The proper method to load the image and video to a page in WordPress is by using get_template_directory_uri.
get_template_directory_uri is a WordPress function that points to a directory of a current active WordPress theme.
Therefore, to access the file that resides in the active theme directory the get_template_directory_uri should be used.
How to load the image by the get_template_directory_uri
Write the image HTML tag on the place to display the specified image.
Don’t forget to include the src attribute since it is where the image link path is set
<img src="my_image.png">
The src attribute is set to my_image.png which represents the image pathname.
If the <img> tag structure remains as it is, the picture won’t display.
Hence, replace the image name with a link of the website followed by a forward slash and the name of the image.
get_template_directory_uri always retrieves a current theme directory path.
Therefore, the set the src attribute to a PHP code like this.
<img src = "<?php echo get_template_directory_uri().'/my_image.png';?>">
Echo the function and append to a forward slash followed by image name.
This way renders the image correctly without error in the WordPress site.
Load the Image From Subfolder.
To load the image from the sub-directory using get_template_directory_uri, write the directory name after the slash.
<img src = "<?php echo get_template_directory_uri().'/sub-directory';?>">
Then, add another forward slash followed by the image file name.
<img src = "<?php echo get_template_directory_uri().'/sub-directory/my-image.png';?>">
In short, get_template_directory_uri return the address URI of the website eg https://webappguides.com
Therefore, if you check the HTML source the image tag becomes
<img src = "https://webappguides.com/sub-directory/my-image.png">
How to load the video by the get_template_directory_uri
The same procedure used to load the image in WordPress can load the video on a page too.
Just write the video HTML code on the page that will show a provided video
<video width=”320″ height=”240″ controls src=”my-video.mp4″>
Video in WordPress
</video>
src attribute determines the location of the video.
This attributes receives the address location in the WordPress directory that holds a video.
So, after the src’s equal sign write the WordPress PHP function get_template_directory_uri.
Then, append the function with a forward slash as you did in the image part.
And specify the video name.
Here is the summary
<video width="320" height="240" controls src="<?php echo get_template_directory_uri.'/my-video.mp4';?>">
Video in wordpress
</video>
Load the video from a subfolder
After the video source(src) call the get_template_directory_uri to get the blog address location.
Append the function to a forward slash followed by a subdirectory name.
After specifying the subdirectory name, add another forward slash followed by the name of the video.
The code summary is here.
<video width="320" height="240" controls src="<?php echo get_template_directory_uri.'/sub-directory/my-video.mp4';?>">
Video in wordpress
</video>
get_template_directory_uri vs bloginfo(‘template_uri’)
You can use bloginfo(‘template_uri’) to access the blog uri for creating video or image path.
Instead of adopting get_template_directory_uri, the bloginfo can offer the alternative to show video or image in WordPress
For example,
<img src = "<?php bloginfo('template_uri').'/sub-directory/my-image.png';?>">
This code loads an image.
And for loading the video file.
<video width="320" height="240" controls src="<?php bloginfo('template_uri').'/sub-directory/my-video.mp4';?>">
Video in wordpress
</video>
So, what is the difference between the bloginfo(‘template_uri’) and get_template_directory_uri?
There is no difference between them since bloginfo(‘template_uri’) outputs the URI returned by get_template_directory_uri.
Therefore, you can load the image or any video format using any of these two functions.
BUT
There is slightly difference, while get_template_directory_uri echoes bloginfo(‘template_uri’) doesn’t.
Learn the application of these two methods on creating WordPress theme from scratch here
And
bloginfo(‘template_uri’) disadvantages
The bloginfo parameter passes various kinds of values.
The parameters can take a string that prints the name of the blog, blog description, and so on.
So, the function is not straightforward as it will test the data passed.
It can a bit slow to load the image or video.
Wrap-up
When you load the image and a video in WordPress always use get_template_directory_uri.
Append the function to a name or directory where the image file resides.
