WP 4.6 featured image issue

[northeme]

There is a problem since WP 4.6 with featured image thumbnails. A new hidden field called _thumbnail_id is being added automatically into the Set Featured Image panel. However, removing or adding a new thumbnail also adds a secondary _thumbnail_id field right before this default _thumbnail_id field.

Therefore, thumbnail changes are being ignored since PHP forms only take the last field into account. I've been using a custom Set Featured Image panel for my themes yet removing the custom code shows that the default one has also this problem. Could you confirm that is this an issue on my end or about WP 4.6?

[flixos90]

I cannot replicate this behavior on a vanilla WordPress setup. Are you sure you removed all custom code? I'm curious though what in the custom code could cause that behavior. Would you be willing to share that code with us?

[northeme]

Yes, it must be on my end. I've just tried with Twenty Sixteen and _thumbnail_id is being added into the div with "inside" class. However, somehow it's added outside of inside div on my theme. Apparently I'm supposed to investigate this issue.

Basically what I do is using the code below and remove the default :

remove_meta_box( 'postimagediv','post','side' );

and add my own content with this one :

add_meta_box('postimagediv', $ptitle, 'new_post_thumbnail_meta_box', $post_type, 'side', 'low');

Finally I use the function below to call default thumbnail form :

_wp_post_thumbnail_html( $thumbnail_id );

Entire function as follows :

function new_post_thumbnail_meta_box() {
			global $post, $northeme_customposts, $northeme_post_prefs, $northeme_thumbnails; // we know what this does
			 
			$screen = get_current_screen();
			
			echo '<div class="morefields">';
			
			if($screen->post_type!='post') { 
				$opts = array('image'=>'Thumbnail', 'video'=>'Embed Video URL', 'gif'=>'SVG / Animated Gif');
			}else{
				$opts = array('image'=>'Thumbnail', 'gif'=>'SVG / Animated Gif');
			}
			
			$args[] = array(
							'type'=>'select',
							'title'=>'Type',
							'name'=>'northeme-work-featured-type',
							'desc'=>'',
							'options'=>$opts
					);
					
					
			if($screen->post_type!='post') { 
			
				$args[] = array(
						'type'=>'tfieldvid',
						'title'=>'Video URL / Shortcode',
						'name'=>'northeme-work-featured-video',
						'desc'=>'Add a 3rd party website URL to display featured video / audio player.<br><br><strong>WP oEmbed</strong> function is used for embedding from websites such as Youtube, Vimeo, Soundcloud etc. <br><br>Please visit following URL to see supported websites :<br><a href=\'http://codex.wordpress.org/Embeds\' target=\'_blank\'>http://codex.wordpress.org/Embeds</a><br><br>On the other hand, WP video or any video shortcode is accepted : <br> [video src=\'http://domain.com/video.mp4\']'
					);
			}
			
			$args[] = array(
						'type'=>'upload',
						'title'=>'SVG / Animated Gif',
						'name'=>'northeme-work-featured-gif',
						'desc'=>'Upload or select an animated gif image from media library. SVG / Animated GIF images will be displayed in their original size.'
					);
					
			echo md_create_fields($args,1);
			
			
			if(isset($screen->post_type)) { 
				if(isset($northeme_post_prefs[$screen->post_type])) {
					$layout_id = $northeme_post_prefs[$screen->post_type]['thumbnail'];
				}
			}
			
			echo '</div>';
			
			$thumbnail_id = get_post_meta( $post->ID, '_thumbnail_id', true ); // grabing the thumbnail id of the post
			echo '<div class="nor-main-thumb-wrap">';
			echo _wp_post_thumbnail_html( $thumbnail_id ); // echoing the html markup for the thumbnail
			echo '</div>';
			 
			echo '<div class="hover-thumb">';
			
			$args = array(
							array(
								'type'=>'upload',
								'title'=>'Hover Thumbnail (optional)',
								'name'=>'northeme-work-thumb-hover',
								'desc'=>'Show up on image hover'
							)
					);
					
			echo md_create_fields($args,1);
			
			echo '</div>';
			
			
			if(isset($layout_id) && isset($northeme_thumbnails[$layout_id])) {
				if(isset($northeme_thumbnails[$layout_id]['height']) && is_numeric($northeme_thumbnails[$layout_id]['height'])) {
					
					if($northeme_thumbnails[$layout_id]['width'] > 420) {
						$rec_imgw = $northeme_thumbnails[$layout_id]['width'];
						$rec_imgh = $northeme_thumbnails[$layout_id]['height'];
					}else{
						$rec_imgw = 420;
						$rec_imgh = round(420 / ($northeme_thumbnails[$layout_id]['width'] / $northeme_thumbnails[$layout_id]['height']));
					}
					
					$rec_retina = ($rec_imgw*RETINARATIO).'x'.($rec_imgh * RETINARATIO).'px';
					$rec_std = ($rec_imgw).'x'.($rec_imgh).'px';
					
				}else{
					
					if($northeme_thumbnails[$layout_id]['width'] > 420) {
						$rec_imgw = $northeme_thumbnails[$layout_id]['width'];
					}else{
						$rec_imgw = 420;
					}
					
					$rec_retina = ($rec_imgw * RETINARATIO).'px wide with any height';
					$rec_std = ($rec_imgw).'px wide with any height';
				}
				
				if(RETINARATIO > 1) {
					echo '<div class="img-explain"><strong>'.$northeme_thumbnails[$layout_id]['name'].'</strong> layout requires minimum <strong class="underline">'.$rec_retina.'</strong> size images.<br><br>(Retina quality is set as <strong>'.RETINARATIO.'x</strong>. Adjust at <a href="'.admin_url('admin.php?page=northeme_framework#branding_header').'">Northeme > Theme Options > Layout > Website Layout > Retina Quality</a>).<br><br>Uploaded images will be cropped automatically unless SVG / animated GIF option is not selected.</div>';
				}else{
					echo '<div class="img-explain">Upload minimum <strong>'.$rec_std.'</strong> images.<br><br>Uploaded images will be cropped automatically unless SVG / animated GIF option is not selected.</div>';
					
				}
			}
			 
		}

[swissspidy]

@northeme Check out [38118] / #12922 for the changes to _wp_post_thumbnail_html() and others. Perhaps you need to change your markup a bit, haven't looked closely at it.

[northeme]

Just to follow-up, this issue was being happened by a JS code I've been using to replace div classes inside Featured Image panel to make some modifications. Apparently it doesn't match with new markup and I'll need to fix it.

So please ignore this ticket. I appreciate your help folks!