Ecommerce Shopify WordPress Discussion

Second featured image only shows in metabox preview after saving a post in the wordpress editor

I am trying to add a second featured image to the Wordpress post editor, and it seems all be working. When I select and image from the mediauploader the first time the image shows in the preview of the metabox. However when I want change an image of the second featured image, I have to save the post first and than i seeing the change, it doesn't change immediately. Can some help please. This is my second-featured-image-meta-box.php <?php // Add meta box for second featured image function add_second_featured_image_meta_box() { $post_types = array('project'); // Adjust this to your post types foreach ($post_types as $post_type) { add_meta_box( 'second_featured_image_meta_box', 'Second Featured Image', 'display_second_featured_image_meta_box', $post_type, 'side', 'default' ); } } // Display content of the second featured image meta box function display_second_featured_image_meta_box($post) { $second_featured_image = get_post_meta($post->ID, '_second_featured_image', true); ?> <style> .image-preview img { max-width: 100%; height: auto; cursor: pointer; } .edit-image-link, .remove-image-link { margin-top: 5px; display: block; } </style> <label for="second_featured_image">Second Featured Image:</label> <div class="image-preview" id="second_featured_image_preview"> <?php if (!empty($second_featured_image)) : ?> <?php echo wp_get_attachment_image($second_featured_image, 'full'); ?> <?php endif; ?> </div> <button class="upload-image-button button" id="upload_second_featured_image_button">Upload/Select Image</button> <button class="remove-image-button button" id="remove_second_featured_image_button" <?php echo empty($second_featured_image) ? 'style="display: none;"' : ''; ?>>Remove Image</button> <input type="hidden" id="second_featured_image" name="second_featured_image" value="<?php echo esc_attr($second_featured_image); ?>" style="width: 100%;"> <?php } // Save the second featured image when the post is saved function save_second_featured_image_meta_box($post_id) { if (isset($_POST['second_featured_image'])) { $second_featured_image = absint($_POST['second_featured_image']); // Use absint to ensure it's an integer update_post_meta($post_id, '_second_featured_image', $second_featured_image); // Check if the remove image button was clicked if (isset($_POST['remove_second_featured_image']) && $_POST['remove_second_featured_image'] === 'true') { delete_post_meta($post_id, '_second_featured_image'); } } } // Hook to add meta box add_action('add_meta_boxes', 'add_second_featured_image_meta_box'); // Hook to save meta box data add_action('save_post', 'save_second_featured_image_meta_box'); ?> and this is my javascript: jQuery(document).ready(function ($) { let mediaUploader = wp.media({ title: 'Choose Image', button: { text: 'Choose Image' }, multiple: false }); mediaUploader.on('select', function () { var attachment = mediaUploader.state().get('selection').first().toJSON(); $('#second_featured_image').val(attachment.id); $('#second_featured_image_preview').attr('src', attachment.url).show(); $('#upload_second_featured_image_button').text('Change Image'); $('#remove_second_featured_image_button').show(); }); function removeFeaturedImage() { $('#second_featured_image').val(''); $('#second_featured_image_preview').attr('src', '').hide(); $('#upload_second_featured_image_button').text('Set Featured Image'); $('#remove_second_featured_image_button').hide(); return false; } // On page load, hide the "Remove Image" button if no image is selected if ($('#second_featured_image').val() === '') { $('#remove_second_featured_image_button').hide(); } $('#upload_second_featured_image_button').on('click', function (e) { e.preventDefault(); mediaUploader.open(); console.log("Works"); }); // Add click event for the "Remove Image" button $('#remove_second_featured_image_button').on('click', function (e) { e.preventDefault(); removeFeaturedImage(); }); });
TurboCommerce make the better internet purchasing globaly

Turbo Multi-language Translator

Make the better internet purchasing globaly

Turbosify SEO Speed Booster

5.0 (7) Free plan available
Get better conversions by improving store loading speed Installed

Turbo Multi-language Chat - AI Customer service in one hand

TurboCommerce make the better internet purchasing globaly
Our products

The help you need, when you need it

App by Turbo Engine

3 apps • 5.0 average rating

Turbosify Speed Booster

5.0 (7)
Get better conversions by optimizing shopify store Google page speed Installed

Turbosify Translator for Wordpress Woocommerce

5.0 (74) Free Wordpress Woocommerce Plugin
Translate your wordpress website to multiple language within 1 click, no configuration needed, no No technical required

Grow your business here

Whether you want to sell products down the street or around the world, we have all the tools you need.