Skip to content

Incompatibility with JetEngine Listing Grid "Load More" Feature #860

Open
@kushh23

Description

@kushh23

Description

There appears to be an incompatibility between the Optimole plugin and JetEngine's Listing Grid widget when using the "Load More" feature in both Elementor and Gutenberg editors. The images that loads after clicking the "Load More" button are not optimized by Optimole.

This issue impacts dynamic content workflows where custom post types with featured images are displayed using JetEngine's listing functionality.

The issue can be seen here - https://optimole-jet-engine-test.vertisite.cloud/movie-test/

Expected Behavior:
Images loaded dynamically after clicking the "Load More" button should be optimized by Optimole, just like the images initially visible on page load.

Actual Behavior:
Images loaded dynamically after clicking the "Load More" button are not optimized by Optimole, which results in unoptimized images being displayed.

Step-by-step reproduction instructions

  1. Install and activate the following plugins:

    • Optimole

    • JetEngine jet-engine.zip

    • Elementor or Gutenberg (depending on your setup)

  2. Create a custom post type in JetEngine and enable Featured Images for it.

  3. Use JetEngine to create a Listing Component for the custom post type that you created. And design this listing in a way that it shows the feature post image(Using Dynamic Image)

  4. Add the Listing Grid widget to a page using either Elementor or Gutenberg. Assign the previously created listing component to the grid.

  5. Enable the Load More feature for the Listing Grid.

  6. View the page on the frontend and click the "Load More" button to load additional items dynamically.

Screenshots, screen recording, code snippet or Help Scout ticket

I have recorded all the steps on a fresh instance and added the videos in the steps:

Step 1: Creating the Custom Post Type and Listing : https://vertis.d.pr/v/0KMLey

Note: Before moving to Listing part add 3-4 post type with feature images
In listing use Dynamic Field and Dynamic image

Step 2: Creating the Listing grid on our normal page: https://vertis.d.pr/v/Fve4Tv
Note: Please use Listing grid widget and use load more function and load more button id should match the id of the button you will add below

Step 3: Checking the result in Front end: https://vertis.d.pr/v/vauM6s

Note: Please add the correct id of load more function on button

Here is the credential of the environment as well:

https://optimole-jet-engine-test.vertisite.cloud/wp-admin
kush / 4u%u%j4NcP)BVdlgz*Qj6I%J

Reported here - https://secure.helpscout.net/conversation/2772308895/442387

Environment info

No response

Is the issue you are reporting a regression

No

Metadata

Metadata

Assignees

No one assigned

    Labels

    3rd-part-compatibilitiesIssue or feature related to a compatibility with a 3rd party product.bugThis label could be used to identify issues that are caused by a defect in the product.customer reportIndicates the request came from a customer.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions