Tutorial - PHP Replace Img Src From String

#php #showdev

Recently, I had to figure out how to change <img> tag src using only PHP. I had to change the request from HTTP to HTTPS. I was given the task to convert a site over to HTTPS. The website is managed on Big Commerce. As we already know, when you are changing a site over to HTTPS, you have to hunt down all of the images/assets of the site and convert them to request HTTPS as well. Otherwise, you will end up with the dreaded, mixed-content error and your site is deemed as unsecured by the browser you are visiting your site from.

So it was easy enough to go through, page by page, and update images/assets to make requests over HTTPS instead of HTTP. Things were going along just fine until I ran into a big problem.

The Problem

For this particular client, products of the website are not managed inside of Big Commerce. Instead, they are managed in a third party ERP (Enterprise Resource Planning) software. Which syncs changes with the Big Commerce product pages. So what was found is that the product pages are essentially managed in the ERP. Any products that included images inside of the Product Descriptions included it as HTTP. So here we are...potentially thousands of products, all of which I would be going in an manually editing each product description containing <img src="http://www..."> to <img src="https://www...">. Adding only an s to http://.

Solving The Problem By Using PHP to Replace Img Src From A String

Doing some research, I found that the ERP had a hook in which you could introduce custom logic before the ERP would sync the data to Big Commerce. Because each product description is stored as a string of HTML, I figured, I could manipulate the product description directly and add HTTPS to all images inside of the content.

This is the code I used to solve this problem:

<?php

$productDesc = '<a href="https://ua1.us/">Text</a>';
$productDesc .= '<img src="http://ua1.us/media/media.jpg">';
$productDesc .= '<div class="test"></div>';
$productDesc .= '<img src="http://ua1.us/media/media1.jpg">';

preg_match_all('/<img[^>]+>/i', $productDesc, $images);
foreach ($images[0] as $image) {
    $secureImg = str_replace('http://', 'https://', $image);
    $productDesc = str_replace($image, $secureImg, $productDesc);
}
echo $productDesc;

In the code above, what we are doing is using the preg_match_all method in PHP to return all instances of <img> tags as an array of the original image tags. We then loop through each image tag and use the str_replace method to find the http:// and replace with the https://. This returns a string the represents a secured image request. We then repeat the find a replace. This time, we are looking to replace the original image with the secured one.

Originally Posted at UA1 Labs