forum.coppermine-gallery.net

Support => cpg1.5.x Support => cpg1.5 miscellaneous => Topic started by: stex on September 11, 2017, 10:51:09 pm

Title: Open Graph not pulling image due to whitespaces
Post by: stex on September 11, 2017, 10:51:09 pm
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
Title: Re: Open Graph not pulling image due to whitespaces
Post by: Αndré on September 12, 2017, 09:54:14 pm
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/
Title: Re: Open Graph not pulling image due to whitespaces
Post by: stex on September 13, 2017, 04:50:31 pm
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
Title: Re: Open Graph not pulling image due to whitespaces
Post by: Αndré on September 13, 2017, 05:20:03 pm
I just had a look at the HTML output of that album. Have a look at this row:
Code: [Select]
<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?
Title: Re: Open Graph not pulling image due to whitespaces
Post by: stex on September 13, 2017, 05:30:28 pm
I just had a look at the HTML output of that album. Have a look at this row:
Code: [Select]
<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.
Title: Re: Open Graph not pulling image due to whitespaces
Post by: stex on September 13, 2017, 05:34:29 pm
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
Title: Re: Open Graph not pulling image due to whitespaces
Post by: stex on September 13, 2017, 05:39:22 pm
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
Title: Re: Open Graph not pulling image due to whitespaces
Post by: Αndré on September 13, 2017, 06:05:52 pm
Try if it works when you replace
Code: [Select]
$CURRENT_PIC_DATA['filepath']with
Code: [Select]
urlencode($CURRENT_PIC_DATA['filepath'])
Title: Re: Open Graph not pulling image due to whitespaces
Post by: stex on September 13, 2017, 06:29:34 pm
I tried, but it does not seem to be working. Please check if everything is correct:

Code: [Select]
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'] . '" />';
    }
Title: Re: Open Graph not pulling image due to whitespaces
Post by: Αndré on September 13, 2017, 06:57:00 pm
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?
Title: Re: Open Graph not pulling image due to whitespaces
Post by: stex on September 13, 2017, 07:23:17 pm
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
Title: Re: Open Graph not pulling image due to whitespaces
Post by: Αndré on September 13, 2017, 07:33:04 pm
Sorry, I haven't seen this on my mobile phone. Please try again with rawurlencode instead of urlencode.
Title: Re: Open Graph not pulling image due to whitespaces
Post by: Αndré on September 13, 2017, 08:03:03 pm
Finally on my computer. Please try this code:
Code: [Select]
    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]
    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']) . '" />';
    }
Title: Re: Open Graph not pulling image due to whitespaces
Post by: stex on September 13, 2017, 08:30:22 pm
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. :(
Title: Re: Open Graph not pulling image due to whitespaces
Post by: stex on September 13, 2017, 08:31:30 pm
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.
Title: Re: Open Graph not pulling image due to whitespaces
Post by: stex on September 14, 2017, 07:17:44 am
I meant to say that I used BOTH of your two options.
Title: Re: Open Graph not pulling image due to whitespaces
Post by: Αndré on September 14, 2017, 02:40:38 pm
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:
Quote from: https://en.wikipedia.org/wiki/List_of_HTTP_status_codes#4xx_Client_errors
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:
Quote
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]
http://gagaimages.co/albums/Appareances/2017/doc press conference toronto sept 8 talk/including its content to
Code: [Select]
http://gagaimages.co/albums/Appareances/2017/doc_press_conference_toronto_sept_8_talk/
Title: Re: Open Graph not pulling image due to whitespaces
Post by: stex on September 14, 2017, 06:06:50 pm
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?
Title: Re: Open Graph not pulling image due to whitespaces
Post by: Αndré on November 09, 2017, 02:34:13 pm
It just uses a random picture for meta albums, as described here (http://forum.coppermine-gallery.net/index.php/topic,76929.msg377551.html#msg377551). If you don't like it, use that (http://forum.coppermine-gallery.net/index.php/topic,76929.msg377341.html#msg377341) code.