[JoyFreak] Set Open Graph Image

[JoyFreak] Set Open Graph Image

JoyFreak

Well-known member
JoyFreak submitted a new resource:

[JoyFreak] Set Open Graph Image - Set the open graph image for your threads. Increase visibility across social media platforms.

This guide will help you to set your forum's open graph image. It will use the first image in your thread, whether linked directly or attached.

Open template: thread_view

Find:
Code:
<xf:set var="$fpSnippet" value="{{ snippet($firstPost.message, 0, {'stripBbCode': true}) }}" />

Add below:
Code:
<xf:if is="$thread.cover_image">
<xf:macro template="metadata_macros" name="metadata"
    arg-description="{$fpSnippet}"
    arg-shareUrl="{{...

Read more about this resource...
 
Last edited:

briansol

Well-known member
Thanks for this.

Any reason why we can't just put the If around the added line instead of the whole block?
Code:
arg-imageUrl="{{ link({$thread.cover_image}) }}"
 

JoyFreak

Well-known member
Thanks for this.

Any reason why we can't just put the If around the added line instead of the whole block?
Code:
arg-imageUrl="{{ link({$thread.cover_image}) }}"
There's no reason. If that works for you, then use it.
 

est3ban129

Active member
You have to add the picture in the post. It pulls the first image in the post.

Here are some published images but it doesn't work either.
The logo of the website does not appear either
 

JoyFreak

Well-known member

Here are some published images but it doesn't work either.
The logo of the website does not appear either
That's strange because your website's page source is reading the attachment as the OG:Image:
Code:
<meta property="og:image" content="/foro/index.php?//cloudbit.es/foro/index.php?attachments/altavoz_-jpg.118931/" />

But Facebook debugger is using your logo image. I can't explain why that's happening.

Can you copy and paste the whole block you've edited, to see if it's correctly done?
 

est3ban129

Active member
That's strange because your website's page source is reading the attachment as the OG:Image:
Code:
<meta property="og:image" content="/foro/index.php?//cloudbit.es/foro/index.php?attachments/altavoz_-jpg.118931/" />

But Facebook debugger is using your logo image. I can't explain why that's happening.

Can you copy and paste the whole block you've edited, to see if it's correctly done?

I added it here because I couldn't publish it in the post

Thanks
 

JoyFreak

Well-known member
I added it here because I couldn't publish it in the post

Thanks
It looks ok to me. It should really work. You can also try this and let me know:

Find:
Code:
arg-imageUrl="{{ link({$thread.cover_image}) }}" />

Replace:
Code:
arg-imageUrl="background-image: url('{$thread.cover_image}')" />
 

est3ban129

Active member
It looks ok to me. It should really work. You can also try this and let me know:

Find:
Code:
arg-imageUrl="{{ link({$thread.cover_image}) }}" />

Replace:
Code:
arg-imageUrl="background-image: url('{$thread.cover_image}')" />
I've tried it, but it doesn't work
 

TMC

Active member
That's strange because your website's page source is reading the attachment as the OG:Image:
Code:
<meta property="og:image" content="/foro/index.php?//cloudbit.es/foro/index.php?attachments/altavoz_-jpg.118931/" />

But Facebook debugger is using your logo image. I can't explain why that's happening.

Can you copy and paste the whole block you've edited, to see if it's correctly done?

I'm thinking it's because they aren't using "full friendly URLs" and that makes the URL outputted by this mod to not work (i.e. the weird /foro/index.php?//cloudbit.es part at the start of the og.image url).
I did a quick test and changing the
arg-imageUrl="{{ link({$thread.cover_image}) }}" />
to
arg-imageUrl="{$thread.cover_image}" />
should make it work (and it also works when full friendly URLs are being used).
 

JoyFreak

Well-known member
I'm thinking it's because they aren't using "full friendly URLs" and that makes the URL outputted by this mod to not work (i.e. the weird /foro/index.php?//cloudbit.es part at the start of the og.image url).
I did a quick test and changing the
arg-imageUrl="{{ link({$thread.cover_image}) }}" />
to
arg-imageUrl="{$thread.cover_image}" />
should make it work (and it also works when full friendly URLs are being used).
Thanks for sharing that. If the others can confirm this works for them, I’ll update the resource.
 
  • Like
Reactions: TMC

est3ban129

Active member
I'm thinking it's because they aren't using "full friendly URLs" and that makes the URL outputted by this mod to not work (i.e. the weird /foro/index.php?//cloudbit.es part at the start of the og.image url).
I did a quick test and changing the
arg-imageUrl="{{ link({$thread.cover_image}) }}" />
to
arg-imageUrl="{$thread.cover_image}" />
should make it work (and it also works when full friendly URLs are being used).
Works fine! thanks
 
Top