Resource icon

XenForo CinVin: Style & Meta Tweaks (use attachments for og:image & others) 1.1.1

No permission to download

Kevin

Code Monkey
Staff member
Kevin updated CinVin: Style Tweaks (use attachments for og:image & others) with a new update entry:

Changed name, changed XF requirement, new options

Changes for the 1.0.9 release...
  • Renamed add-on from [CinVin] Style Tweaks to [CinVin] Style & Meta Tweaks
  • Requires XF 2.2.x or above - Supporting multiple XF versions is not something that will be attempted and so, as a rule of thumb, the target will always be the current XF version.
  • New option for changing the phrase in the XF 'article' template from the default View full article to View more.
  • New option for...

Read the rest of this update entry...
 

btmgreg

Cadet
Hey guys. Merry Christmas.

Not sure what I'm doing wrong, but my thread image / attachment image doesn't show on the twitter card or anything. It just appears blank. When I share it via WhatsApp it shows the default XF logo.

I've attached screenshots
 

Attachments

  • Screenshot_20201225-110849.jpg
    Screenshot_20201225-110849.jpg
    490.1 KB · Views: 15
  • Screenshot_20201225-110842.jpg
    Screenshot_20201225-110842.jpg
    519.2 KB · Views: 11
  • Screenshot_20201225-110835.jpg
    Screenshot_20201225-110835.jpg
    429 KB · Views: 10

Kevin

Code Monkey
Staff member
sure what I'm doing wrong, but my thread image / attachment image doesn't show on the twitter card or anything. It just appears blank. When I share it via WhatsApp it shows the default XF logo
Greetings 🙂 Could you either post a link to a thread where it isn't working or send it to me in a PM?
 
Just noticed that developer added support for picking up hotlinked images for og:image in the update. This is very cool and thanks for this!
 

btmgreg

Cadet
Greetings 🙂 Could you either post a link to a thread where it isn't working or send it to me in a PM?
Sure! It's this


Seems to be anything I think

Thank you!
 
Code seems to be fine. Even Twitter's own validator shows the image just fine.


But it seems on the actual platform it is not showing the image. Image appeared for me in preview on Telegram.

Also do remember that Twitter cache URL card information for many days. So if it was posted there before image was added to the page... It would not update until their cache expires. Probably the reason why image is not appearing in this case.

Online resources say that using the card validator on Twitter usually refresh the cache. So it might fix by itself. Image definitely appears if I use a modified URL for the same page.

image (2).jpg

I hope this helps!
 

Kevin

Code Monkey
Staff member
@chromaniac Thanks for checking!

Yep, using the Twitter card validator tool (https://cards-dev.twitter.com/validator) and the Facebook validation tool (Sharing Debugger - Facebook for Developers) they are both showing the OG image as expected.
Also do remember that Twitter cache URL card information for many days. So if it was posted there before image was added to the page... It would not update until their cache expires. Probably the reason why image is not appearing in this case.
Oooh, I wasn't familiar with the cache delay before, thanks for the heads-up.

You guys have given me a To Do list item for the next update. From reading this exchange it seems that Twitter might also balk if the same image is used as the preview image on multiple page so for the next update I'll the thread ID as a qualifier to image URL to ensure it's always unique per thread. I think Chromaniac is correct with it being a Twitter cache issue but now that I know about this I'll take into account as well. :)
 

Kevin

Code Monkey
Staff member
Kevin updated CinVin: Style & Meta Tweaks (use attachments for og:image & others) with a new update entry:

New options and bug fixes

Changes for the 1.1.0 release...
  • Version: Bumped up to 1.1.0
  • New option: Use the thread title as the og:description if the first post of the thread has no text.
  • Changed: When the option to use the first available attachment as the og:image is turned on then the post ID associated with the attachment will be added as a parameter to the image URL. Thanks @chromaniac & @btmgreg for bringing...

Read the rest of this update entry...
 

btmgreg

Cadet
Hey guys. I don't quite understand how this works, but was just wondering - I'm guessing like @chromaniac said - it's just a matter of waiting?

1609018786821.png


I don't even get the xf og image, I just don't get anything. This is the same for browser/app. Weird huh? Is there any way to get twitter to reset it's cache on a per site basis?
 

Kevin

Code Monkey
Staff member
Looks like there's an issue when the thread type is 'article' instead of the default 'discussion' type; how the templates are handled for the different types new with 2.2 is enough that messing things up. :(

I'm taking a look to see what can be done (especially since I'm using the 'article' type on at least one forum).
 

