Step 1- Image not loading

Hey @jpderboghossian,

Glad you reached out.

Indeed, lazyloading images inside of the GiveWP iframe can prevent it from displaying the image correctly. Right now, we do not have a workaround for that, so it’s necessary to turn the lazyloading off for GiveWP.

Thanks for using GiveWP! Have a great day.

Can I turn it off specifically for the GiveWP pages only? If not, is there a way to just turn off image option on the 1st donation page?

Hi @jpderboghossian,
I believe the Smush plugin has a setting to exclude post types and classes from the optimization process. You can exclude the give_forms post type and the .image CSS class to fix this.

Hi @mrdaro and @jpderboghossian ,

thanks a lot for this thread! Now I understand my problem: Smush is the reason, that the images on page one are not displayed.

If I disable Lazy Loading, it works.

But if I disable only “donation forms” and the class “.image” it never works. Did someone solved the problem? Lazy Loading is cool and I do not want to disable overall.

Thanks a lot, if anyone has a solution!

Best regards
jwh

• This reply was modified 3 years, 9 months ago by jwhberlin.

It’s actually relatively easy to keep the SMUSH Lazy Loading active! The problem has to do with the fact that GiveWP loads the form data inside an iFrame but the template doesn’t use the regular wp_header and wp_footer, which SMUSH relies on to load the data necessary for the lazy-loading to work. So we need to add the styles and scripts manually. Here’s how you can do this in your functions.php

/**
 * Enqueue Smush Lazy Loading styles into Give form iFrames.
 */
function enqueue_smush_styles_for_give_iframe() {
	if ( class_exists( 'WP_Smush' ) ) {
		WP_Smush::get_instance()->core()->mod->lazy->add_inline_styles();
	}
}
add_action( 'give_embed_head', 'enqueue_smush_styles_for_give_iframe' );

/**
 * Enqueue Smush Lazy Loading scripts into Give form iFrames.
 */
function enqueue_smush_scripts_for_give_iframe() {
	if ( class_exists( 'WP_Smush' ) ) {
		// Get options.
		$options = Smush\Core\Settings::get_instance()->get_setting(WP_SMUSH_PREFIX . 'lazy_load' );

		$script = WP_SMUSH_URL . 'app/assets/js/smush-lazy-load.min.js';

		// Native lazy loading support.
		if ( isset( $options[ 'native' ] ) && $options[ 'native' ] ) {
			$script = WP_SMUSH_URL . 'app/assets/js/smush-lazy-load-native.min.js';
		}

		wp_enqueue_script( 'smush-lazy-load', $script, array(), WP_SMUSH_VERSION );
	}
}
add_action( 'give_embed_footer', 'enqueue_smush_scripts_for_give_iframe' );

Hi @davidbawiec ,

thanks a lot for the code to add to the functions.php. In my case the code lets the website not work at all; the page is white. Is there anything I have to change for my theme/server?

Best regards and thanks a lot for explanation and code
Jwh

The code should work as is with any theme really. Can you enable debugging in WP (add define( 'WP_DEBUG', true ); to your wp-config.php file and refresh the page to see what errors you’re getting. If you paste it here I can debug it further.

Hi David,
I am sorry, I missed the reply. In my case there is no error. DEBUG is active. I am using the Theme Neve. No idea; I tried many things, but noting works.
Best regards
jwh

Hi @davidbawiec,

can a Plugin be the source of the problem? The debug never shows an error, but the screen is white after adding the code to the functions.php (in a child theme).

JwH

Have you checked the debug.log file at /wp-content/debug.log? If you refresh the page any errors that are being generated should get logged there.
Depending on the host you’re on, the debug file may also be located at /errors.log, or in some private logs directory.

• This reply was modified 3 years, 9 months ago by David Bee.

Hi @davidbawiec ,

it is not easy. There is no error in the log!

After resetting to normal functions.php, I got this error a little later. But in my opinion, this is another problem?

[Tue Jun 29 20:41:22.215301 2021] [core:error] [pid 434] [client xxx.xxx.xx.xxx:xxxxx] xxxxxxx: Request exceeded the limit of 10 internal redirects due to probable configuration error. Use ‘LimitInternalRecursion’ to increase the limit if necessary. Use ‘LogLevel debug’ to get a backtrace., referer: xxxxx.org

Another information: It is a child theme of neve, could this be the problem?

Best regards
Jwh

• This reply was modified 3 years, 8 months ago by jwhberlin.

That sounds like a possible .htaccess file redirect issue. I’d recommend removing any custom redirect rules you may have in your .htaccess file to figure out what’s causing it. But that’s outside the scope of this thread, so I’d recommend starting a new thread on WP general support to help you figure out what’s going on with the site.

Hi @davidbawiec ,

thanks a lot; this is a different problem. But what can I do concerning the Pictures? Are there other plugins für donating I can test?

Best regards
jwh

Hi @davidbawiec ,

I restarted the process and now I solved the problem with your code – thanks a lot!
It was a small error in my functions.php… I am sorry and very thankful!

Best regards
jwh

Since SMUSH 3.9.1, the plugin has done away with the WP_SMUSH_PREFIX constant. So to get the code fully working again a small modification had to be made. Here’s the new code.

/**
 * Enqueue Smush Lazy Loading styles into Give form iFrames.
 */
function enqueue_smush_styles_for_give_iframe() {
	if ( class_exists( 'WP_Smush' ) ) {
		WP_Smush::get_instance()->core()->mod->lazy->add_inline_styles();
	}
}
add_action( 'give_embed_head', 'enqueue_smush_styles_for_give_iframe' );

/**
 * Enqueue Smush Lazy Loading scripts into Give form iFrames.
 */
function enqueue_smush_scripts_for_give_iframe() {
	if ( class_exists( 'WP_Smush' ) ) {
		// Get options.
		$options = Smush\Core\Settings::get_instance()->get_setting( 'wp-smush-lazy_load' );

		$script = WP_SMUSH_URL . 'app/assets/js/smush-lazy-load.min.js';

		// Native lazy loading support.
		if ( isset( $options[ 'native' ] ) && $options[ 'native' ] ) {
			$script = WP_SMUSH_URL . 'app/assets/js/smush-lazy-load-native.min.js';
		}

		wp_enqueue_script( 'smush-lazy-load', $script, array(), WP_SMUSH_VERSION );
	}
}
add_action( 'give_embed_footer', 'enqueue_smush_scripts_for_give_iframe' );

@matheusfd & @mrdaro it would be great to get this included in the plugin.