Garrett Mayock's Blog

blawg

New image meta tags for blogs!

I've posted enough blogs that I wanted to have unique meta images for each.


  Garrett Mayock posted 2019-03-06 06:43:09 UTC

Man, those image tags were laaaame

Recently one of my friends called me out for using the same bland meta image for all of my blog posts. I admit - I was being rather lazy when I originally created the PHP that added the meta tags to my website, and I set everything to a very bland default image. For example:

But this was getting old, so I added some code that dynamically creates the meta tag in the HTML based on whether or not a user has uploaded an image for their meta tag while posting their blog. I used it for my recent post:

That's nice!

How does it work?

Now, I do take a few security measures on the file upload to prevent malicious code injections, which I won't detail here but am open to discussing with potential employers.

The important part that was new for me was learning that I could use secondary PHP files to set variables - basically meaning if I have a webpage, and call a PHP from that webpage, I can call further PHP pages and return variables from those further pages to use in the first page called.

Okay, how that works is that I have a main PHP page that I include all my styling in, so that I don't have to retype all the styles every time I create a new webpage or want to make a change.

I included all my meta tags on that main PHP page, and so I set most of them to a default value. It looked like this (the filepath is falsified just in case):

<meta property="og:image" content="http://gmayock.com/images/defaultmetaj.jpg" />
<meta property="og:image:url" content="http://gmayock.com/images/defaultmetaj.jpg" />
<meta property="og:image:secure_url" content="https://gmayock.com/images/defaultmetaj.jpg" />

Since I didn't know what I know now, those URLs were hard-coded, hence the ugly default meta image. However, since I learned what I learned, it now looks like this:

<?php include $_SERVER['DOCUMENT_ROOT'].'filepath/meta_image_url_finding_php_file.php'; ?>
<meta property="og:image" content=<?php echo "http://".$imgurl ?> />
<meta property="og:image:url" content=<?php echo "http://".$imgurl ?> />
<meta property="og:image:secure_url" content=<?php echo "https://".$imgurl ?> />

And that new PHP file which I've called meta_image_url_finding_php_file.php has this code:

<?php
$uploaddir = $_SERVER['DOCUMENT_ROOT'].'/filepath/';
$file_array = scandir ($uploaddir);
$httpdir = '/filepath/';

$file_name_array = array();
foreach ($file_array as $k => $val) {
    $splitted = explode('.', $val);
    if (count($splitted) > 1) {
        $value = $splitted[0];
        $file_name_array[] = $value;
    }
}
$file_ext_array = array();
foreach ($file_array as $k => $val) {
    $splitted = explode('.', $val);
    if (count($splitted) > 1) {
        $key = $splitted[0];
        $value = $splitted[1];
        $file_ext_array[$key] = $value;
    }
}

if(isset($_GET['name'])) {
    if (in_array($_GET['name'], $file_name_array)) {
        $imgurl = $_SERVER['HTTP_HOST'].$httpdir.$_GET['name'].'.'.$file_ext_array[$_GET['name']];
    }
    else {
        $imgurl = $_SERVER['HTTP_HOST']."/images/defaultmetaj.jpg";
    }
}
else {
    $imgurl = $_SERVER['HTTP_HOST']."/images/defaultmetaj.jpg";
}

?>

It basically looks at the upload directory where I put the image files. Then if checks if the $_GET['name'] is the same as the filename with the extension removed. Then it returns a URL to that filename (with the extension tacked back on) if that is present. If not, it just returns the default.

Next steps

Next steps for this may include creating a new default meta tag for each subdirectory of my website - for example, gmayock.com/blog/ could have a different default than gmayock.com/aboutme/, etc. Could be a fun weekend project to make some fancy new images!

contact me