Open Graph not pulling image due to whitespaces

[stex]

Hello,

I have been using André's coding to generate open graph meta tags. It works fine except that my gallery's images have whitespaces hence why FB does not pull them. Is there any easy way to fix this? Thanks!

Original thread: http://forum.coppermine-gallery.net/index.php/topic,76929.msg377716.html#msg377716

[Αndré]

Please attach a sample picture, so we can test ourselves. I guess you'd need to adjust your pictures if Facebook doesn't "like" them as they are.

Some information about Open Graph (just for the record): https://blog.kissmetrics.com/open-graph-meta-tags/

[stex]

I assume that the only way to adjust them would be to make a massive change of urls. I'm not sure how to do that though. I am mostly interested in open graph because I need the gallery albums to show up as a Twitter card on Twitter. Unfortunately I did not find any thread about twitter meta tags, hence why I searched for open graph tags which work just fine for Twitter.

Either way, if you want you can test it by using this link: https://developers.facebook.com/tools/debug/sharing/?q=http%3A%2F%2Fgagaimages.co%2Fthumbnails.php%3Falbum%3D3643

[Αndré]

I just had a look at the HTML output of that album. Have a look at this row:

Code Select Expand

<meta property="og:image" content="http://gagaimages.co/albums/Appareances/2017/doc press conference toronto sept 8 talk/" />

As you can see, the filename is missing. Please check if you applied the mod correctly.

my gallery's images have whitespaces

I assume you mean you have spaces in the file path?

[stex]

I just had a look at the HTML output of that album. Have a look at this row:

Code Select Expand

<meta property="og:image" content="http://gagaimages.co/albums/Appareances/2017/doc press conference toronto sept 8 talk/" />

As you can see, the filename is missing. Please check if you applied the mod correctly.


I assume you mean you have spaces in the file path?

Yes, exactly!

I will re-apply the mod to my file since I did some edits mainly because of this issue. I will let you know when done.

[stex]

Fixed, now the filepath shows up correctly on Facebook debugger. Check it out! https://developers.facebook.com/tools/debug/sharing/?q=http%3A%2F%2Fgagaimages.co%2Fthumbnails.php%3Falbum%3D3643

[stex]

I tested an album in which the paths are just fine and have no whitespaces. The mod works just fine in this case: https://developers.facebook.com/tools/debug/sharing/?q=http%3A%2F%2Fgagaimages.co%2Fthumbnails.php%3Falbum%3D3413

[Αndré]

Try if it works when you replace

Code Select Expand

$CURRENT_PIC_DATA['filepath']
with

Code Select Expand

urlencode($CURRENT_PIC_DATA['filepath'])

[stex]

I tried, but it does not seem to be working. Please check if everything is correct:

Code Select Expand

global $CPG_PHP_SELF, $LINEBREAK, $CURRENT_PIC_DATA, $CURRENT_ALBUM_DATA;
    if ($CPG_PHP_SELF == 'displayimage.php') {
        $meta .= $LINEBREAK . '<meta property="og:url" content="' . $CONFIG['ecards_more_pic_target'] . 'displayimage.php?pid=' . $CURRENT_PIC_DATA['pid'] . '" />';
        $meta .= $LINEBREAK . '<meta property="og:image" content="' . $CONFIG['ecards_more_pic_target'] . $CONFIG['fullpath'] . urlencode($CURRENT_PIC_DATA['filepath']) . $CURRENT_PIC_DATA['filename'] . '" />';
    } elseif ($CPG_PHP_SELF == 'thumbnails.php') {
        if ($CURRENT_ALBUM_DATA['aid']) {
            $album = $CURRENT_ALBUM_DATA['aid'];
            $meta .= $LINEBREAK . '<meta property="og:title" content="' . $CURRENT_ALBUM_DATA['title'] . '" />';
            $sql = "SELECT filepath, filename FROM {$CONFIG['TABLE_PICTURES']} WHERE approved = 'YES' AND aid = '{$CURRENT_ALBUM_DATA['aid']}' ORDER BY pid DESC LIMIT 1";
        } else {
            $superCage = Inspekt::makeSuperCage();
            $album = $superCage->get->getAlpha('album');
            $sql = "SELECT filepath, filename FROM {$CONFIG['TABLE_PICTURES']} WHERE approved = 'YES' ORDER BY RAND() LIMIT 1";
        }
        $thumb = mysql_fetch_assoc(cpg_db_query($sql));
        $meta .= $LINEBREAK . '<meta property="og:url" content="' . $CONFIG['ecards_more_pic_target'] . 'thumbnails.php?album=' . $album . '" />';
        $meta .= $LINEBREAK . '<meta property="og:image" content="' . $CONFIG['ecards_more_pic_target'] . $CONFIG['fullpath'] . $thumb['filepath'] . $thumb['filename'] . '" />';
    }

