Advanced search  

News:

cpg1.5.48 Security release - upgrade mandatory!
The Coppermine development team is releasing a security update for Coppermine in order to counter a recently discovered vulnerability. It is important that all users who run version cpg1.5.46 or older update to this latest version as soon as possible.
[more]

Pages: [1]   Go Down

Author Topic: Open Graph not pulling image due to whitespaces  (Read 12579 times)

0 Members and 1 Guest are viewing this topic.

stex

  • Coppermine novice
  • *
  • Offline Offline
  • Posts: 35
Open Graph not pulling image due to whitespaces
« 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
Logged

Αndré

  • Administrator
  • Coppermine addict
  • *****
  • Country: de
  • Offline Offline
  • Gender: Male
  • Posts: 15764
Re: Open Graph not pulling image due to whitespaces
« Reply #1 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/
Logged

stex

  • Coppermine novice
  • *
  • Offline Offline
  • Posts: 35
Re: Open Graph not pulling image due to whitespaces
« Reply #2 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
Logged

Αndré

  • Administrator
  • Coppermine addict
  • *****
  • Country: de
  • Offline Offline
  • Gender: Male
  • Posts: 15764
Re: Open Graph not pulling image due to whitespaces
« Reply #3 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?
Logged

stex

  • Coppermine novice
  • *
  • Offline Offline
  • Posts: 35
Re: Open Graph not pulling image due to whitespaces
« Reply #4 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.
Logged

stex

  • Coppermine novice
  • *
  • Offline Offline
  • Posts: 35
Re: Open Graph not pulling image due to whitespaces
« Reply #5 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
Logged

stex

  • Coppermine novice
  • *
  • Offline Offline
  • Posts: 35
Re: Open Graph not pulling image due to whitespaces
« Reply #6 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
Logged

Αndré

  • Administrator
  • Coppermine addict
  • *****
  • Country: de
  • Offline Offline
  • Gender: Male
  • Posts: 15764
Re: Open Graph not pulling image due to whitespaces
« Reply #7 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'])
Logged

stex

  • Coppermine novice
  • *
  • Offline Offline
  • Posts: 35
Re: Open Graph not pulling image due to whitespaces
« Reply #8 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'] . '" />';
    }
Logged

Αndré

  • Administrator
  • Coppermine addict
  • *****
  • Country: de
  • Offline Offline
  • Gender: Male
  • Posts: 15764
Logged

stex

  • Coppermine novice
  • *
  • Offline Offline
  • Posts: 35
Re: Open Graph not pulling image due to whitespaces
« Reply #10 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
Logged

Αndré

  • Administrator
  • Coppermine addict
  • *****
  • Country: de
  • Offline Offline
  • Gender: Male
  • Posts: 15764
Re: Open Graph not pulling image due to whitespaces
« Reply #11 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.
Logged

Αndré

  • Administrator
  • Coppermine addict
  • *****
  • Country: de
  • Offline Offline
  • Gender: Male
  • Posts: 15764
Re: Open Graph not pulling image due to whitespaces
« Reply #12 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']) . '" />';
    }
Logged

stex

  • Coppermine novice
  • *
  • Offline Offline
  • Posts: 35
Re: Open Graph not pulling image due to whitespaces
« Reply #13 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. :(
Logged

stex

  • Coppermine novice
  • *
  • Offline Offline
  • Posts: 35
Re: Open Graph not pulling image due to whitespaces
« Reply #14 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.
Logged

stex

  • Coppermine novice
  • *
  • Offline Offline
  • Posts: 35
Re: Open Graph not pulling image due to whitespaces
« Reply #15 on: September 14, 2017, 07:17:44 am »

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

Αndré

  • Administrator
  • Coppermine addict
  • *****
  • Country: de
  • Offline Offline
  • Gender: Male
  • Posts: 15764
Re: Open Graph not pulling image due to whitespaces
« Reply #16 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:
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/
Logged

stex

  • Coppermine novice
  • *
  • Offline Offline
  • Posts: 35
Re: Open Graph not pulling image due to whitespaces
« Reply #17 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?
Logged

Αndré

  • Administrator
  • Coppermine addict
  • *****
  • Country: de
  • Offline Offline
  • Gender: Male
  • Posts: 15764
Re: Open Graph not pulling image due to whitespaces
« Reply #18 on: November 09, 2017, 02:34:13 pm »

It just uses a random picture for meta albums, as described here. If you don't like it, use that code.
Logged
Pages: [1]   Go Up
 

Page created in 0.028 seconds with 20 queries.