Preg_Replace distorting images

Question

I'm trying to do a preg_replace to change the title of my pages since everything is below the header and title tags. I used this example https://stackoverflow.com/a/32508962 and edited it slightly for my purposes.

Since the original replaces everything between the title tags, I put the main title as a default within, then added that within the preg_replace so I could just make subtitles depending on where I add one.

In other words, my title tags look like this: <title>Page Title</tile>

Inside my index is this:

ob_start();
require_once($_SERVER['DOCUMENT_ROOT'] . "/header.php");
$buffer=ob_get_contents();
ob_end_clean();

And then each page that I want a subtitle I have this:

$title = " - Subtitle";
$buffer = preg_replace('/(<title>Site Title)(.*?)(<\/title>)/i', '$1' . $title . '$3', $buffer);

echo $buffer;

It actually works perfect in nearly every sense, but for some reason, it's distorted the images on some pages and I'm honestly not sure why.

The code for the image is very simple:

<div class="image gamelogo"><img src="images/gamelogo.png"></div>

And the CSS for that div is this:

.image.gamelogo img {
 height:100%;
 width:100%;
 display: block;
}

Any idea why it would be distorting my images? By distorting, I mean that it's acting almost as if there is no CSS for it. It's not sizing properly to any browser. Oh, and the image is distorted no matter what page or where I put it.

Answer 1

Because you can't parse [x]html with regular expressions.

You can parse and manipulate templates. If you check your default to an explicit value, e.g.

<title>ReplacePageTitle</tile>

...it then becomes safe, but inefficient to use a regex:

$buffer = preg_replace('/<title>ReplacePageTitle<\/title>)/i', '$1' . $title . '$3', $buffer);

but you can just....

$buffer=str_replace('<title>ReplacePageTitle</tile>', "<title>$title</title>", $buffer);

(and BTW if your HTML is not rendering as you expect, sometimes its a good idea to have look at the html which is being generated).