[Αndré]

https://developers.facebook.com/tools/debug/sharing/?q=http%3A%2F%2Fgagaimages.co%2Fthumbnails.php%3Falbum%3D3413

This site shows me an image, so it works as expected?

[stex]

This site shows me an image, so it works as expected?

That one works because the url has no whitespaces! Other albums don't show up like that unfortunately

[Αndré]

Sorry, I haven't seen this on my mobile phone. Please try again with rawurlencode instead of urlencode.

[Αndré]

Finally on my computer. Please try this code:

Code Select Expand

    global $CPG_PHP_SELF, $LINEBREAK, $CURRENT_PIC_DATA, $CURRENT_ALBUM_DATA;
    if ($CPG_PHP_SELF == 'displayimage.php') {
        $meta .= $LINEBREAK . '<meta property="og:url" content="' . $CONFIG['ecards_more_pic_target'] . 'displayimage.php?pid=' . $CURRENT_PIC_DATA['pid'] . '" />';
        $meta .= $LINEBREAK . '<meta property="og:image" content="' . urlencode($CONFIG['ecards_more_pic_target'] . $CONFIG['fullpath'] . $CURRENT_PIC_DATA['filepath'] . $CURRENT_PIC_DATA['filename']) . '" />';
    } elseif ($CPG_PHP_SELF == 'thumbnails.php') {
        if ($CURRENT_ALBUM_DATA['aid']) {
            $album = $CURRENT_ALBUM_DATA['aid'];
            $meta .= $LINEBREAK . '<meta property="og:title" content="' . $CURRENT_ALBUM_DATA['title'] . '" />';
            $sql = "SELECT filepath, filename FROM {$CONFIG['TABLE_PICTURES']} WHERE approved = 'YES' AND aid = '{$CURRENT_ALBUM_DATA['aid']}' ORDER BY pid DESC LIMIT 1";
        } else {
            $superCage = Inspekt::makeSuperCage();
            $album = $superCage->get->getAlpha('album');
            $sql = "SELECT filepath, filename FROM {$CONFIG['TABLE_PICTURES']} WHERE approved = 'YES' ORDER BY RAND() LIMIT 1";
        }
        $thumb = mysql_fetch_assoc(cpg_db_query($sql));
        $meta .= $LINEBREAK . '<meta property="og:url" content="' . $CONFIG['ecards_more_pic_target'] . 'thumbnails.php?album=' . $album . '" />';
        $meta .= $LINEBREAK . '<meta property="og:image" content="' . urlencode($CONFIG['ecards_more_pic_target'] . $CONFIG['fullpath'] . $thumb['filepath'] . $thumb['filename']) . '" />';
    }

If it doesn't work, please try this:

