We’d expect the image used for social sharing (og:image) would be the one at the top of the main-content area (right two-thirds) of a student doing sports broadcasting. Instead, the ZeeMee icon is being picked up.
I assume LiveWhale is finding the first image in the body that’s not in the header, or something close to that. Thus, the key issue is that our templates have the left sidebar with navigation and this sub-nav area are first in the sequence of HTML elements, making the ZeeMee logo the first valid image on the page.
I’ve proposed we move/adapt the callout away from the sidebar, but I’ve been asked to explore other possibilities and keep the ZeeMee link there if at all possible. Reworking the templates to fix the HTML sequence to match expectations is more than I can commit to now.
I am also hoping for a general solution, rather than a per-page or per-group solution, given I have other instances (like our Library) where this space is being used in a similar way.
What I am hoping for is the ability to influence LiveWhale’s image selection for the image <meta> tags. Something like:
First try to use an image from #main-content. If none, then default behavior.
Never consider images from #sidebar-content.
Always use group defined image regardless of page content.
etc.
Else, some similar way to influence the image <meta> tags.
I don’t have a solution, but I can tell you that your assumption is mostly correct. LiveWhale uses the first image in an editable WYSIWYG area for the og:image, per Integrations - LiveWhale Support. That link contains a little more information about a way to change that behavior but it is on a per-page basis, so not exactly what you want.
We did add a custom field to the page details editor to make it easier for users to specify a different image, because we have cases where the first image is not always the desired one.
Thanks for this. I could have sworn there was some option like data-share-image out there, but my searches didn’t lead me to the Integrations - LiveWhale Support page.
As you note, that’s a per-page solution. A user could still add an image there and not know this is an option, or a user might change images on the page and not realize a fixed image is defined. Doable, but my idealist brain still holds out hope for a more certain solution.
That said, I’ll likely end up using this in general. I assume that the data-share-image is added to the page by a custom module?
Yeah, I knew the information was out there, but it took me a minute to find it too. I eventually searched “facebook” and found it in the docs.
I agree that a better solution would be preferable in your case, but glad to help.
Yes, we have a custom module that adds <meta data-share-image="path/to/share/image" /> to the head of pages in the onBeforeOutput handler. My understanding is that the data-share-image attribute can be added anywhere in the source code to any element. We just chose to add a meta tag for some reason.
Well, I have something in place to address this specific need, and I was able to limit it mostly to the pages that need it. I’ll share here should it help anyone else in the future.
[in a public module]
public function onBeforeOutput($buffer) { // before widget/xphp processing
global $_LW;
// make group id available, continue if defined
$_LW->applyPageAndGroupVars('<xphp var="group_id"/>');
if (!empty($GLOBALS['group_id'])) {
// if group is Core: Admissions and is a page (not details)
if (($GLOBALS['group_id'] == 37) && (empty($_LW->is_details_template))) {
// if page content contains "ZeeMee" or "Beloit Bridge" (i.e. a #sidebar-content blurb widget tag)
$posZM = strpos($buffer, 'ZeeMee');
$posBB = strpos($buffer, 'Beloit Bridge');
if ( ($posZM !== false) || ($posBB !== false) ) {
// set an alternative social share image
$buffer=str_replace(
'</head>',
'<meta data-share-image="https://www.beloit.edu/live/image/gid/94/13377_middle-college-autumn.jpg" />
</head>',
$buffer);
}
}
}
return $buffer;
}
It works, but hoping the LiveWhale folks consider my more ideal solutions as feature ideas. ;D
The ability to influence LiveWhale’s image selection for the image <meta> tags:
First try to use an image from #main-content. If none, then default behavior.
Never consider images from #sidebar-content.
Always use group defined image regardless of page content.
Thanks for your thought-work on this, Nick. Glad to hear your custom module was able to do the trick for your use case!
More broadly, I’m open to roadmapping this idea but I think the broadly-applicable core version I could envision biting off would need to be a bit tighter in scope: for instance, what if it were “configure an array of editable area IDs, and scan the page in that order, taking the first image found as your meta image when none other has been configured”? That way you could set ['main-content', 'sidebar-content', 'etc']; at the config level, and it would fall back to scanning the whole page if none was found in those areas. Let me know if that kind of thing appeals to you and I can file it for the roadmap, and/or if you’re interested in splitting it as a fast-tracked project with some support hours. Thanks!
The list was possibilities to solve the solution; definitely don’t need them all. What you propose, defining the priority of sections by #id would work I think. Better yet, that seems the most flexible option given differences in design and implementation.
Definitely add to roadmap. I don’t think I need a fast-track in this case given I’ve solved the major instance for now. I’ll follow up via support if that changes.
I like that idea and I’d like to propose some related ideas for roadmap consideration.
Add a checkbox to the Edit Image dialog box that allows you to specify a specific image on the page as the og:image. Sometimes the first image on the page, even in a valid editable area, is not the preferred one.
And also show the og:image in the Edit Page Details page, like in other content type editors. This could show the auto-selected image or the one chosen by my previous suggestion, and allow you to either clear it and revert to a global image or choose an entirely different image from the library.
I know these are big asks, but hey, I can dream, right?
Thanks.