WBCE CMS Forum

losttrip

Member

SocialMedia made easy + NWI preview image

I had tried the socialmedia made easy opengraph on a few sites, but the image selection wasn't working.  I just reinstalled the latest version and the canonical functionality works, but the news post image is still not being chosen from News with Images posts.  Maybe it only works with the original News module?

I manually place an image to be used, but then that is global.  I liked the idea of someone sharing a News with Image post page, and that particular image being used... but it doesn't seem to work.

florian

Administrator

Re: SocialMedia made easy + NWI preview image

The SocialBaker module needs some tweaking for beeing used with WBCE/NWI
Edit include.php

Change lines. 464-465

if(isset($post_id)) {
		$page = $database->query("SELECT *, link as menu_title, content_short as description FROM " . TABLE_PREFIX . "mod_news_posts WHERE `post_id`='".$post_id."'");

to

if(isset($post_id)) {
		$page = $database->query("SELECT *, `link` as `menu_title`, `content_short` as `description` FROM `" . TABLE_PREFIX . "mod_news_img_posts` WHERE `post_id`='".$post_id."'");
		$post_link = $database->get_one("SELECT `link`  FROM " . TABLE_PREFIX . "mod_news_img_posts WHERE `post_id`='".$post_id."'");
		$settings['page_link'] = WB_URL.PAGES_DIRECTORY.$post_link.PAGE_EXTENSION;

and line 548-550 (550-552 after the changes above)

} elseif(isset($post_id) && file_exists(WB_PATH.MEDIA_DIRECTORY.'/posts/'.$post_id.'.jpg')) {
		$retval['filename'] = WB_PATH.MEDIA_DIRECTORY.'/posts/'.$post_id.'.jpg';
		$retval['url'] = WB_URL.MEDIA_DIRECTORY.'/posts/'.$post_id.'.jpg';

to

} elseif(isset($post_id)) {		
		if($image = $database->get_one("SELECT `image` FROM `" . TABLE_PREFIX."mod_news_img_posts` WHERE `post_id`='".$post_id."'")) {
				$retval['filename'] = WB_PATH.MEDIA_DIRECTORY.'/.news_img/'.$image;
				$retval['url'] = WB_URL.MEDIA_DIRECTORY.'/.news_img/'.$image;
		}

---

Sorgen sind wie Nudeln: man macht sich meist zu viele.

losttrip

Member

Re: SocialMedia made easy + NWI preview image

As always, you have gone over and above to help.  Your edit works perfectly to use the gallery image as the facebook share image.  Thank you!  I am sincerely grateful.

I had no idea you were working on this.  I was trying to figure it out myself, since I posted in the other thread, but got stumped because many of the posts on a particular client's site do not add gallery images (which are stored in the post id folder) to their posts, they only use the preview image (both on the main page, and the details pages).  And from what I can tell, all the preview images, from all the posts, are all stored together in the media/.news_img root.  I was trying to figure out how to say in code, "if there isn't a gallery image for a post, use the preview image", but didn't know how to achieve that, or if it was even possible... but I didn't want to bother you by asking.

Last edited by losttrip (20.05.2024 23:44:38)

florian

Administrator

Re: SocialMedia made easy + NWI preview image

I was working on it, but I abandoned it, and now I remember why: the available images in the .news_img directory are the resized ones. Which are useless as sharepics if the image size is set to thumbail size (default values). So if the image size is not set to a proper size (i.e. >= 800x600 and the images are resized only by CSS), the code above is merely useless, and also it makes no sense to display the image in the article instead of the gallery.

The image handling of NWI is, I have to confess, rather poor. There are no larger versions of the post image stored on the server - that was handled much better in the Topics module.

Last edited by florian (21.05.2024 13:28:04)

---

Sorgen sind wie Nudeln: man macht sich meist zu viele.

losttrip

Member

Re: SocialMedia made easy + NWI preview image

Ah, I see.  I didn't understand where the issue was originating from.

I though the module wasn't finding the preview image to use as the og image.  Now I see that the module is using the preview image, as I can see in the view source.  The issue is that facebook requires a minimum of 200x200 pixel image.  So, even though I have my "Resize preview image to:" set to 250 x 250 px, when the image isn't square, the long size gets set to 250px, but the short side is below 200px... therefore facebook leaves the linked  image blank.  I tested with a preview image just over 200px x 200px and it works with the link image.

Okay.  Well, this has nothing to do with the module.  So, thank you for the help, and explanation.

I'm not asking for this as a feature considerations for NWI, I'm just reminded of a useful resize feature in some of my photo/graphic software - "resize short side to" or "resize long side to".  That way, you can make sure the short side is at least 200px, and therefore the long side would automatically be fine too.  But, of course this could cause it's own design issues, with an image with greatly varied dimensions.

I will just inform the client to either use square images, or they won't have a share image for that particular post share on facebook.  Not a big deal.

losttrip

Member

Re: SocialMedia made easy + NWI preview image

Just thought of this.  Would it be difficult to put in a check to test if any of the preview image dimensions is less than 200px, then move on to the next image option in the module hierarchy... ultimately resulting in the /media/pages/website.jpg image being found and used, in my case?

The snippet will scan that location for images in the following way.

1) For Topics, Bakery and OneForAll pages the linked image will be used.
2) else scan for /media/pages/{PAGE_ID}.jpg
	for newsitems the scan is for /media/posts/{POST_ID}.jpg
