Flip card does not look correct sometimes

Hi,

I think the issue is related to lazy loading of images. Can you deactivate any lazy loading plugins and disable lazy loading of images in WordPress.

https://www.ads-software.com/plugins/disable-lazy-loading/

I will try to fix it in an update soon.

Hello,

I have a similar issue here. May I know when the next update is going to be released?

Many thanks,

Richard

If I may add something. I have disabled lazy loading by adding the following code to the theme’s functions.php:

add_filter( 'wp_lazy_loading_enabled', '__return_false' );

I can confirm, in the browser inspector, the images are not lazy loading and the issue persists.

I wish there was an option to add attachments here, so that I could include some screenshots.

Cheers,

Richard

Hi,

Can you add a new code module at the bottom of the page after all the flip cards. Then add the following code inside the code module.

<script>
 
  $(".lwp_divi_flipbox img").each(function(){
    $(this).on('load', function() {
      			//console.log($(this).attr('src'));
            let $flip_box_front = $(this).parents(".flip_box_front");
            $flip_box_front.height('auto');
            let $front_height = $flip_box_front.height();
            let $flip_box_back = $(this).parents(".flip_box_back");
            $flip_box_back.height('auto');
            let $back_height = $flip_box_back.height();
            let $front_outer_height = $flip_box_front.outerHeight();
            let $back_outer_height = $flip_box_back.outerHeight();

            if ($front_height > $back_height) {
                $(this).parents(".flip_box").height($front_outer_height);
                $flip_box_back.height($front_height);
                $flip_box_front.height($front_height);
            } else {
                $(this).parents(".flip_box").height($back_outer_height);
                $flip_box_back.height($back_height);
                $flip_box_front.height($back_height);
            }
    });
  });
  
});
	
</script>

I will release an update next week.

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

Hi,

Thanks for the code. It seems to be only working on localhost. For some reason, it doesn’t work on the live site.

Cheers,

Richard

Could you share a link.

Sure, it’s 2 of them:

https://www.aurumexploration.com/aurum-exploration-team
https://www.aurumexploration.com/geological-services

But the issue can only be seen after clearing the website’s cache. I have just done that.

The code is not present on the page. It will only work if you add it in a code module on the page after all the flip cards module.

https://prntscr.com/1484df8

Yes, I know. I removed it because it had not worked.

I’m going to add it again to https://www.aurumexploration.com/aurum-exploration-team page and will get back to you as soon it’s in place.

The code is in now. Please see https://www.aurumexploration.com/aurum-exploration-team.

I am sorry I made a mistake in the code while copy pasting. Please try this code instead.

<script>
jQuery(function($) {
  
  $(".lwp_divi_flipbox img").each(function(){
    $(this).on('load', function() {
      			//console.log($(this).attr('src'));
            let $flip_box_front = $(this).parents(".flip_box_front");
            $flip_box_front.height('auto');
            let $front_height = $flip_box_front.height();
            let $flip_box_back = $(this).parents(".flip_box_back");
            $flip_box_back.height('auto');
            let $back_height = $flip_box_back.height();
            let $front_outer_height = $flip_box_front.outerHeight();
            let $back_outer_height = $flip_box_back.outerHeight();

            if ($front_height > $back_height) {
                $(this).parents(".flip_box").height($front_outer_height);
                $flip_box_back.height($front_height);
                $flip_box_front.height($front_height);
            } else {
                $(this).parents(".flip_box").height($back_outer_height);
                $flip_box_back.height($back_height);
                $flip_box_front.height($back_height);
            }
    });
  });
  
});
	
</script>

I have changed the code and it seems to be working only in Chrome, but not always.

Could you delete the code and try this code at its place.

<script>
jQuery(function($) {

    function resizeFlipCards() {
        $('.flip_box').each(function() {

            let $flip_box_front = $(this).find(".flip_box_front");
            $flip_box_front.height('auto');
            let $front_height = $flip_box_front.height();
            let $flip_box_back = $(this).find(".flip_box_back");
            $flip_box_back.height('auto');
            let $back_height = $flip_box_back.height();
            let $front_outer_height = $flip_box_front.outerHeight();
            let $back_outer_height = $flip_box_back.outerHeight();

            if ($front_height > $back_height) {
                $(this).height($front_outer_height);
                $flip_box_back.height($front_height);
                $flip_box_front.height($front_height);
            } else {
                $(this).height($back_outer_height);
                $flip_box_back.height($back_height);
                $flip_box_front.height($back_height);
            }
        });
    }

    $(window).on("load", resizeFlipCards());

});
</script>

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

Just tried the new code but it’s still the same.

It works directly in the browser. I see you are using a caching plugin. Can you check after deactivating it.