Images disappear when using Excerpts with Highlights

  • This may be a bug that affects only a very specific usage case.

    When images on a page use Elementor’s “Entrance Animation” motion effects
    AND
    when “Custom search result snippets” is enabled
    AND
    when “Highlight query terms in documents” is enabled
    THEN
    those images will not appear when the page is opened from search results.

    To enable Entrance Animation in Elementor:
    Click on the image…
    go to Elementor’s Advanced tab…
    expand Motion Effects…
    and choose any Entrance Animation (eg Fade In Left)

    Examples:
    Go to this site: https://www.asterol.com/khs/
    In the search box, enter the search term 2070
    You will get two results.

    The top result does NOT have Entrance Animations. The images DO appear when you open the page.

    The bottom results DOES have Entrance Animations for the two images at the top of the page only. The top two images DO NOT appear when you open the page.

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Mikko Saari

    (@msaari)

    Looks like the Relevanssi on-page highlighting messes up the quotes in the data parameters related to the animation.

    Try this:

    add_filter( 'relevanssi_clean_excerpt', function( $content ) {
    if ( preg_match_all( '/data-settings="(.*?)" [d<]/', $content, $matches ) ) {
        $source  = array();
        $replace = array();
        foreach ( $matches[1] as $match ) {
            $source[]  = $match;
            $replace[] = str_replace( '"', '&quot;', $match );
        }
        $content = str_replace( $source, $replace, $content );
    }
    return $content;
} );

    Does this fix the problem?

    Thread Starter semoliner

    (@semoliner)

    Yes! Awesome – thank you so much ??

    Thread Starter semoliner

    (@semoliner)

    Actually… this has caused some issue with other pages (which do not use entrance animations).

    Eg.
    Go to the home page and enter “parents” as a search term
    You will get only one result
    Click on Read more>>
    You will see that the page formatting is disrupted

    Remove ?highlight=”parents” from the URL in the address bar and hit Enter, the page then reloads with the correct formatting.

    Plugin Author Mikko Saari

    (@msaari)

    This might work better:

    add_filter( 'relevanssi_clean_excerpt', function( $content ) {
    if ( preg_match_all( '/data-settings="(.*?)"[ >]/', $content, $matches ) ) {
        $source  = array();
        $replace = array();
        foreach ( $matches[1] as $match ) {
            $source[]  = $match;
            $replace[] = str_replace( '"', '&quot;', $match );
        }
        $content = str_replace( $source, $replace, $content );
    }
    return $content;
} );
    Thread Starter semoliner

    (@semoliner)

    Indeed it does – thank you again for your assistance with this!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Images disappear when using Excerpts with Highlights’ is closed to new replies.