[CDB] Magic OGP links: thumbnails and descriptions

[Ger]

Extension Name:Magic OGP links: thumbnails and descriptions
Author: Ger

Extension Description: Fetch plain pasted "magic urls" to render as rich content with the Open Graph Protocol tags, just like you see on Facebook, Twitter, etc.

Extension Version: 1.0.0

Requirements:

• phpBB 3.2
• PHP 5.4+
• cURL
• Libxml
• DOMDocument
• DOMXPath

All of these are usually available on your server when you're on a descent host.

Visitors need Javascript for the rendering, otherwise the links appear as regular phpBB links.

Features:

• Let users simply copy and paste their links without hassle
• Parses the OGP image, title and description in a nice looking block
• The entire block is the link
• Falls back to regular HTML title and meta description when possible
• Falls back to regular phpBB links when no (sufficient) OGP data is found
• Fetches OGP data on posting so it doesn't impact each time on rendering
• When posting with url=... tags the OGP data isn't fetched so your users can choose use regular links in their text when they want to

Screenshots:



Extension Download: https://github.com/GerB/magicogp

[JoshyPHP]

I took a quick look at the repository. Looks alright. I think you can replace this block of code:

Code: Select all

// Search image_src if no img yet
if (!isset($this->values['image'])) {
	$domxpath = new \DOMXPath($doc);
	$elements = $domxpath->query("//link[@rel='image_src']");
	if ($elements->length > 0) {
		$domattr = $elements->item(0)->attributes->getNamedItem('href');
		if ($domattr) {
			$this->values['image'] = $domattr->value;
			$this->values['image_src'] = $domattr->value;
		}
	}
}

// Still no image? Try fetching the icon
if (!isset($this->values['image'])) {
	$domxpath = new \DOMXPath($doc);
	$elements = $domxpath->query("//link[@rel='icon']");
	if ($elements->length > 0) {
		$domattr = $elements->item(0)->attributes->getNamedItem('href');
		if ($domattr) {
			$this->values['image'] = $domattr->value;
			$this->values['image_src'] = $domattr->value;
		}
	}
}

...with this:

Code: Select all

foreach (['image_src', 'icon'] as $name)
{
	$value = $domxpath->evaluate('string(//link[@rel="' . $name . '"]/@href)');
	if ($value > '')
	{
		$this->values['image']     = $value;
		$this->values['image_src'] = $value;
		break;
	}
}

You may also want to look into those XPath queries, although it's not as useful since you need to retrieve the name of the OGP property too:

Code: Select all

//meta[starts-with(@property, "og:")]/@content
//meta[starts-with(@name,     "og:")]/@content
//meta[starts-with(@property, "og:")]/@value

[Ger]

Thanks

Yeah, I copied that thingy later to check if it would make a difference. Code is still far from complete and can definitely use some optimisations here and there.

[Chrono]

Hey... thats a cool and awesome idea

Can I sugest at option to show the content in vertical? nice thumb in the left whit the summary in the right , or some size option to personalize the output of the content

Keep the good work.

Cheers!

[SalazarAG]

Hi! Excellent extension, but does it cause conflict with Media Embed?

[Toxyy]

Is it responsive?

[Ger]

Hi! Excellent extension, but does it cause conflict with Media Embed?

Haven't tried it yet. I'd say: take a test and let me know
This is the very first version of this extension, not much more than a proof-of-concept.

Is it responsive?

It scales just like any other text and image in a post.

[Ger]

Can I sugest at option to show the content in vertical? nice thumb in the left whit the summary in the right , or some size option to personalize the output of the content

Missed this earlier.

I've added some simple styling in ./ext/ger/magicogp/styles/prosilver/theme/magicogp.css
If you want to, you can add or override these definitions in your own stylesheet.

You might want to do something like this:

Code: Select all

.ogpblock img {
	width: 150px;
}
.ogptext {
	width: calc(100% - 180px);
}

That should cover it. Be aware though that this extension is far from ready so I might change the default style definitions and that they mess with your additions.

[SalazarAG]

Hi! Excellent extension, but does it cause conflict with Media Embed?

Haven't tried it yet. I'd say: take a test and let me know
This is the very first version of this extension, not much more than a proof-of-concept.

Is it responsive?

It scales just like any other text and image in a post.

Hi, I tested the two extensions and had no conflicts. Very good. Congratulations for your work.

[Ger]

Thanks!

[Ger]

Most functions seem to be working well, so I upped this to BETA.

[Ger]

I tweaked the styling a bit, see the updated screenshot in TS.
Since everything seems to work smoothly I intend to release this soon.

[Chrono]

I tweaked the styling a bit, see the updated screenshot in TS.
Since everything seems to work smoothly I intend to release this soon.

Nice. Im gonna checkit out

Cheers!

[</Solidjeuh>]

It should pull an image from the link, to share your post on social media like Facebook
Naaah it works great! Thank you!

[Theriddler1]

tested your extension Ger, nice work but i can only see it parsed when previewing the post
after posting the link is not parsed anymore

example: https://peppersrusforum.nl/viewtopic.php?p=44321#p44321