oferlaor

my wordpress is in Hebrew (not sure if a screenshot will help you because of it, but I don’t think it’s the root cause). With the latest version of both plugins, I get this error after clicking “add Media” button on the new post page.

Uncaught TypeError: Cannot read properties of undefined (reading 'uploader')
    at n.initialize (the-paste.js:148:63)
    at h.View (backbone.min.js?ver=1.4.1:2:14648)
    at n.constructor (wp-backbone.min.js?ver=77df236a32da308d12654bbcacfa5fc2:2:2602)
    at n.constructor (media-views.min.js?ver=77df236a32da308d12654bbcacfa5fc2:2:106750)
    at new n (backbone.min.js?ver=1.4.1:2:23485)
    at n.browseContent (media-views.min.js?ver=77df236a32da308d12654bbcacfa5fc2:2:74798)
    at p (backbone.min.js?ver=1.4.1:2:3700)
    at f (backbone.min.js?ver=1.4.1:2:3497)
    at a (backbone.min.js?ver=1.4.1:2:692)
    at e.trigger (backbone.min.js?ver=1.4.1:2:3380)

It looks like it has to do with a conflict of trying to add the paste button to the media upload modal and not succeeding to inject the “copy & paste” tab/button.

in order to resolve it, I made the following patch in wp-content/plugins/the-paste/js/admin/the-paste.js

I unminified it and removed this block of code (line 746 after de-minification)

/*
                    },
                    this.controller instanceof wp.media.view.MediaFrame.Select || wp.media.thepaste.supports.paste && (e = new wp.media.view.Button({
                            text: n.copy_paste,
                            className: "grabber-button",
                            priority: -64,
                            click: function () {
                                t.thepaste.active = t.thepaste.paste,
                                t.thepasteOpen(n.copy_paste)
                            }
                        }), this.thepaste.paste.grabber = new wp.media.thepaste.view.DataSourceImageGrabber({
                            controller: this.controller,
                            grabber: wp.media.thepaste.view.Pasteboard,
                            wpuploader: this.controller.uploader.uploader.uploader
                        }), this.toolbar.set("pasteModeButton", e.render()))
*/

now try going into a post, press the “add Media” button. That’s what exploded last time I tried this…

am I the only one using both plugins?

So, when a post (single) is requested to produce an og:image, the filter tests if the featured post image is jpg. If it is, it just adds a tag so that “polish” feature in cloudflare doesn’t turn it automatically to webp (needs a page rule, I don’t think there is a built in query param to turn it off).
If it’s not jpg, it creates a cacheable jpg file from the mobile featured image and delivers it with the cloudflare polish bypassing flag.

Uncomment the second part – it’s something that ideally should be part of Yoast to make it bullet proof.

• This reply was modified 1 year, 7 months ago by oferlaor.

//og:image yoast 
add_filter('wpseo_opengraph_image', 'fix_image', 10, 2);
function fix_image($image, $present) {
	$prevent_cloudflare_polish_webp_conversion="?nopolish=1";
/*
	if( is_single()) {
		$thumb= get_the_post_thumbnail_url(get_the_ID(), 'mobile');
		$thumbext= substr($thumb, -4);
		switch ($thumbext) {
			case '.jpg':
			case '.gif':
				break;
			default:
				preg_match('/^((?:http|https)(?::\/\/)(?:.*?))((\/(?:.*?\/)*)((.*)(\..*)))$/i', $thumb,$match);				
				$src= getcwd() . $match[2];
				$ext= ".jpg";
				$tgt= $src . $ext;
				$thumb.= $ext;
				
				if (!file_exists($tgt)) {
					if ($thumbext=='webp')
						$im = imagecreatefromwebp($src);
					if ($thumbext=='.png')
						$im = imagecreatefrompng($src);
					imagejpeg($im,$tgt, 100);
					imagedestroy($im);
				}
				break;
		}
		return $thumb . $prevent_cloudflare_polish_webp_conversion;
	}
*/
	return $image . $prevent_cloudflare_polish_webp_conversion;
}

it’s a half baked patch for yoast only. It’s not a great solution, IMO.

The right solution should be internal to Yoast.

$prevent_webp_convert= "?nopolish=1";

I use this in cloudflare’s polish with a page rule that prevents it from converting the image to webp

add_filter('wpseo_opengraph_image', 'fix_image', 10, 2);
function fix_image($image, $present) {

	if( is_single()) {
		$thumb= get_the_post_thumbnail_url(get_the_ID(), 'mobile');
		$thumbext= substr($thumb, -4);
		switch ($thumbext) {
			case '.png':
			case '.jpg':
				break;
			case 'webp':
				preg_match('/^((?:http|https)(?::\/\/)(?:.*?))((\/(?:.*?\/)*)((.*)(\..*)))$/i', $thumb,$match);
				$src= getcwd() . $match[2];
				$dir= '/thumb/';
				$ext= ".jpg";
				$thumb= $match[1] . $dir . $match[5] . $ext;
				$tgt= getcwd() . $dir . $match[5] . $ext;
				if (!file_exists($tgt)) {
					$im = imagecreatefromwebp($src);
					imagejpeg($im,$tgt, 100);
					imagedestroy($im);
				}
				break;
		}
		return $thumb . $prevent_webp_convert;
	}

	return $image;
}

it happens when we copy paste from file manager (e.g., in windows).

I wrote some basic code that might be useful as a solution for this (in the other thread on this forum), basically auto convert to jpg with cache blocker.

try turning off Polish in cloudflare and see if that makes a difference.

result for my URL (https://htmag.co.il/%d7%94%d7%92%d7%91%d7%a8-%d7%94%d7%9e%d7%95%d7%a9%d7%9c%d7%9d-%d7%a9%d7%9c%d7%9a.html) is:

<meta property="og:image" content="https://htmag.co.il/thumb/Dan-Stevens_Sandra-Hu?ller_cChristine-Fenzl-copy-1614730501-568x320.jpg" class="yoast-seo-meta-tag" />
<meta property="og:image:width" content="1296" class="yoast-seo-meta-tag" />
<meta property="og:image:height" content="730" class="yoast-seo-meta-tag" />
<meta property="og:image:type" content="image/webp" class="yoast-seo-meta-tag" />

the issue is that is the wrong thumbnail image…

the image it took was a random one from the top of the page… I’ve actually changed the code so it doesn’t appear directly as an img tag anymore, which means there’s no image there.

the root cause is that linkedin doesn’t support webp yet ??

I have an MySQL cache set up, so I’m not sure DB query cache with memcached will do anything.

I’ll turn object caching back on.

few findings:
1. Turns out that the server’s DNS was incorrectly set, which caused all outgoing requests to time out and fail. This allowed me to find a few spots where APIs were directly being accessed by the theme and add them to their own cache.

2. I am using memcached for page, minification, database and object caches.

I read somewhere that I should completely remove database and object caches, as they could cause issues. What do you think?