{"id":60019,"date":"2024-01-22T10:14:24","date_gmt":"2024-01-22T04:44:24","guid":{"rendered":"https:\/\/www.tothenew.com\/blog\/?p=60019"},"modified":"2024-01-23T10:17:56","modified_gmt":"2024-01-23T04:47:56","slug":"wordpress-handle-external-images-in-application","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/wordpress-handle-external-images-in-application\/","title":{"rendered":"WordPress &#8211; Handle External Images in application"},"content":{"rendered":"<p>Many websites face a common challenge in managing external images in their blog posts. Using external images hosted on third-party websites might lead to issues such as broken links, slow loading times, and potential copyright concerns.<\/p>\n<p>In this blog post, we&#8217;ll delve into the problem of handling external images and provide a practical solution to bring them into your WordPress admin seamlessly.<\/p>\n<h2>The Problem: Identifying External Images<\/h2>\n<p>External images hosted on other websites can create several problems. These include:<\/p>\n<p><strong>Link Reliability<\/strong>: External links may change or become unavailable over time, resulting in broken images on your blog.<\/p>\n<p><strong>Page Loading Speed<\/strong>: Relying on external servers for images can slow down your website&#8217;s loading times.<\/p>\n<p><strong>Copyright Concerns<\/strong>: Using images without permission might lead to copyright violations.<\/p>\n<h2>How to Identify External Images<\/h2>\n<p>To identify external images in your blog posts, follow these steps:<\/p>\n<p><strong>WordPress Plugin Assistance<\/strong>: Harness the power of WordPress plugins designed to streamline the process of counting external images. Plugins like &#8220;WP External Links&#8221; or &#8220;Broken Link Checker&#8221; can provide insights into your content, helping you identify external image dependencies effortlessly.<\/p>\n<p><strong>Utilizing Server-Side Scripting (PHP)<\/strong>: For a more comprehensive server-side solution, delve into the realm of PHP scripting. This approach involves parsing the HTML content on the server, identifying external images, and providing a robust count. The code snippet below serves as a basic example:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-60015\" src=\"\/blog\/wp-ttn-blog\/uploads\/2024\/01\/code-1.png\" alt=\"\" width=\"803\" height=\"543\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2024\/01\/code-1.png 803w, \/blog\/wp-ttn-blog\/uploads\/2024\/01\/code-1-300x203.png 300w, \/blog\/wp-ttn-blog\/uploads\/2024\/01\/code-1-768x519.png 768w, \/blog\/wp-ttn-blog\/uploads\/2024\/01\/code-1-624x422.png 624w\" sizes=\"(max-width: 803px) 100vw, 803px\" \/><\/p>\n<p><strong>Manual Inspection via WordPress Editor<\/strong>: Begin your quest by navigating to the WordPress editor for the desired blog post. Switch to the HTML mode by clicking the &#8220;Code Editor&#8221; tab. Scan through the HTML source code, identifying tags and inspecting their src attributes for external domains.<\/p>\n<p><strong>Inspect Element<\/strong>: Right-click on an image in your blog post and select &#8220;Inspect&#8221; or &#8220;Inspect Element&#8221; in your browser. Look for the image source URL.<\/p>\n<h2>The Solution: Bringing External Images to WordPress<\/h2>\n<p>Bringing external images into your WordPress media library offers several advantages:<\/p>\n<p><strong>Improved Reliability<\/strong>: Ensures that your images are always available, reducing the risk of broken links.<\/p>\n<p><strong>Enhanced Page Speed<\/strong>: Localized images contribute to faster page loading times, improving user experience.<\/p>\n<p><strong>Full Control<\/strong>: Having images in your media library gives you complete control over their usage and ensures compliance with copyright regulations.<\/p>\n<h3>Manually: Step-by-Step Solution<\/h3>\n<p><strong>1. Identify External Images<\/strong><\/p>\n<p>Use the steps mentioned earlier to identify which images are hosted externally.<\/p>\n<p><strong>2. Download External Images<\/strong><\/p>\n<p>Right-click on the external image, save it to your computer, and upload it to your WordPress media library.<\/p>\n<p><strong>3. Upload to WordPress<\/strong><\/p>\n<p>Navigate to your WordPress admin dashboard.<br \/>\nGo to &#8220;Media&#8221; and select &#8220;Add New.&#8221;<br \/>\nUpload the downloaded images.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-60018 size-full\" src=\"\/blog\/wp-ttn-blog\/uploads\/2024\/01\/add-image.png\" alt=\"\" width=\"1853\" height=\"367\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2024\/01\/add-image.png 1853w, \/blog\/wp-ttn-blog\/uploads\/2024\/01\/add-image-300x59.png 300w, \/blog\/wp-ttn-blog\/uploads\/2024\/01\/add-image-1024x203.png 1024w, \/blog\/wp-ttn-blog\/uploads\/2024\/01\/add-image-768x152.png 768w, \/blog\/wp-ttn-blog\/uploads\/2024\/01\/add-image-1536x304.png 1536w, \/blog\/wp-ttn-blog\/uploads\/2024\/01\/add-image-624x124.png 624w\" sizes=\"(max-width: 1853px) 100vw, 1853px\" \/><\/p>\n<p><strong>4. Update Image URLs<\/strong><\/p>\n<p>Replace the external image URLs in your blog post with the new URLs from your WordPress media library.<\/p>\n<h3>Automated: Step-by-Step Solution<\/h3>\n<p><strong>1. Install Auto Upload Image Plugin<\/strong><\/p>\n<p>Navigate to your WordPress admin dashboard. Go to \u201cPlugins\u201d and Install the Auto Upload Image plugin that downloads external images and automatically uploads them to the admin when we update a post.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-60017\" src=\"\/blog\/wp-ttn-blog\/uploads\/2024\/01\/add-plugin.png\" alt=\"\" width=\"1852\" height=\"580\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2024\/01\/add-plugin.png 1852w, \/blog\/wp-ttn-blog\/uploads\/2024\/01\/add-plugin-300x94.png 300w, \/blog\/wp-ttn-blog\/uploads\/2024\/01\/add-plugin-1024x321.png 1024w, \/blog\/wp-ttn-blog\/uploads\/2024\/01\/add-plugin-768x241.png 768w, \/blog\/wp-ttn-blog\/uploads\/2024\/01\/add-plugin-1536x481.png 1536w, \/blog\/wp-ttn-blog\/uploads\/2024\/01\/add-plugin-624x195.png 624w\" sizes=\"(max-width: 1852px) 100vw, 1852px\" \/><\/p>\n<p><strong>2. Update Posts<\/strong><\/p>\n<p><strong>Manually<\/strong>: Navigate to your WordPress admin dashboard.<br \/>\nGo to &#8220;Posts&#8221; and Click &#8220;All Posts&#8221;<br \/>\nEdit one by one and click on the \u201cUpdate\u201d button.<\/p>\n<p><strong>Automated script<\/strong>: Add the below code snippet in function.php of your theme to update all posts.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-60016\" src=\"\/blog\/wp-ttn-blog\/uploads\/2024\/01\/code-2.png\" alt=\"\" width=\"813\" height=\"280\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2024\/01\/code-2.png 813w, \/blog\/wp-ttn-blog\/uploads\/2024\/01\/code-2-300x103.png 300w, \/blog\/wp-ttn-blog\/uploads\/2024\/01\/code-2-768x265.png 768w, \/blog\/wp-ttn-blog\/uploads\/2024\/01\/code-2-624x215.png 624w\" sizes=\"(max-width: 813px) 100vw, 813px\" \/><\/p>\n<p><strong>Note<\/strong> &#8211; Please remove the code once the update has been completed.<\/p>\n<h2>Conclusion<\/h2>\n<p>Handling external images is critical to maintaining a well-functioning and visually appealing blog. By identifying external images and bringing them into your WordPress media library, you ensure the reliability and speed of your website and exercise better control over your content. Taking these proactive steps can enhance your and your readers&#8217; blogging experience.<\/p>\n<p>Remember, a well-managed media library is the key to a seamlessly functioning and visually pleasing blog.<\/p>\n<div class=\"ap-custom-wrapper\"><\/div><!--ap-custom-wrapper-->","protected":false},"excerpt":{"rendered":"<p>Many websites face a common challenge in managing external images in their blog posts. Using external images hosted on third-party websites might lead to issues such as broken links, slow loading times, and potential copyright concerns. In this blog post, we&#8217;ll delve into the problem of handling external images and provide a practical solution to [&hellip;]<\/p>\n","protected":false},"author":1232,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":13},"categories":[5021],"tags":[1877],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/60019"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/1232"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=60019"}],"version-history":[{"count":2,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/60019\/revisions"}],"predecessor-version":[{"id":60099,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/60019\/revisions\/60099"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=60019"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=60019"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=60019"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}