3) else scan for /media/pages/{MENU_TITLE}.jpg (case sensitive!)
4) else scan for /media/pages/website.jpg (default image for the website)

If using these rules no images are found, there will not be an "og:image" output.

Last edited by losttrip (22.05.2024 18:47:24)

webbird

Administrator

Re: SocialMedia made easy + NWI preview image

Wenn Du magst, erstelle einen Feature Request für NWI auf GitHub. Ich kann nicht versprechen, dass ich mich darum kümmern kann, aber vielleicht findet sich ja jemand anders.

If you like, you can submit a feature request for NWI on GitHub. I can't promise that I'll be able to take care of it, but maybe someone else will.
(Translated with DeepL)

https://github.com/WBCE/News-with-Images/issues

---

Ich habe eine Amazon-Wishlist. Oder spende an das Projekt.
Ich kann, wenn ich will, aber wer will, dass ich muss, kann mich mal

losttrip

Member

Re: SocialMedia made easy + NWI preview image

Hi, I wasn't requesting a feature for NWI.  My question about the possibility of adding a check was about the SocialBaker module, not NWI.  I wasn't clear, sorry.

Florian provided code which allows the SocialBaker module to find images in NWI posts (gallery image, or, in the example below - the preview image):

<meta property="og:url" content="https://www.mysite.ca/posts/new-post-137/" />
	<meta property="og:image" content="https://www.mysite.ca/media/.news_img/pxl_20231118_203349671.jpg" />
	<meta property="og:image:width" content="188" />
	<meta property="og:image:height" content="250" />

But, if the preview image happens to be less than 200px (either width or height), as it is in this example) then facebook will not use it, and the share will not have an image.  I was asking if it would be possible to include a check for the image dimensions in the new code, and if either is less than 200px, then don't use the NWI image, but move on to the next selection options in SocialBaker module:

The snippet will scan that location for images in the following way.

1) For Topics, Bakery and OneForAll pages the linked image will be used.
2) else scan for /media/pages/{PAGE_ID}.jpg
	for newsitems the scan is for /media/posts/{POST_ID}.jpg
3) else scan for /media/pages/{MENU_TITLE}.jpg (case sensitive!)
4) else scan for /media/pages/website.jpg (default image for the website)

If using these rules no images are found, there will not be an "og:image" output.

I hope I haven't further complicated things.  It's been a long day.

florian

Administrator

Re: SocialMedia made easy + NWI preview image

Please find attached an enhanced version of the socialbaker/include.php, which checks sveral options:
1) if the preview image is larger than 200x200 pixel, that one will be used
2) if not, look in the gallery for the first picture; if that one is large enough, use it
3) go on with the other fallbacks (page id / parent page id / website.jpg)

Just rename it back to include.php and replace the existing one (via FTP oder AFE)

@Ruud - If you like, adapt (and improve) the code. The module should still work with the classic news module too (but with no further image size checks).

---

Sorgen sind wie Nudeln: man macht sich meist zu viele.

losttrip

Member

Re: SocialMedia made easy + NWI preview image

AWESOME support and development!

Not sure how many people visit this English Only forum, but if anyone tries adding this enhancement and the facebook share image results still don't seem to be working as described by Florian, try scraping your page(s) to update the facebook cache with this tool - https://developers.facebook.com/tools/debug/

Many thanks Florian!

webbird

Administrator

Re: SocialMedia made easy + NWI preview image

Hi, I wasn't requesting a feature for NWI.  My question about the possibility of adding a check was about the SocialBaker module, not NWI.  I wasn't clear, sorry.

Ich dachte eher, weil Florian meinte, die Handhabung der Bilder in NWI wäre nicht ganz optimal.

I thought it was more because Florian said that handling the images in NWI wasn't quite optimal So *I* wasn't clear.

---

Ich habe eine Amazon-Wishlist. Oder spende an das Projekt.
Ich kann, wenn ich will, aber wer will, dass ich muss, kann mich mal