btmgreg

Cadet
Ah so it's not just me? That's a relief. I've not tried regular discussion threads lately, as mostly I'll only share the articles from my news node on social media. It's weird that it shows the image in the twitter validator right?
 

Kevin

Code Monkey
Staff member
Ah so it's not just me? That's a relief. I've not tried regular discussion threads lately, as mostly I'll only share the articles from my news node on social media. It's weird that it shows the image in the twitter validator right?
Nope, not just you.

Until I come up with a better solution that I'm happy with, if you turn on the option OG:IMAGE fallback to XF Article Cover image that should take care of your 'article' type threads (essentially any of the new XF 2.2 types that are not the default 'discussion' type) as long as you have in image in the first post. So in this case you want both OG:IMAGE use Post Attachment and use Twitter Card and OG:IMAGE fallback to XF Article Cover image turned on.
 
i did find out that hotlinked images only work if they were in the first post. i assume this is designed for article thread types. but if it is not much complicated, it would be nice if hotlinked images are treated on par with attached images so they can get picked from any of the posts on that thread page?

as for twitter cache... i did find out that after i ran the link through twitter card validator... existing posts on twitter got updated and the new image in a few hours. i didn't even have to repost that link...
 

btmgreg

Cadet
Hey guys. This still really confuses me.

I have this link - The Concept of MJ ONE

When using the twitter validator - I get this -

INFO: Page fetched successfully
INFO: 18 metatags were found
INFO: twitter:card = summary tag found
INFO: Card loaded successfully

No image is shown though.

Also, when sharing articles/threads via whatsapp or facebook - it doesn't appear to show images for any articles. I have no idea what works, and what doesn't at this rate. Any tips?
 
Code:
        <meta property="og:image" content="styles/DC/ThreadThumbnail/no_image.jpg" />
        <meta property="twitter:image" content="styles/DC/ThreadThumbnail/no_image.jpg" />
        <meta property="twitter:card" content="summary" />

this is the meta tag for that link. plus it is not even a real link because you are missing `/` at the start. so no image load for this link.
 

Kevin

Code Monkey
Staff member
i did find out that hotlinked images only work if they were in the first post. i assume this is designed for article thread types. but if it is not much complicated, it would be nice if hotlinked images are treated on par with attached images so they can get picked from any of the posts on that thread page?
Yep, article threads, along with the other new 'type' threads in XF 2.2, are a bit of a bump for now until I have a chance to rethink how it's done.

For those who may not be familiar with XF, think of the "thread" object to be a header container that has the thread info like the title, date, and poster. The actual text of that that thread, including the first post of the thread, are all "post" detail objects. What that means in English is if you only have the "thread" object then you can grab the title & other details but if you want to grab any data, like attachments, then you need all of the corresponding "post" objects that are associated to the thread object. In short, the standard "thread" views are done via a template that exposes both the thread header container and all of the posts details objects at the same time so it's pretty easy to loop through the posts to find the first available attachment. The new type threads, like Article, on the other hand only exposes the thread object. The 'cover_image' function is PHP code that specifically looks for the attachment or linked image within the first post of the thread.

So with that said normal threads will still work as expected because the template has access to both the thread and post objects but at the moment 'article' threads & other types can only use the 'cover_image' option because the template doesn't have access to the post objects.

What's the solution? I need to create some new code sort of like the 'cover_image' function but that loops through all of the posts of the thread. It adds a layer of complexity because currently it's really simple to grab the attachments from standard threads using just a template modification and now we'll have to add some code to be executed instead.

So for anybody using the new 'article' type threads in XF 2.2+, the temporary solution is to turn on both options (OG:Image use Post Attachment and use Twitter Card & OG:IMAGE fallback to XF Article Cover image). It's not perfect but it should suffice for now. If you have the image proxy option turned on then you should add your own domain to the whitelist (the Image proxy bypass option), otherwise your remote hotlinked images will have the proxied URL instead of the real URL.
 
Top