WordPress, lets you attach images in any of your pages of the site. But what about you are directly displaying the images in your site via url? Will it give all the details about the image? Well, it will not provide it when using the direct url for image. So, you must know about how to get image details with image url in WordPress to make that image details properly set when displayed. So, here we will learn about how to do it properly for your site. Hence, let’s move ahead and learn about it, shall we?
How WordPress stores the image details uploaded in your site?
Well, when you upload the image in your site, it will create new attachment page in your site. This attachment page will store the details of the image uploaded. For eg: it will store image details like alt text, width, height, caption text, and so on.
Hence after knowing those, let’s move ahead and learn about how to get image details with image url in WordPress, shall we?
How to get image details with image url in WordPress?
As you may already know, WordPress stores the image as attachment. Hence, you will get the attachment page for your site for the images uploaded with its details store. So, we probably need to pass the image url within certain function of WordPress which lets you fetch those, isn’t it? Well, now let’s move ahead and learn on this.
For this, changing the attachment url to post id in WordPress to fetch the image details, WordPress has function named as: attachment_url_to_postid(); where you will pass the url of the image. If it is successful then, it will provide you with the image details. So, lets apply it for your site, shall we?
For this, you just need to add the below PHP code in the theme file wherever needed:
$image_url = attachment_url_to_postid( 'http://localhost/wp-check/wp-content/uploads/2018/05/acer-791027_1920.jpg' );
In the above code, you need to pass the image url as needed for your site. Here in ours, we have passed it as needed and when you echo it, you will get the attachment id. Now, why not fetch the other details of the image using that id? Well for it, let’s move ahead and learn about how to do it, shall we?
For this, let’s add the below PHP code where ever needed for your site:
$image_src = wp_get_attachment_image_src( $image_url, 'full' );
$image_url_link = $image_src[0]; // Gives you image url.
$image_width = $image_src[1]; // Gives you image width.
$image_height = $image_src[2]; // Gives you image height.
echo '<img src="' . $image_url_link . '" width="' . $image_width . '" height="' . $image_height . '">';
Now, you will get to add the image in your site with url, its width and height. And what about displaying as WordPress handles the post thumbnail way? Well, we have got you covered up into it too. So for this, just add the below PHP code in the required file:
echo wp_get_attachment_image( $image_url, 'full' );
Here, in both above conditions, the second parameter is the image size. Just pass the required size into it and you will get the exact image as you need for your site with almost all the details.
Output of how to get image details with image url in WordPress
You can see the similar result as below if you have applied the above mentioned PHP code for your site:
There in the above screenshot, you can see blue highlight, which is for the first case example and the red ones, which is for second case example. You can clearly see that in second case, more information is added up than the first ones as in case of featured image addition.
You may also want to read:
- How To Limit Excerpt Length In WordPress
- Make YouTube And Vimeo Video Responsive In WordPress
- Make Your Theme WooCommerce Plugin Compatible
- XML Sitemap Support For Custom Post Type Using JetPack
- Solve Maximum Execution Time Of 60 Seconds Exceeded
Conclusion
If you have followed up the tutorial properly and now can easily get image details with image url in your WordPress site then, we can say that you are now more familiar on this than before. However, if you are still confused on the same and want to know more about it then, do drop the comment below in the comment box and we will follow it up.