Code Select Expand

    global $CPG_PHP_SELF, $LINEBREAK, $CURRENT_PIC_DATA, $CURRENT_ALBUM_DATA;
    if ($CPG_PHP_SELF == 'displayimage.php') {
        $meta .= $LINEBREAK . '<meta property="og:url" content="' . $CONFIG['ecards_more_pic_target'] . 'displayimage.php?pid=' . $CURRENT_PIC_DATA['pid'] . '" />';
        $meta .= $LINEBREAK . '<meta property="og:image" content="' . rawurlencode($CONFIG['ecards_more_pic_target'] . $CONFIG['fullpath'] . $CURRENT_PIC_DATA['filepath'] . $CURRENT_PIC_DATA['filename']) . '" />';
    } elseif ($CPG_PHP_SELF == 'thumbnails.php') {
        if ($CURRENT_ALBUM_DATA['aid']) {
            $album = $CURRENT_ALBUM_DATA['aid'];
            $meta .= $LINEBREAK . '<meta property="og:title" content="' . $CURRENT_ALBUM_DATA['title'] . '" />';
            $sql = "SELECT filepath, filename FROM {$CONFIG['TABLE_PICTURES']} WHERE approved = 'YES' AND aid = '{$CURRENT_ALBUM_DATA['aid']}' ORDER BY pid DESC LIMIT 1";
        } else {
            $superCage = Inspekt::makeSuperCage();
            $album = $superCage->get->getAlpha('album');
            $sql = "SELECT filepath, filename FROM {$CONFIG['TABLE_PICTURES']} WHERE approved = 'YES' ORDER BY RAND() LIMIT 1";
        }
        $thumb = mysql_fetch_assoc(cpg_db_query($sql));
        $meta .= $LINEBREAK . '<meta property="og:url" content="' . $CONFIG['ecards_more_pic_target'] . 'thumbnails.php?album=' . $album . '" />';
        $meta .= $LINEBREAK . '<meta property="og:image" content="' . rawurlencode($CONFIG['ecards_more_pic_target'] . $CONFIG['fullpath'] . $thumb['filepath'] . $thumb['filename']) . '" />';
    }

[stex]

I tried the both of them, but with no luck. However, I edited the line:

$sql = "SELECT filepath, filename FROM..." etc

And changed it to:

$sql = "SELECT urlencode('filepath'), filename FROM..." etc

By doing this, on FB debugger it still does not work, BUT here https://cards-dev.twitter.com/validator it seems to be working, except that it takes several seconds to load the pic, but in the end it does load it. Tried a few albums, most of them seem to be working. It still hasn't solved the problem, unfortunately.

[stex]

And by the way, when I used one of your two options, FB Debug was showing an encoded url which it was considered invalid by FB itself.

[stex]

I meant to say that I used BOTH of your two options.

[Αndré]

On my own server I just tested successfully a file which has spaces in the file path (without the use of urlencode or rawurlencode).

I also had another look at the Facebook sharing debugger. There's a HTTP response code: 400, which means:

The server cannot or will not process the request due to an apparent client error (e.g., malformed request syntax, size too large, invalid request message framing, or deceptive request routing).

So I tested with exactly the same filepath (albums/Appareances/2017/doc press conference toronto sept 8 talk/013.jpg) on my server (again no usage of urlencode or rawurlencode), it works as expected.

I also tried with the thumbnail file without success:

Image Unavailable
Error while downloading http://gagaimages.co/albums/Appareances/2017/doc press conference toronto sept 8 talk/thumb_013.jpg with HTTP response code: 400

I'm on a dead end here. As it works on my server, it has to be something with your server setup. I performed my tests with a plain html file, so Coppermine wasn't involded in my tests. You maybe want to contact the Facebook support to fix your issue.

Alternatively, you could try if the issue still exists, when you replace the spaces with e.g. underscores. For a quick test, please create a copy of the folder

Code Select Expand

http://gagaimages.co/albums/Appareances/2017/doc press conference toronto sept 8 talk/
including its content to

Code Select Expand

http://gagaimages.co/albums/Appareances/2017/doc_press_conference_toronto_sept_8_talk/

[stex]

Thank you for your time! I appreciate it. One last thing, your mod picks a pic randomly, can you edit that and make it the first picture in the album please?

[Αndré]

It just uses a random picture for meta albums, as described here. If you don't like it, use that code.