Thumbnails not showing after migrating to jQuery 3 from jQuery 1

I’m trying to migrade jQuery 1.7.2 to jQuery 3.4.1 in this site.
With jQuery 1.7.2 the thumbnails in the blog loop, or in the blog posts show up the right way.

The html is like this:

<img src=”https://www.thisiste.com/wp-content/uploads/2020/02/image-900×444.jpg” alt=”the right alt text” style=”display: inline-block;”>

However if I deregister 1.7.2 and I change to 3.4.1, the html of the thumnails changes to:

<img src=”#post-5304″ data-src=”https://www.thissite.com/wp-content/uploads/2020/02/image-900×444.jpg” alt=”the right alt text”>

I also found the PHP where the thumbnails are called:

if ( has_post_thumbnail() ) {

$thumb = get_post_thumbnail_id(); // get img ID
$img_url = wp_get_attachment_url( $thumb, ‘full’ ); // get img URL
$blog_layout_type = of_get_option( ‘blog_sidebar_pos’ );
$img_width = ( !is_singular() && ‘masonry’ == $blog_layout_type ) ? 450 : 900; // set width large img
$img_height = ( !is_singular() && ‘masonry’ == $blog_layout_type ) ? 222 : 444; // set height large img
$figure_class = “large”;

$post_format = get_post_format();
$module_box_atter = ( $post_format == ‘image’ ) ? ‘rel=”prettyPhoto” ‘ : ”;
$post_href = ( $post_format == ‘image’ ) ? $img_url : get_permalink();

$post_image_size = ( !is_singular() ) ? of_get_option( ‘post_image_size’ ) : of_get_option( ‘single_image_size’ );

// if ( $post_image_size == ” || $post_image_size == ‘normal’ && $blog_layout_type != ‘masonry’ ) {
if ( $post_image_size == ” || $post_image_size == ‘normal’ ) {
$imgdata = explode( ‘ ‘, get_the_post_thumbnail() );
$img_width = intval( substr( $imgdata[1], stripos($imgdata[1], ‘”‘ )+1, strrpos( $imgdata[1], ‘”‘ )-1));
$img_height = intval( substr( $imgdata[2], stripos($imgdata[2], ‘”‘ )+1, strrpos( $imgdata[2], ‘”‘ )-1));
$figure_class = ”;
}

$img_attr = ( of_get_option(‘load_image’) == ‘false’ || of_get_option(‘load_image’) == ” ) ? ‘src=”‘ : ‘src=”#post-‘ . get_the_ID() . ‘” data-src=”‘;
$post_image_before = ( !is_singular() || $post_format == ‘image’ ) ? ‘<a ‘ . $module_box_atter . ‘href=”‘ . $post_href . ‘” title=”‘ . get_the_title() . ‘” >’ : ”;
$post_image_after = ( !is_singular() || $post_format == ‘image’ ) ? ‘</a>’ : ”;

$image = $img_attr . aq_resize( $img_url, $img_width, $img_height, true ) . ‘”‘; // resize & crop img
echo ‘<figure class=”featured-thumbnail thumbnail ‘ . $figure_class.'” >’ . $post_image_before . ‘<img ‘ . $image . ‘ alt=”‘ . get_the_title() . ‘” >’ . $post_image_after . ‘</figure>’;
}

But I don’t see here why a different version of jQuery can influence the behavior of the thumbnails. How can I resolve it?

The same happens also in the related posts thumbnails:

if ( have_posts() ) {
$output = ‘<div class=”‘.$class.'”>’;
$output .= $display_title ? $before_title.$blog_related.$after_title : ” ;
$output .= ‘<ul class=”‘.$class_list.’ clearfix”>’;
while( have_posts() ) {
the_post();
$thumb = has_post_thumbnail() ? get_post_thumbnail_id() : PARENT_URL.’/images/empty_thumb.gif’;
$blank_img = stripos($thumb, ’empty_thumb.gif’);
$img_url = $blank_img ? $thumb : wp_get_attachment_url( $thumb,’full’);
$image = $blank_img ? $thumb : aq_resize($img_url, $width_thumbnail, $height_thumbnail, true) or $img_url;

$output .= ‘<li class=”‘.$class_list_item.'”>’;
$output .= $display_thumbnail ? ‘<figure class=”thumbnail featured-thumbnail”><a href=”‘.get_permalink().'” title=”‘.get_the_title().'”><img data-src=”‘.$image.'” alt=”‘.get_the_title().'” /></a></figure>’: ” ;
$output .= $display_link ? ‘<a href=”‘.get_permalink().'” >’.get_the_title().'</a>’: ” ;
$output .= ‘</li>’;
}
$output .= ‘</ul></div>’;
echo $output;
}

I hope somebody can help to resolve this issue.

EDIT: I also found this in custom.js:

// ———————————————————
// Call Magnific Popup
// ———————————————————
jQuery(“.thumbnail”).parent().each(function(){magnific_popup_init(jQuery(this))});

But it doesn.t seem to be the source of the problem, because even if I comment this line, the problem persists.

Read more here:: Thumbnails not showing after migrating to jQuery 3 from jQuery 1

Leave a Reply

Your email address will not be published. Required fields are marked *