how can I get the URL of the first image displayed in a topic?

Started by TheDarkByte, December 18, 2013, 10:06:09 AM

Previous topic - Next topic

TheDarkByte

First of all, SMF is great! I have been using it for three months and had no problems with it, but recently I came up with an idea to integrate facebook like button (at the top of the page, so user can like the topic and share with friends on fb ) and comments (below the list of postsm so that user can comment without the need to register on the forum!).

I did it, and it works great, but, there is just one problem - when somebody likes the topic, the link posted on their wall ( or should I say timeline ) has a random picture from the forum. That's why I decided to take a look at OpenGraph, to add meta properties between the <head></head> and see does it work. It works, but, now I want it to display the first picture posted in the topic ( in case if somebody creates a new topic with an image, asking for other users' opinions.. ).

I am using SMF version 2.0.5 , and blue-access theme.

thanks! 

Kindred

by "first picture" do you mean IMG tagged picture or attachment?

It's going to be a challenge either way, because those things are not loaded when the "head" code is formed -- they are not loaded until much later in the page.
Слaва
Украинi

Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

margarett

You should first update your forum...

Are you using a mod for the Facebook button?
Se forem conduzir, não bebam. Se forem beber... CHAMEM-ME!!!! :D

QuoteOver 90% of all computer problems can be traced back to the interface between the keyboard and the chair

TheDarkByte

IMG tagged picture.. :D

yeah, I know.. It is a hell of a problem. I thought about it and if I could somehow connect to the database, and then search for the body of the requested message.. locate <img> tag, and retrieve the information between <img></img> ( but I hope there is a simpler solution ) .. and to do it all before the page loads.. i will need to add some more code to index.template.php , but that's all I came up with. Do you have any ideas?

TheDarkByte

.. no, I didn't use a mod for that.. I prefer to add code by myself, changing the template and that stuff :)

Kindred

well, see....   index.template doesn't even know that it is loading a message with an image AT ALL during the header...   and doing a database check of the messages table to read the body and look for an IMG BBC would be non-trivial in terms of performance.

In other words, there is *NO* good way to do what you are asking.

Personally, I use my forum logo as a forced image for the OG tag.

However, when you write the code yourself, that means that you have now bypassed the entire learning curve of the mod designers who have already done something (and had hundreds of users test their design)
Слaва
Украинi

Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

TheDarkByte

I understand your point. I did the same, forced the logo to popup, but that isn't "attractive" to those guys from FB :D Anyway, I understand that doing so would cause performance issues, so I am not going to do that. It is interesting that Google+ works. It finds the right image and it is shown in your recent activity.
I write code by myself mainly because I want to learn something ( and because not all mods are accepted ) ..

Arantor

The less-than-obvious truth is that when you enter a URL in Facebook, it will attempt to load the page anyway for the purposes of finding the og:image reference. If it doesn't find one it will attempt to load all the images on the page and find the ones that are within a certain size range, and offer those as choices to the poster - so unless those images are huge (in which case, FB may ignore even the og:image directive), it will be able to find them itself, though it has a habit of also finding avatar images as possible OpenGraph images.

Mods only don't get accepted when they add an unnecessary performance penalty to the code. In fact I can actually think of a way to do this without causing performance issues but it's very nasty and not recommended, but would work.

TheDarkByte


Arantor

I'm not being funny but I don't particularly want to explain how to do it in depth because unless done by someone competent it has the potential to go very, very wrong.

Essentially you hijack the image bbc tag processing, and set a global variable to the URL of the og:image you're going to use, but only the first time you do it (and, I guess, make sure the variable is not set before the main bbc processing in posts is done otherwise you could end up grabbing an image in the news area). You then add a buffer rewrite (e.g. via the integrate_buffer hook, which you can do right there) to splice that header in before </head> after the rest of page content is done.

This is distinctly not for faint of heart.

IchBin™

Might be easier to just use a bit of javascript to do this. Have the javascript search the posts for the first image, then add that image to your og:image.
IchBin™        TinyPortal

TheDarkByte

thanks guys.. I'll have that in mind.. :) the topic is closed if you ask me.

Advertisement: